HighCharts Bug with LiveChart

Question

I have a big problem with HighCharts, HighStock and live data / live chart.

Please check :

and try to remove the 1st of series (Random Data). The chart will stop updating. If you reselect the 1st of the series it will continue updating with all values.

Is it possible to somehow overcome this or is a bug with HighCharts/HighStock?

Thanks

HTML Code:

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 500px; min-width: 500px"></div>

Javascript Code:

$(function() {

    Highcharts.setOptions({
        global : {
            useUTC : false
        }
    });

    // Create the chart
    window.chart = new Highcharts.StockChart({
        chart : {
            renderTo : 'container',
            events : {
                load : function() {

                    // set up the updating of the chart each second
                    var series = this.series[0];
                    var series1 = this.series[1];
                    var chart = this;
                    setInterval(function() {
                        var x = (new Date()).getTime(), // current time
                        y = Math.round(Math.random() * 100);
                        y1 = Math.round(Math.random() * 100);
                        series.addPoint([x, y], false, true);
                        series1.addPoint([x, y1], false, true);
                        chart.redraw();
                    }, 1000);
                }
            }
        },

        rangeSelector: {
            buttons: [{
                count: 1,
                type: 'minute',
                text: '1M'
            }, {
                count: 5,
                type: 'minute',
                text: '5M'
            }, {
                type: 'all',
                text: 'All'
            }],
            inputEnabled: false,
            selected: 0
        },

        title : {
            text : 'Live random data'
        },
        legend: {
                align: 'right',
                layout: 'vertical',
                verticalAlign: 'top',
                y: 45,
                enabled: 'true'
            },

        exporting: {
            enabled: false
        },

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

                for( i = -999; i <= 0; i++) {
                    data.push([
                        time + i * 1000,
                        Math.round(Math.random() * 100)
                    ]);
                }
                return data;
            })()
        },{
            name : 'Random data2',
            data : (function() {
                // generate an array of random data
                var data = [], time = (new Date()).getTime(), i;

                for( i = -999; i <= 0; i++) {
                    data.push([
                        time + i * 1000,
                        Math.round(Math.random() * 100)
                    ]);
                }
                return data;
            })()
        }]
    });

});

Jugal Thakkar Jugal Thakkar · Accepted Answer · 2012-11-03T15:19:23

Looks like highcharts handles the 1st series a little differently. A workaround can be explicitly setting extreme of the xAxis using highstock#Axis.setExtremes() as follows

var xAxis=chart.xAxis[0];
xAxis.setExtremes(xAxis.min,x,true,false); // Set extreme and redraw !

Hiding 1st series on live chart | Highchart & Highstock

HighCharts Bug with LiveChart

1 Answers