CODEWITHSUNDEEP
javascripthighcharts
Amir
Amir

Reputation: 21

How to update Highcharts data dynamically over a period of time

I want to use Highcharts graph and update y axis dynamically. Actually I want to update nsw, Tas, ACT every 5 sec. How do I do it ?

Here is my code.

$(function () {
$('#container').highcharts({
                    title: {
                        text: 'Histogram',
                        x: -20 // center
                    },
                    subtitle: {
                        text: 'Source: www.trove.com',
                        x: -20
                    },
                    xAxis: {
                        categories: ['NSW', 'Tas', 'ACT','QLD','VIC','SA','WA']
                    },
                    yAxis: {
                        title: {
                            text: 'Hits'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        valueSuffix: '°C'
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle',
                        borderWidth: 0
                    },
                    series: [{
                        name: 'States',
                        data: [nsw, Tas, ACT,qld,vic,sa,wa]
                    }]
                });
            });

            });

Upvotes: 1

Views: 3685

Answers (3)

Paweł Fus
Paweł Fus

Reputation: 45079

Use:

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(),
                l = series.data.length;

            for(var i  = 0; i < l; i++) {
                series.data[i].update({ 
                  y: getHits(i) // or something else
                });
            }
        }, 5000); // 5 seconds
    }
}

Where index is index (count from 0) of nsw/Tas/ACT in data array. (for nsw = 0, for Tas = 1 etc.)

Upvotes: 0

Sentencio
Sentencio

Reputation: 230

In the Documentation you can find an example from Highcharts in jsfiddle. Check it out http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/dynamic-update/. In the example every second a new point will be added. Here comes the relevant code part: 

chart: {
    type: 'spline',
    animation: Highcharts.svg, // don't animate in old IE
    marginRight: 10,
    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);
        }
    }
},
`

Upvotes: 1

Deblaton Jean-Philippe
Deblaton Jean-Philippe

Reputation: 11388

The easiest way to do it would be to use the javascript function "setInterval()" to call it.

Here is a link where you can find a way to do it :

http://www.w3schools.com/js/js_timing.asp

If you are not really good at javascript, you might need this declaration of functions : var functionName = function() {} vs function functionName() {}

Upvotes: 0

Related Questions