I'm trying to render a Highcharts line chart, but am having some issues getting the series to show up when the page loads. Firebug doesn't show any errors, so I'm guessing that it's a problem with how my data is structured or how it is being passed to Highcharts.
The data es from a JSON file, with the variables being loaded using a method I got from another site... My data is a numeric y value for each month, with customTooltip being additional data I want to show on hover.
$.getJSON("json/mydata.txt",function(jdata) {
var arr = [];
$.each(jdata, function(key, val) {
var y = val.y;
var name = key;
var customTooltip = val.n;
arr.push({y: y, customTooltip: customTooltip})
})
var jseries = {name:arr.name, data:[{ny:arr.customTooltip, y:arr.y}]};
var options = {
chart: {
renderTo: 'fallcontainer',
defaultSeriesType: 'line'
},
title: {
text: 'Monthly Rate',
style: {
margin: '10px 100px 0 0' // center it
}
},
subtitle: {
text: 'Source',
style: {
margin: '0 100px 0 0' // center it
}
},
xAxis: {
categories: ['Jan 12', 'Feb 12', 'Mar 12']
},
yAxis: {
title: {
text: 'Rate',
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
min:0
},
legend: {
layout: 'vertical',
align:'right',
verticalAlign:'middle',
x:0,
title:'Care Setting'
},
plotOptions: {
},
credits: {
enabled:false
},
series:[]
};
options.series.push(jseries);
var chart = new Highcharts.Chart(options);
});
Here's a better example. What I really want to display is the 'y' as the y-axis with the 'n' and 'y' data on the hover. JSONLint said this is valid.
{
"Total": {
"y": [
9.39,
90.35,
90.36,
92.69,
93.02,
90.32,
90.6,
9.09,
9.5,
90.69,
9.6,
90.69,
9.53,
6.92
],
"name": "Total",
"n": [
962,
969,
999,
233,
235,
968,
999,
963,
989,
293,
986,
293,
989,
908
]
},
"Cat1": {
"y": [
6.38,
6.63,
90.3,
9.65,
90.25,
8.99,
92.39,
99.39,
9.28,
99.35,
99.36,
93.38,
8.69,
8.03
],
"name": "Cat1",
"n": [
6,
6,
90,
90,
90,
8,
93,
93,
99,
93,
93,
96,
99,
9
]
}
}
I'm trying to render a Highcharts line chart, but am having some issues getting the series to show up when the page loads. Firebug doesn't show any errors, so I'm guessing that it's a problem with how my data is structured or how it is being passed to Highcharts.
The data es from a JSON file, with the variables being loaded using a method I got from another site... My data is a numeric y value for each month, with customTooltip being additional data I want to show on hover.
$.getJSON("json/mydata.txt",function(jdata) {
var arr = [];
$.each(jdata, function(key, val) {
var y = val.y;
var name = key;
var customTooltip = val.n;
arr.push({y: y, customTooltip: customTooltip})
})
var jseries = {name:arr.name, data:[{ny:arr.customTooltip, y:arr.y}]};
var options = {
chart: {
renderTo: 'fallcontainer',
defaultSeriesType: 'line'
},
title: {
text: 'Monthly Rate',
style: {
margin: '10px 100px 0 0' // center it
}
},
subtitle: {
text: 'Source',
style: {
margin: '0 100px 0 0' // center it
}
},
xAxis: {
categories: ['Jan 12', 'Feb 12', 'Mar 12']
},
yAxis: {
title: {
text: 'Rate',
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
min:0
},
legend: {
layout: 'vertical',
align:'right',
verticalAlign:'middle',
x:0,
title:'Care Setting'
},
plotOptions: {
},
credits: {
enabled:false
},
series:[]
};
options.series.push(jseries);
var chart = new Highcharts.Chart(options);
});
Here's a better example. What I really want to display is the 'y' as the y-axis with the 'n' and 'y' data on the hover. JSONLint said this is valid.
{
"Total": {
"y": [
9.39,
90.35,
90.36,
92.69,
93.02,
90.32,
90.6,
9.09,
9.5,
90.69,
9.6,
90.69,
9.53,
6.92
],
"name": "Total",
"n": [
962,
969,
999,
233,
235,
968,
999,
963,
989,
293,
986,
293,
989,
908
]
},
"Cat1": {
"y": [
6.38,
6.63,
90.3,
9.65,
90.25,
8.99,
92.39,
99.39,
9.28,
99.35,
99.36,
93.38,
8.69,
8.03
],
"name": "Cat1",
"n": [
6,
6,
90,
90,
90,
8,
93,
93,
99,
93,
93,
96,
99,
9
]
}
}
- Could you show example of your data? Are you sure that is that JSON? Use some online validators (copy there your data) and make sure you have proper JSON. – Paweł Fus Commented Mar 28, 2013 at 16:52
- I added an example of the data to the OP. What I really want to display is the 'y' as the y-axis with the 'n' and 'y' data on the hover. – user2216475 Commented Mar 28, 2013 at 22:05
1 Answer
Reset to default 8You should look at this: http://api.highcharts./highcharts#series.data
If you specify each point as an object, you can add any property you want to each point and access it in your tooltip formatter through this.point.
With the data as currently formatted
var seriesArr = [];
$.each(jdata, function(key, data) {
var series = {name : key, data : []};
$.each(data.y, function(index, value) {
series.data.push({y: value });
});
$.each(data.n, function(index, value) {
series.data[index].n = value;
});
seriesArr.push(series);
});
This should yield :
seriesArr : [{
name : 'Total',
data : [
{y:9.39, n:9.62},
...
]
},
...
]
Then in your formatter function, you can acccess each as this.point.y or this.point.n
tooltip: {
formatter: function () {
return 'Y value is : ' + this.point.y + '<br>' + 'N value is : ' + this.point.n;
}
},
Working: http://jsfiddle/sgearhart2/9P5fC/