How to load data to highcharts from ajax? - highcharts

Question

I am trying to get the series in the highcharts from ajax call. But its not working for some reason.I do not get the data populated in the chart. Please can anyone help me with this .
$(document).ready(function() {
$('#exercise').submit(function(e) {
var form = $(e.target);
e.preventDefault();
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
dataType: 'json',
data: form.serialize(),
success : function(data){
alert("parse");
alert(data);
chart4(data);
},
error : function(){
alert("Exercise Error!");
}
});
});
});
This is my ajax call
unction chart4(data){
Highcharts.setOptions({
});
alert("HIT");
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column',
margin: [50, 150, 60, 80]
},
title: {
text: 'Exercise',
style: {
margin: '10px 100px 0 0' // center it
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
},
},
yAxis: {
min: 0,
title: {
text: 'Minutes'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series:[data]
});
}
[{"duration":120,"date":1418803200000},{"duration":90,"date":1418889600000},{"duration":90,"date":1418976000000},{"duration":90,"date":1419235200000},{"duration":20,"date":1419580800000},{"duration":80,"date":1419667200000},{"duration":120,"date":1419753600000},{"duration":90,"date":1419840000000},{"duration":90,"date":141992600000}]
This is my JSON response

Answer 1

The problem is that you have custom names in the JSON. It should be x/y instaed of durable and date fields. Morever this line: series:[data] should be replaced with series:data becasue your json is array.