Highcharts - Dyanmic graph with no initial data

Question

If you open this JSFiddle with the dynamic spline update it loads the series with 20 points before it starts updating every second.

Example

I don't want to display any initial data and let the interval add the points as they come in.

So I change:

series: [{
            name: 'Random data',
            data: (function() {
                // generate an array of random data
                var data = [],
                    time = (new Date()).getTime(),
                    i;

                for (i = -19; i <= 0; i++) {
                    data.push({
                        x: time + i * 1000,
                        y: Math.random()
                    });
                }
                return data;
            })()
        }]

to

series: [{
            name: 'Random data',
            data: []
        }]

But it doesnt add the points. Is there something I am missing?

Answer 1

Change your load function so that the shift parameter doesn't apply before you've added your 20 values, see this jsfiddle

load: function() {

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

Answer 2

The third parameter of addPoint is set if you what to shift a point after add this one.

So, what is happening ? You're adding a point and then removing it.

Change:

series.addPoint([x, y], true, true);

To:

series.addPoint([x, y], true);

Demo

Reference

• http://api.highcharts.com/highstock#Series.addPoint()