javascript - 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 format etc and the initial graph load works perfectly but it doesn't seem to update correctly.

My code:

$(document).ready(function() {

    var options = {
        chart: {
            renderTo: 'cpuhealth',
            type: 'column'
        },
        title: {
            text: 'CPU Usage'
        },
        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: [{}]
    };


    var chart;
    $.getJSON('http://url-to-json-file/index.php', function(jsondata) {
        options.series[0].data = JSON.parse(jsondata.cpu);
        chart = new Highcharts.Chart(options);
    });

    window.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);
});

The JSON is being pulled fine but it just isn't updating the chart every 5 seconds :(

Any help would be greatly appreciated, I'm abit of a novice with JS.

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: [{}]
};