highstock -- navigator time range does not update after adding/removing series

Question

I use highstock to plot series with different time ranges, but the navigator's time range did not get updated correctly after adding/removing series. The code is shared in http://jsfiddle.net/QssUu/1/

$(function() {

$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data2) {
    // Create the chart
    window.chart = new Highcharts.StockChart({
        chart : {
            renderTo : 'container'
        },

        rangeSelector : {
            selected : 5
        },

        title : {
            text : 'AAPL Stock Price'
        },

        series : [{
            name : 'AAPL',
            data : data2,
            tooltip: {
                valueDecimals: 2
            }
        }]
    },function(chart){


        var newSeries = {
            name : 'new',
            data : [[1010112000000,55],[1136246400000,60.10],[1138752000000,65.03],[1204502400000,70.41],[1257120000000,75.47],[1349049600000,80.59]]
        };

        $('#btn1').click(function(){
            chart.addSeries(newSeries); //add new serie
        });

        $('#btn2').click(function(){
            chart.series[0].remove(); //remove serie from chart
        });            
    });
});

The following is the list of steps that I did:

1. Create a series 1 in the chart, with chart rangeSelector set to "all".
2. Click "add series 2" to create a series 2 in the chart. I expect to see the navigator time range to be updated to cover both series 1 and 2 (starts from Dec 31, 2001). But it still only includes series 1.
3. Click "remove series 1" to remove series 1 from the chart. I expect to see the navigator to be updated to only include series 2's time range, but it still includes series 1's time range.

Can anybody show me how to update navigator's time range after adding/removing series? It would be nice if the rangeSelector's "from" and "to" can also be updated accordingly. Please note that in my application I will use more than 2 series and add/remove any series at any time. So the solution should work for more than 2 series.

Thanks in advance!

Alex

Answer 1

Here is a jsfiddle http://jsfiddle.net/A8kY9/

So add id to navigator

navigator: {
    enabled: true,
    series: {
            id: 'navigator'
    }
},

and

            var nav = chart.get('navigator');
            nav.setData(newSeries.data);
            chart.xAxis[0].setExtremes();

Hope that is clearer Patrick

Answer 2

After clicking addSeries, you can use setExtremes() and set your custom range.