CODEWITHSUNDEEP
javascripthighcharts
jeremycollins
jeremycollins

Reputation: 379

Highslide JS > Highchart - how do I modify?

How do I make this example http://www.highcharts.com/demo/?example=spline-plot-bands&theme=default, live, updating every second, just like in this example http://www.highcharts.com/demo/?example=dynamic-update&theme=default.

That first example, spline with plot bands, is exactly what I'm after; 2 plot graphs with an option to hide or show one or the other.. The only thing that's missing is making them live and updating every second like in the other example.

How could I possibly achieve it?

Thank you!

Upvotes: 1

Views: 1863

Answers (1)

mu is too short
mu is too short

Reputation: 434665

The live updating in the second one is done by adding a timer to the load event inside the chart

chart: {
    //...
    events: {
        load: function() {
            // set up the updating of the chart each second
            var series = this.series[0];
            setInterval(function() {
                var x = (new Date()).getTime(), // current time
                    y = Math.random();
                series.addPoint([x, y], true, true);
            }, 1000);
        }
    }
    //...
}

So, when the chart has finished loading, setInterval is called and that calls the provided function every 1000 milliseconds (i.e. every second); the callback for setInterval simply adds a new point via series.addPoint.

All you need to do is add a load event handler that sets up an appropriate setInterval call to add your new points. In a more realistic case you'd use setTimeout to launch an AJAX call to get more data, then in the AJAX's success callback, you'd add the new points and call setTimeout again to arrange for another AJAX call to be made after another second (or whatever time interval works in your application).

The Highcharts documentation looks fairly comprehensive and each example (of which there are many) has a convenient "view options" button for seeing the code so setting things up should be fairly straight forward with a bit of study.

Upvotes: 2

Related Questions