Highstock mysql json multiple data

Question

i'm having trouble trying to pass multiple data to a Highstock chart via Json, here's my code so far:

    $(function() {
    var seriesOptions = [],
        yAxisOptions = [],
        seriesCounter = 0,
        names = ['MSFT', 'AAPL'],
        colors = Highcharts.getOptions().colors;

    $.each(names, function(i, name) {

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

            seriesOptions[i] = {
                name: name,
                data: data
            };

            // As we're loading the data asynchronously, we don't know what order it will arrive. So
            // we keep a counter and create the chart when all the data is loaded.
            seriesCounter++;

            if (seriesCounter == names.length) {
                createChart();
            }
        });

    });



    // create the chart when all data is loaded
    function createChart() {

        chart = new Highcharts.StockChart({
            chart: {
                renderTo: 'container'
            },

            rangeSelector: {
                selected: 4
            },

            yAxis: {
                labels: {
                    formatter: function() {
                        return (this.value > 0 ? '+' : '') + this.value + '%';
                    }
                },
                plotLines: [{
                    value: 0,
                    width: 2,
                    color: 'silver'
                }]
            },

            plotOptions: {
                series: {
                    compare: 'percent'
                }
            },

            tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                valueDecimals: 2
            },

            series: seriesOptions

        });
    }
});

And this is my data.php file:

$query = "SELECT tiempo,Fp1Ref,F7Ref
            FROM GraficaEEG limit 10";
    $data = mysqli_query($dbc, $query);
    $i=0;
    while($row = mysqli_fetch_array($data)) {

        $rows[$i]=array((float)$row['tiempo'],(float)$row['Fp1Ref']); 
        $rows1[$i]=array((float)$row['tiempo'],(float)$row['F7Ref']); 


        $i++;
    }

    echo json_encode($rows), "\n";
    echo json_encode($rows1);

And im receiving the data in this form:

[[0,3001],[0.005,4937.22],[0.01,4130.55],[0.015,4213.15],[0.02,4010.61],[0.025,3914.34],[0.03,3785.33],[0.035,3666.13],[0.04,3555.25],[0.045,3447.77]]

[[0,2995.12],[0.005,4931.59],[0.01,4125.99],[0.015,4203.38],[0.02,4005.27],[0.025,3911.41],[0.03,3777.35],[0.035,3659.15],[0.04,3552.75],[0.045,3442.12]]

I don't know what I'm doing wrong and how to pass two set of data to a Highstock chart, if I pass just a single $rows it works, but it gives me the same data in the three lines, I'll will be very grateful for any help.

Answer 1

Instead of loading the data asynchronously, I simply dump the variable holding the final data string into the Javascript.

For example,

chart = new Highcharts.StockChart({
          chart: { renderTo: 'container' },

          ...all those chart options...

          series: <?php echo $formattedDataString; ?>

        });

So then when Highcharts loads, all the data is already in place. This assumes, of course, that the data is in the proper format, as Hardik mentioned.
And if you need to update the data dynamically then you can still make AJAX calls and .update() the chart.

Answer 2

There are 3 ways to pass data to Highstock.

1. A list of numerical values. e.g. data: [0, 5, 3, 5]

2. A list of arrays with two values e.g. data: [[5, 2], [6, 3], [8, 2]]

3. A list of object with named values.

e.g.

data: [{
    name: 'Point 1',
    color: '#00FF00',
    y: 0
}, {
    name: 'Point 2',
    color: '#FF00FF',
    y: 5
}]

You can create Json object for each row and store them in a Json array. Then pass Json array using named attribute also called key in another Json object which will hold multiple Json arrays and each array having different key.

In returned Response, retrieve each array using its Key.

Check documentation for more details: http://api.highcharts.com/highstock#series.data

I have never worked on PHP So, I can not help direct but hope this would be helpful.