jQuery/AJAX data loading & replacement in Highcharts

Question

I have this kind of chart in a dashboard-sort-of page (there's going to be a few more but let's keep this to the simplest one for now). (this is derived from HC documentation).

https://jsfiddle.net/_dario/ako8wg0c/16

so first I define a config object for Highcharts with a null series; separating the config from the data seems a logical way to proceed, because I plan to replace the data (and redraw the charts) along the way with more AJAX calls.

var config = {
  chart: {
    height:150,
    type: 'bar'
},
title: {
    text: null
},
xAxis: {
    categories: ['Sources']
},
yAxis: {
    min: 0,
    title: {
      text: 'Posts'
  }
},
legend: {
    enabled:false
},
plotOptions: {
    series: {
      stacking: 'normal'
  }
},
series: null
};

then I load my data with AJAX with a POST request to a backend script, add the series data to the config object and finally create a new Highcharts chart

$.ajax({
    method:'POST',
    url:'ajax/loadmydata.php',
    data:window.query_vars,
    dataType:'JSON',
    success:function(d){
        console.log(d.platform);
        config.series = d.platform;
        var sourcesChart = new Highcharts.chart('sources-chart', config);
    }
});

The raw output from the AJAX call is something like this (formatted for clarity)

{
  "platform": [
    {
      "name": "Instagram",
      "data": 14133
    },
    {
      "name": "Twitter",
      "data": 4312
    },
    {
      "name": "Facebook",
      "data": 3685
    },
    {
      "name": "Blog",
      "data": 482
    },
    {
      "name": "Forums",
      "data": 671
    },
    {
      "name": "News",
      "data": 545
    }
  ]
}

but, when testing this lot, Highchart leaves an almost-empty chart, with the axes drawn but no data. With the console, I can confirm that the config object indeed contains the series data; any clue? Am I missing something in the data format?

ewolden ewolden · Accepted Answer · 2018-07-18T14:44:56

If you look at your JSON and the JSON in the fiddle you linked, there is one main difference. Your data values are not wrapped in brackets. Highcharts.series.data is an array, and therefore it needs to be wrapped in brackets, even if it is just one number.

Changing your JSON to this, means it works:

{
  "platform": [
    {
      "name": "Instagram",
      "data": [14133]
    },
    {
      "name": "Twitter",
      "data": [4312]
    },
    {
      "name": "Facebook",
      "data": [3685]
    },
    {
      "name": "Blog",
      "data": [482]
    },
    {
      "name": "Forums",
      "data": [671]
    },
    {
      "name": "News",
      "data": [545]
    }
  ]
}

var config = {
  chart: {
    height:150,
    type: 'bar'
},
title: {
    text: null
},
xAxis: {
    categories: ['Sources']
},
yAxis: {
    min: 0,
    title: {
      text: 'Posts'
  }
},
legend: {
    enabled:false
},
plotOptions: {
    series: {
      stacking: 'normal'
  }
},
series: []
};

d = {
  "platform": [
    {
      "name": "Instagram",
      "data": [14133]
    },
    {
      "name": "Twitter",
      "data": [4312]
    },
    {
      "name": "Facebook",
      "data": [3685]
    },
    {
      "name": "Blog",
      "data": [482]
    },
    {
      "name": "Forums",
      "data": [671]
    },
    {
      "name": "News",
      "data": [545]
    }
  ]
}

config.series = d.platform;
var sourcesChart = new Highcharts.chart('sources-chart', config);

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="sources-chart"></div>

JSFiddle example: https://jsfiddle.net/ewolden/8ckxe2qw/

jQuery/AJAX data loading & replacement in Highcharts

1 Answers