68
rated 0 times
[
73]
[
5]
/ answers: 1 / hits: 41187
/ 11 Years ago, wed, march 27, 2013, 12:00:00
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 comes 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
]
}
}
More From » json
