javascript - Auto Update Highcharts with Ajax - Stack Overflow

admin管理员组

文章数量:1386701

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.

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.

• javascript
• jquery
• ajax
• highcharts

Share Improve this question Follow edited Feb 4, 2014 at 19:37 ohmu 19.8k4444 gold badges113113 silver badges149149 bronze badges asked Feb 4, 2014 at 18:56 GlowGlow 4111 gold badge22 silver badges1010 bronze badges 5

• Possible dup: stackoverflow./questions/12223972/… – Hackerman Commented Feb 4, 2014 at 18:58
• you can check this out for reference jsfiddle/4c2Qy – rockStar Commented Feb 4, 2014 at 19:01
• When attempting to use the above URL i get this error "Uncaught TypeError: Object #<Object> has no method 'setData'" in the console log for every other ajax call. – Glow Commented Feb 4, 2014 at 19:06
• @rockStar also tried this, i was unable to find a fix from this code either. – Glow Commented Feb 4, 2014 at 19:06
• So all works properly, am I right? – Sebastian Bochan Commented Feb 5, 2014 at 10:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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

本文标签： javascriptAuto Update Highcharts with AjaxStack Overflow