HighCharts download data via ajax

Question

I ran into problems over the last few days with ajaxing in some examples of json data from api to populate a chart using the Highcharts library.

I tried using chart.series [0] .data = json and similar things in my ajax callback, but nothing works.

my json is an array of data for each day of the month.

"{"month_mentions_graphic":[521,49,81,0,101,0,0,0,21,3071,0,0,0,0,0,1479,6124,2409,2608,0,0,3457,2057,2580,5876,4638,0,0,3337,3479,430]}" 

Here is my code:

 var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'line', marginRight: 130, marginBottom: 25, events: { load: requestData } }, title: { text: 'Menções Mensais', x: -20 //center }, xAxis: { categories: [1,2,3,4,5] }, yAxis: { title: { text: 'Menções' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0 }, series: [ { name: 'mentions', data: [] } ] }); }); function requestData() { $.ajax({ url: 'api/v1/dashboard/month_mention_graphic', type: "GET", dataType: "json", data : {username : "demo"}, success: function(data) { chart.series[0].data = data; }, cache: false }); } 

Answer 1

Call chart.addSeries to add an entire series at a time instead of adding only an array of points to the initial empty series:

 function requestData() { $.ajax({ url: 'api/v1/dashboard/month_mention_graphic', type: "GET", dataType: "json", data : {username : "demo"}, success: function(data) { chart.addSeries({ name: "mentions", data: data.month_mentions_graphic }); }, cache: false }); }