score:2

Accepted answer

I looked at your code and spotted some errors at the javascript part.

You define on options an series array. Later on you try to assign on index 0 of the series array an object with the attribute data which doesn't work since series is an empty array.

You also don't need for every single chart to make an request since the data seems to be the same for all other charts.

A possible approach could look like this:

var chart1,
    chart2;
// define all other charts here

// now, make only one request for the data        
$.getJSON('data.php', function(json){
  // and create the charts

  // chart 1
  options.chart.renderTo = 'pressure';
  options.title.text = 'Pressure (hPa)';
  options.yAxis.title.text = 'Pressure (hPa)';
  options.xAxis.categories = json[0]['data'];

  // push the data to the series
  options.series.push(json[1]);
  options.series.push(json[2]);
  // create the first chart
  chart1 = new Highcharts.Chart(options);

  // reset the series to prepare them for the next chart
  options.series = [];

  // chart 2
  options.chart.renderTo = 'altitude';
  options.title.text = 'Altitude (m)';
  options.yAxis.title.text = 'Altitude (m)';
  options.xAxis.categories = json[0]['data'];
  options.series.push(json[3]);
  options.series.push(json[4]);
  chart2 = new Highcharts.Chart(options);

  // and so on
});

Here's also an working example.

You'll need to populate the other charts, i created only the first two.


Related Articles