scrollbar with dynamic added series

[fermo111]

What I am trying to do is having a chart with an horizontal scrollbar and being able to add or replace series.
I included highstock.js and defined scrollbar.enabled = true xAxis.min = <something>. The scrollbar works with the series defined at creation time.

Then I substitute the series with a new one. The scrollbar is still there but when I click on it I get the following error "baseSeries.xAxis is undefined".

Looking at the code, it appears that 'baseSeries' is defined once at the chart creation time and then it is not updated when new series are created

Thanks

[Fusher]

Can You share with Your example?
I've made something like this:
http://jsfiddle.net/Fusher/8kv98/
and there's no errors.

[fermo111]

Can You share with Your example?

Sorry for the delay.

Here is the example. I have taken your code and made the following changes:

1) chart = new Highcharts.Chart
( instead of chart = new Highcharts.StockChart )

2) added

Code: Select all

scrollbar: {
   enabled: true
},
xAxis: {
    min: 1255475600000
},

to the chart config object

3) modified the click event handler

When you run this code and click on the button you get the error.

Code: Select all

var seriesOptions = [], seriesOptions2 = [],
        yAxisOptions = [],
        seriesCounter = 0,
        names = ['MSFT'],
        names2 = ['GOOG'],
        colors = Highcharts.getOptions().colors;

    $.each(names, function(i, name) {

        $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?',    function(data) {

            seriesOptions[i] = {
                name: name,
                data: data
            };

            // As we're loading the data asynchronously, we don't know what order it will arrive. So
            // we keep a counter and create the chart when all the data is loaded.
            seriesCounter++;

            if (seriesCounter == names.length) {
                createChart();
            }
        });
    });

$.each(names2, function(i, name) {

        $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?',    function(data) {

            seriesOptions2[i] = {
                name: name,
                data: data
            };
    console.log(seriesOptions2);
            // As we're loading the data asynchronously, we don't know what order it will arrive. So
            // we keep a counter and create the chart when all the data is loaded.
           // seriesCounter++;

           // if (seriesCounter == names.length) {
           //     createChart();
           // }
        });
    });
$('#btn').click(function() {
     //chart.series[0].setData(seriesOptions2[0].data,true);
    chart.series[0].setData(seriesOptions2[0].data,true);
    chart.series[0].chart.addSeries({data:seriesOptions2[0].data}, false);
    chart.series[0].remove();
});

    // create the chart when all data is loaded
    function createChart() {

        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container'
            },

            rangeSelector: {
                selected: 4
            },
scrollbar: {
                    enabled: true
                },
            xAxis: {
                min: 1255475600000
            },
            yAxis: {
                labels: {
                    formatter: function() {
                        return (this.value > 0 ? '+' : '') + this.value + '%';
                    }
                },
                plotLines: [{
                    value: 0,
                    width: 2,
                    color: 'silver'
                }]
            },
           
            plotOptions: {
                series: {
                    compare: 'percent'
                }
            },
           
            tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                yDecimals: 2
            },
           
            series: seriesOptions
        });
    }


[Fusher]

Well, it's look similar to this issue: https://github.com/highslide-software/h ... issues/716 -try this solution with manually removed series.

[hfrntt]

Well it's caused by scrollbar, the simplest workaround is to use setData instead of removing series. Anyway I reported an issue here: https://github.com/highslide-software/h ... issues/781

Here you can find a simplified demo: http://jsfiddle.net/9M44d/