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

since 1.3.6 the minRange property does not work anymore for the navigator. (in 1.3.5 it worked). I would suggest you to disable the live redraw to avoid the "jumping" of the navigator.

    scrollbar: {
        enabled: true,
        liveRedraw: false
    },

If you do not want to disable it you have to call xAxis.setExtremes twice (add it to the line before window.setTimeout)

        xAxis: {
            type: 'datetime',
            minRange: 36 * 30 * 24 * 3600 * 1000,
            events: {
                afterSetExtremes: function (e) {
                    var extremes, xAxis;

                    if (e.trigger === 'navigator') {
                        extremes = getDateExtremes(e.min, e.max, e.dataMax);
                        xAxis = this;
                        window.setTimeout(function () {
                            xAxis.setExtremes(extremes.min, extrems.max);                               
                        }, 1);
                    }
                }
            },

Here are the helper methods we use.

function padNumber(n) {
    return n <= 9 ? '0' + n : n;
}


function getDateExtremes(begin, end, max) {
    var minDistance = 36 * 30 * 24 * 3600 * 1000,
        curMin, curMax, curMinDate, curMaxDate;

    if ((end - begin) < minDistance) {
        if ((begin + minDistance) <= max) {
            curMin = begin;
            curMax = begin + minDistance;
        } else {
            curMin = end - minDistance;
            curMax = end;
        }
    } else {
        curMin = begin;
        curMax = end;
    }

    curMinDate = new Date(curMin);
    curMaxDate = new Date(curMax);

    return {
        min: curMin,
        max: curMax,
        minDateId: curMinDate.getFullYear() + '-' + padNumber(curMinDate.getMonth() + 1) + '-' + padNumber(curMinDate.getDate()),
        maxDateId: curMaxDate.getFullYear() + '-' + padNumber(curMaxDate.getMonth() + 1) + '-' + padNumber(curMaxDate.getDate())
    };
}

Hopefully it helps you.

Answer 2

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/