Question

My target: I want to draw HighStock-chart with multiple series. Data is loaded by AJAX from data.php. The output of data.php is an JSON-Array

My problem: I don’t know hot to grab the data from JSON Array

The output is e.g

[[timestamp,value1,value2],[timestamp,value1,value2]]

Series 1 should be -> timestamp and value1

Series 2 should be -> timestamp and value2

This is my code

// Draw the chart
$(function(){

        /* The chart is drawn by getting the specific data from "data.php".
         * The configuration settings are transmitted by GET-Method. The output is an JSON-Array.  */

        $.getJSON('data.php',
        function(data) {


        chart = new Highcharts.StockChart
        ({
        chart:  {  renderTo: 'chartcontainer', type: 'line'  },
        title:  { text: 'You see the data of the last hour!' },
        xAxis: {  type: 'datetime', title: { text: 'time'  } },
        yAxis: { title: { text: 'unit'  } },
        series: [{ name: 'series1', data: data },{ name: 'series2', data: data }],

        });
    });
});

I think i have to change

series: [{ name: 'series1', data: data },{ name: 'series2', data: data }],

But I dont know in to what

Answer 1

Iterate through all items of the data array, and populate two separate arrays:

var series1 = [];
var series2 = [];
for (var i = 0; i < data.length; i++) {
  series1.push([data[0], data[1]);
  series1.push([data[0], data[2]);
}

You then have the timestamp-value pairs in each of the series arrays.

Doing this in php might be more efficient, especially if you can replace the current json creation.