Highcharts - remove points from series

Question

Is it possible to remove certain points from a series? I'm looking for some way to draw a chart with a fixed back period, something like: the last 1 hour.

I know how to add points using dynamic update:

http://www.highcharts.com/demo/dynamic-update

But in my case the time interval between points is not constant, so I can't just use the shift option of addPoint.

Thanks, Omer

Answer 1

If you want to have the same, you can use the same logic as in addPoint, see: http://jsfiddle.net/JKCLx/1/

However, why can't you just use shift argument in addPoint()?

Answer 2

I think I found a partial answer to my own question:

I can iterate over the series datapoints like this:

http://api.highcharts.com/highcharts#Series.data

and then call point.Remove.

The problem with this solution is that it does not draw monitor style like in the example, but rather it redrwas the entire chart on each change.

http://jsfiddle.net/JKCLx/

$(function () {
    $(document).ready(function() {
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });

        var chart;
        $('#container').highcharts({
            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, false);                           
                           // series.data[0].remove(false);
                            series.data[0].remove(true);
                        }, 1000);
                    }
                }
            },
            title: {
                text: 'Live random data'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150
            },
            yAxis: {
                title: {
                    text: 'Value'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
                        Highcharts.numberFormat(this.y, 2);
                }
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            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;
                })()
            }]
        });
    });

});