Jugal | Zoom using external button | Highchart & Highstock

http://stackoverflow.com/questions/12005711/highcharts-zoom-issue-after-changing-series-data/12006568#12006568 Jugal Thakkar http://jugal.me/

by Nick Hulea

HTML

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js" ></script>
<script type="text/javascript" src="http://code.jugal.me/js/jugalsLib.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/highstock.src.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/modules/exporting.src.js" ></script>

<div id="container"></div>


<input id="chg" type="button" value="change" />

CSS

#container{
    min-width:500px;
}

JavaScript

var dateStartZoom, dateEndZoom;
var isChartZoomed = false;
var chart;
var variousSeries = [jugalsLib.createSeries({
    sampleCount: 20
}), jugalsLib.createSeries({
    sampleCount: 40
})];

var currentSeries = 0;

function onChartZoom(startDt, endDt) {
    // Retaining zoom values
    dateStartZoom = startDt;
    dateEndZoom = endDt;
    isChartZoomed = true;
}

var chartOptions = {
    chart: {
        renderTo: 'container',
        zoomType: 'x',
        events: {
            selection: function(event) {
                if (event.resetSelection) {

                } else {
                    try {
                        var startDt = null,
                            endDt = null;

                        if (event.xAxis[0]) {
                            startDt = event.xAxis[0].min;
                            endDt = event.xAxis[0].max;
                        }
                        onChartZoom(startDt, endDt);
                    }
                    catch (e) {
                        alert(e);
                    }
                }
            }
        }
    },
    xAxis: [
        {
        type: 'datetime',
        maxZoom: 3600000 // 1 hour
        }
    ],
    series: [
        variousSeries[currentSeries]
        ]
};


chartOptions = $.extend({}, jugalsLib.getBasicChartOptions(0), chartOptions);

function renderChart() {
    currentSeries = 1 - currentSeries;
    chartOptions.series[0] = variousSeries[currentSeries];
    chart = new Highcharts.Chart(chartOptions);

    // restore zoom state if exist
    if (isChartZoomed === true) {
        chart.xAxis[0].setExtremes(dateStartZoom, dateEndZoom);
        chart.showResetZoom();
    }
}

$('#chg').live('click', function() {
    //   chartOptions.series[0] = series2;
    renderChart();
});

// SHOW CHART
$(document).ready(function() {
    renderChart();
});