JSON Data Map Issue with HighCharts + Ajax - ajax

Question

I have the follow data returned via JSON
{"rows":[{"Date":"07/10/2011","Value":1206,"Action":"Drink"},
{"Date":"07/11/2011","Value":2288,"Action":"Pie"},
{"Date":"07/12/2011","Value":1070,"Action":"Drink"},
{"Date":"07/13/2011","Value":1535,"Action":"Beer"},
{"Date":"07/14/2011","Value":1721,"Action":"Drink"}],
"page":1,"total":1,"records":5}
I am trying to use this data with HighCharts but getting a bit confused.
jQuery.ajax({
url: fullPath + 'datamap',
dataType: "json",
type: 'POST',
data: "{}",
contentType: "application/json; charset=utf-8",
success: function (data) {
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var data = {};
$.each(items, function(itemNo, item) {
if (itemNo === 0) {
data.name = item;
} else {
data.y = parseFloat(item);
}
});
options.series[0].data.push(data);
});
// Create the chart
var chart = new Highcharts.Chart(options);
},
cache: false
});
I am trying to chart "Date" and "Value" ?

Answer 1

As I understand you need to show rows values with Highcharts. So firstly your initial data will be:
var chartData = data.rows;
Now chartData is just an array of objects. Use for loop to iterate through chartData like below:
var seriesData = [];
for (var i = 0; i < chartData.length; i++)
{
var x = new Date(chartData[i].Date).getTime();
var y = chartData[i].Value;
seriesData.push([x, y]);
}
After this loop you will have seriesData array of points that can be used in Highcharts. Now just render it:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chartContainer',
defaultSeriesType: 'line'
},
xAxis: {
type: 'datetime'
},
series: [{
data: seriesData
}]
});
Voila!
Test this: http://jsfiddle.net/ebuTs/8263/