Multiple series highstock live chart

Question

I already have a realtime live graph with one series working. Just like this tutorial.

This is my js code

<script>
var chart;
function requestData() {
    $.ajax({
        url: 'live-server-data.php',
        success: function(point) {
            var series = chart.series[0],
                shift = series.data.length > 20;
            chart.series[0].addPoint(point, true, shift);
            setTimeout(requestData, 1000);    
        },
        cache: false
    });
}
</script>

And this is the JSON passed by live-server-data.php

[1430687116000,994]

How do I make the js script graph more than one series? My guess is iterate the JSON array passed and add the points for each series, but don't know how to implement that on js, jquery, ajax or whatever it is i have to use.

Answer 1

You need two things:

1) Your server should return more info in that request, for example:

[ [1430687116000, 994], [1430687116000, 5], ... , [1430687116000, 11] ]

Or better format to provide timestamps just once:

{
    "timestamp": 1430687116000,
    "points": [ 994, 5, ... , 11 ]
}

2) Now just update all of the series:

$.ajax({
    url: 'live-server-data.php',
    success: function(points) {
        var series = chart.series,
            shift;

        $.each(series, function(i, s) {
            shift = s.data.length > 20;
            s.addPoint(points[i], false, shift);
        });
        setTimeout(requestData, 1000);   
        chart.redraw(); 
    },
    cache: false
});

Or with a second format for JSON it would be:

$.ajax({
    url: 'live-server-data.php',
    success: function(points) {
        var series = chart.series,
            shift;

        $.each(series, function(i, s) {
            shift = s.data.length > 20;
            s.addPoint([points.timestamp, points.data[i]], false, shift);
        });
        setTimeout(requestData, 1000);   
        chart.redraw(); 
    },
    cache: false
});