Auto Update Highcharts with Ajax

Question

Hopefully somebody can be of help to me here.

I\'m trying to update a graph with information from ajax, I\'ve already confirmed that the ajax is of the correct forma

Answer 1

Have you tried,

 events: {
      load: function() {

    // set up the updating of the chart each second
    var series = this.series[0];
    setInterval(function(){
    var chart = new Highcharts.Chart(options);
    $.getJSON('http://url-to-json-file/index.php', function(jsondata) {
        options.series[0].data = JSON.parse(jsondata.cpu);
    });
    }, 5000);
   }              
}

Then your chart data would be,

var options = {
    chart: {
        renderTo: 'cpuhealth',
        type: 'column'
    },
    title: {
        text: 'CPU Usage'
    },
    events: {
          load: function() {

        // set up the updating of the chart each second
        var series = this.series[0];
        setInterval(function(){
        var chart = new Highcharts.Chart(options);
        $.getJSON('http://url-to-json-file/index.php', function(jsondata) {
            options.series[0].data = JSON.parse(jsondata.cpu);
        });
        }, 5000);
       }              
    },
    yAxis: {
        labels: {
            formatter: function() {
                return this.value + ' %';
            }
        },
        title: {
            text: 'Usage (%)'
        }
    },
    xAxis: {
        title: {
            text: 'CPU Core ID#'
        }
    },
    tooltip: {
        formatter: function() {
            return 'CPU Core: <b>' + this.x + '</b><br>Usage <b>' + this.y + '%</b>';
        }
    },
    legend: {
        enabled: false
    },
    series: [{}]
};