highcharts spline with multiple series update every few seconds

Question

I am trying to get a spline chart with 2 series that updates every few seconds. I have spent lots of time searching through various examples and I can get many different things to work but NOT this. I just cant seem to find an example that is exactly what I am trying to do out there.

I have the following json that is returned via ajax:

[{"name":"Test1","data":[[1415567095000,2117]]},{"name":"Test2","data":[[1415567095000,2414]]}]

Below is what I have for the chart definition. This is a slightly modified example that I found but I just cant figure out how to get this to work. I know that it should not be that complex and since I am new to javascript, I suspect it will be something simple that I just don't see. I know that I need to define multiple series and then perform addPoint with a shift but I cant seem to get it to work.

<script type="text/javascript">
$(document).ready(function() {

    var options = {
            chart: {
                renderTo: 'container',
                type: 'spline',
            },
            title: {
                text: 'Dynamic RPS'
            },
            subtitle: {
                text: 'US East'
            },
            xAxis: {
               type: 'datetime',
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'RPS '
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{}]
    };
setInterval(function() {

    $.getJSON('test.php', function(data) {
           options.series = data;
        var chart = new Highcharts.Chart(options);
    });
}, 20000);

});
</script>

Any help is greatly appreciated !!

Answer 1

Assuming your test.php will return a single new point on each call, I'd code it like this:

  var chart = null;
  function callAjax(){
    $.getJSON('test.php', function(data) {
      if (chart === null){ // first call, create the chart
        options.series = data;
        chart = new Highcharts.Chart(options);
      } else {
        var seriesOneNewPoint = data[0].data[0]; // subsequent calls, just get the point and add it
        var seriesTwoNewPoint = data[1].data[0];
        chart.series[0].addPoint(seriesOneNewPoint, false, false); // first false is don't redraw until both series are updated
        chart.series[1].addPoint(seriesTwoNewPoint, true, false); // second false is don't shift
      }
      setTimeout(callAjax, 20000);  // queue up next ajax call
    });
  }
  callAjax();

Here's an example. Note, it just draws the same point over and over again.