how to implement polling in below mentioned code.

2019-09-16 11:39发布

问题:

kindly help me to implement polling in below mentioned code.

    <!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


</head>
<body>

<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto">Time series Highchart</div>

<script>
$(document).ready(function() {

    var options = {
        chart: {
            renderTo: 'container',
            type: 'spline'   
        },
        series: [{}]
    };


    setInterval(function(){
        $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function(data) {
               options.series[0].data = data;
               var chart = new Highcharts.Chart(options);
        });
    }, 60000);

});
</script>
</body>
</html>

This is the code which is hitting the rest api and giving the data on highchart. I want to implement the code so that it will show the data on highchart after polling for atleast 60 sec.

回答1:

Right now, with this code, you create a new chart every 60 seconds. If you want only to update data on a chart, use Series.setData() or Series.update() instead.

chart.series[0].setData(data);

API Reference:
http://api.highcharts.com/highcharts/Series.update http://api.highcharts.com/highcharts/Series.setData

Example:
http://jsfiddle.net/1yfa9qkr/



回答2:

Use the setInterval function: $(document).ready(function() {

var options = {
    chart: {
        renderTo: 'container',
        type: 'spline'   
    },
    series: [{}]
};
var chart = new Highcharts.Chart(options);

setInterval(function(){
    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function(data) {
        chart.series[0].setData(data);
     });
 }, 60000);

Edit: added chart update.