Highcharts Ajax无法正常工作

Question

I'm finding the highcharts a mind field to get working outside of the demo examples. When looking at stackoverflow there are tonnes of examples done in so many different ways for many different situations.

I've tried to take bits and pieces of the code to get it working but to no avail.

I am trying to load a chart to reload and update the chart every few seconds. I got the ajax call to work, the data to feed through and called every few seconds. But I can't figure out a way for highcharts to take the data and build the chart.

This is the data sent back from ajax, which is a Multi Series result

[{"name":"One","data":[[1433203200000,0],[1433289600000,0],[1433376000000,0],[1433462400000,0],[1433548800000
,0],[1433635200000,31.48],[1433721600000,0]]},{"name":"Two","data":[[1433203200000,0],[1433289600000
,0],[1433376000000,0],[1433462400000,0],[1433548800000,0],[1433635200000,0],[1433721600000,0]]}]

This is the highchart code, what am I doing wrong?

chart = new Highcharts.Chart({
    chart: {
        renderTo: 'final',
        defaultSeriesType: 'spline',
        events: {
            load: function()
            {
              setTimeout(function(){
                 $.ajax({
                    url: 'test',
                    type: 'GET',
                    async: true,
                    dataType: "json",
                    success: function (data) {
                      console.log(data);
                      chart.setData(data,true);
                        //chart.setData(data,true);
                    }
                  });
              }, 10000);                  
            }
        }
    },
    title: {
        text: 'Live random data'
    },
    xAxis: {
        type: 'datetime',
        tickPixelInterval: 150,
        maxZoom: 20 * 1000
    },
    yAxis: {
        minPadding: 0.2,
        maxPadding: 0.2,
        title: {
            text: 'Value',
            margin: 80
        }
    },
    series: []
});

Answer 1

Two things:

1) setTimeout is called only once. You probably want to use setInterval.

2) There's no such method like chart.setData(). There is series.setData(). Open demo and check out how it's used. In your case callback should look that way:

        load: function() {
          var myChart = this;
          setInterval(function() {
             $.ajax({
                url: 'test',
                type: 'GET',
                async: true,
                dataType: "json",
                success: function (data) {
                  $.each(data, function(i, d) {
                      if(myChart.series[i]) {
                          myChart.series[i].setData(d.data,false, false);
                      } else { // series doesn't exist
                          myChart.addSeries(d, false);
                      }
                  });
                  myChart.redraw(true);
                }
              });
          }, 1000);                  
        }