jquery - Highstock - Minimal Zoom

Question

How can you set in Highstock a minimal zoom (36 Months) for Navigator? i have tried this but it doesnt work do you have a idea?

http://jsfiddle.net/B7vCR/6/

$(function() {

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

            rangeSelector: {
                selected: 1
            },

            title: {
                text: 'AAPL Stock Price'
            },
            xAxis: {
                minRange:6 * 30 * 24 * 3600 * 1000,
                events: {
                    afterSetExtremes: function(e) {
                        var maxDistance = 10 * 30 * 24 * 3600 * 1000; //8 months time
                        var xaxis = this;
                        if ((e.max - e.min) < maxDistance) {
                            var min = e.max - maxDistance;
                            var max = e.max;
                            window.setTimeout(function() {
                                xaxis.setExtremes(min, max);
                            }, 1);
                        }
                    }
                }
            },
            series: [{
                name: 'AAPL',
                data: data,
                tooltip: {
                    valueDecimals: 2
                }}]
        });
    });

});

Answer 1

You need to configure buttons if you want the range selector

xAxis: {
    events: {
        afterSetExtremes: function(e) {
            var minDistance = 36 * 30 * 24 * 3600 * 1000; //36 months time
            var xaxis = this;
            if ((e.max - e.min) < minDistance) {
                var min = e.max - minDistance;
                var max = e.max;
                window.setTimeout(function() {
                    xaxis.setExtremes(min, max);
                }, 1);
            }
        }
    }
}
rangeSelector: {
    selected : 1,
    buttons: [{
        type: 'month',
        count: 36,
        text: '36m'
    }, {
        type: 'month',
        count: 42,
        text: '42m'
    }, {
        type: 'month',
        count: 48,
        text: '48m'
    }, {
        type: 'month',
        count: 54,
        text: '54m'
    }, {
        type: 'all',
        text: 'All'
    }]
}

working jsFiddle: http://jsfiddle.net/Zd5Cn/