Multiple Dynamic Highcharts On One Page With Json

I'm looking for a solution using json in order to retreive values out of my database and display them in seperate line charts. Not only the values are dynamic, but the titles are d

Solution 1:

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 = newHighcharts.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 = newHighcharts.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.