rangeSelector: change date beyond zoomed time range

Question

I build a chart like the lazy loading example (http://www.highcharts.com/stock/demo/lazy-loading) but with having the input fields of the range selector. When I zoom in everything is fine. Now I would like to change the selected range by using the input fields. But I am not able to change the input to values beyond the zoomed area despite the fact I have more data visible in my navigator.

In the setExtremes function I am doing some calculations:

DX.IPFixGraphModule.prototype.setExtremes = function(e) {
var fromTime,
    maxZoom = 30 * 60 * 1000,
    now = new Date().getTime();
if (e.min) {
    fromTime = e.min;
} else {
    fromTime = e.dataMin;
}
fromTime = Math.round(fromTime);

var diff = now - fromTime;
// -1 month = max 1 week zoom
if (diff >= 2592000000) {
    maxZoom = 7 * 24 * 60 * 60 * 1000;
}
// -1 week = max 12 hour zoom 
else if (diff >= 604800000) {
    maxZoom = 12 * 60 * 60 * 1000;
}

// this refers to axis
// @see http://api.highcharts.com/highstock#Axis.update
this.update({
    minRange: maxZoom
}, false);  

};

But the values I receive in e.min and e.max are not the original input values but already corrected to the displayed time range.

// handle changes in the input boxes
    input.onchange = function () {
        var inputValue = input.value,
            value = (options.inputDateParser || Date.parse)(inputValue),
            xAxis = chart.xAxis[0],
            dataMin = xAxis.dataMin,
            dataMax = xAxis.dataMax;

        // If the value isn't parsed directly to a value by the browser's Date.parse method,
        // like YYYY-MM-DD in IE, try parsing it a different way
        if (isNaN(value)) {
            value = inputValue.split('-');
            value = Date.UTC(pInt(value[0]), pInt(value[1]) - 1, pInt(value[2]));
        }

        if (!isNaN(value)) {

            // Correct for timezone offset (#433)
            if (!defaultOptions.global.useUTC) {
                value = value + new Date().getTimezoneOffset() * 60 * 1000;
            }

            // Validate the extremes. If it goes beyound the data min or max, use the
            // actual data extreme (#2438).
            if (isMin) {
                if (value > rangeSelector.maxInput.HCTime) {
                    value = UNDEFINED;
                } else if (value < dataMin) {
                    value = dataMin;
                }
            } else {
                if (value < rangeSelector.minInput.HCTime) {
                    value = UNDEFINED;
                } else if (value > dataMax) {
                    value = dataMax;
                }
            }

            // Set the extremes
            if (value !== UNDEFINED) {
                chart.xAxis[0].setExtremes(
                    isMin ? value : xAxis.min,
                    isMin ? xAxis.max : value,
                    UNDEFINED,
                    UNDEFINED,
                    { trigger: 'rangeSelectorInput' }
                );
            }
        }
    };

(Code taken from highstock.src.js around line 21126)

So I cannot extend my zoom beyond the current active selection, but the navigator displays more data. Does anyone know a way to set a date beyond the currently zoomed time range?

Possible Solution

I solved it by checking the navigator range in the "afterSetExtremes" Event.

DX.IPFixGraphModule.prototype.afterSetExtremes = function(e) {
if (e.trigger === 'rangeSelectorInput') {
    var fromValue = this.stockchart.rangeSelector.minInput.value,
        toValue = this.stockchart.rangeSelector.maxInput.value,
        fromTime = parseDateTime(fromValue),
        toTime = parseDateTime(toValue),
        navigatorAxis = this.stockchart.get('navigator-x-axis'),
        maxValue = navigatorAxis.dataMax,
        minValue = navigatorAxis.dataMin;

    if (fromTime < minValue) {
        fromTime = minValue;
    }
    if (toTime > maxValue) {
        toTime = maxValue;
    }   
    this.stockchart.xAxis[0].setExtremes(fromTime, toTime);
} else {
    var fromTime,
        toTime;
    if (e.min) {
        fromTime = e.min;
    } else {
        fromTime = e.dataMin;
    }
    fromTime = Math.round(fromTime);

    if (e.max) {
        toTime = e.max;
    } else {
        toTime = e.dataMax;
    }
    toTime = Math.round(toTime);
    this.settings.afterSetExtremes({startTimestamp: fromTime, endTimestamp: toTime});
}
};

Or see solution below and override the method.

Answer 1

There is no default API for that. Extend Highcharts via overriding drawInput function (your second code snippet).

There is a part of code that you should comment out or remove - the if clause after:

// Validate the extremes. If it goes beyound the data min or max, use the

// actual data extreme (#2438).

Example: http://jsfiddle.net/epL7awo4/1/

$(function () {
    (function (H) {
        H.wrap(H.RangeSelector.prototype, 'drawInput', function (proceed) {
            var name = arguments[1],
                merge = H.merge,
                createElement = H.createElement,
                PREFIX = 'highcharts-',
                ABSOLUTE = 'absolute',
                PX = 'px',
                extend = H.extend,
                pInt = H.pInt,
                UNDEFINED;
            //drawInput: function (name) {
            var rangeSelector = this,
                chart = rangeSelector.chart,
                chartStyle = chart.renderer.style,
                renderer = chart.renderer,
                options = chart.options.rangeSelector,
                defaultOptions = H.getOptions(),
                lang = defaultOptions.lang,
                div = rangeSelector.div,
                isMin = name === 'min',
                input,
                label,
                dateBox,
                inputGroup = this.inputGroup;

            // Create the text label
            this[name + 'Label'] = label = renderer.label(lang[isMin ? 'rangeSelectorFrom' : 'rangeSelectorTo'], this.inputGroup.offset)
                .attr({
                padding: 2
            })
                .css(merge(chartStyle, options.labelStyle))
                .add(inputGroup);
            inputGroup.offset += label.width + 5;

            // Create an SVG label that shows updated date ranges and and records click events that 
            // bring in the HTML input.
            this[name + 'DateBox'] = dateBox = renderer.label('', inputGroup.offset)
                .attr({
                padding: 2,
                width: options.inputBoxWidth || 90,
                height: options.inputBoxHeight || 17,
                stroke: options.inputBoxBorderColor || 'silver',
                    'stroke-width': 1
            })
                .css(merge({
                textAlign: 'center',
                color: '#444'
            }, chartStyle, options.inputStyle))
                .on('click', function () {
                rangeSelector.showInput(name); // If it is already focused, the onfocus event doesn't fire (#3713)
                rangeSelector[name + 'Input'].focus();
            })
                .add(inputGroup);
            inputGroup.offset += dateBox.width + (isMin ? 10 : 0);


            // Create the HTML input element. This is rendered as 1x1 pixel then set to the right size 
            // when focused.
            this[name + 'Input'] = input = createElement('input', {
                name: name,
                className: PREFIX + 'range-selector',
                type: 'text'
            }, extend({
                position: ABSOLUTE,
                border: 0,
                width: '1px', // Chrome needs a pixel to see it
                height: '1px',
                padding: 0,
                textAlign: 'center',
                fontSize: chartStyle.fontSize,
                fontFamily: chartStyle.fontFamily,
                top: chart.plotTop + PX // prevent jump on focus in Firefox
            }, options.inputStyle), div);

            // Blow up the input box
            input.onfocus = function () {
                rangeSelector.showInput(name);
            };
            // Hide away the input box
            input.onblur = function () {
                rangeSelector.hideInput(name);
            };

            // handle changes in the input boxes
            input.onchange = function () {
                var inputValue = input.value,
                    value = (options.inputDateParser || Date.parse)(inputValue),
                    xAxis = chart.xAxis[0],
                    dataMin = xAxis.dataMin,
                    dataMax = xAxis.dataMax;

                // If the value isn't parsed directly to a value by the browser's Date.parse method,
                // like YYYY-MM-DD in IE, try parsing it a different way
                if (isNaN(value)) {
                    value = inputValue.split('-');
                    value = Date.UTC(pInt(value[0]), pInt(value[1]) - 1, pInt(value[2]));
                }

                if (!isNaN(value)) {

                    // Correct for timezone offset (#433)
                    if (!defaultOptions.global.useUTC) {
                        value = value + new Date().getTimezoneOffset() * 60 * 1000;
                    }

                    // Validate the extremes. If it goes beyound the data min or max, use the
                    // actual data extreme (#2438).
                    /* if (isMin) {
                        if (value > rangeSelector.maxInput.HCTime) {
                            value = UNDEFINED;
                        } else if (value < dataMin) {
                            value = dataMin;
                        }
                    } else {
                        if (value < rangeSelector.minInput.HCTime) {
                            value = UNDEFINED;
                        } else if (value > dataMax) {
                            value = dataMax;
                        }
                    }*/

                    // Set the extremes
                    if (value !== UNDEFINED) {
                        chart.xAxis[0].setExtremes(
                        isMin ? value : xAxis.min,
                        isMin ? xAxis.max : value,
                        UNDEFINED,
                        UNDEFINED, {
                            trigger: 'rangeSelectorInput'
                        });
                    }
                }
            };
            //},
        });
    }(Highcharts));


    /**
     * Load new data depending on the selected min and max
     */
    function afterSetExtremes(e) {

        var chart = $('#container').highcharts();

        chart.showLoading('Loading data from server...');
        $.getJSON('http://www.highcharts.com/samples/data/from-sql.php?start=' + Math.round(e.min) +
            '&end=' + Math.round(e.max) + '&callback=?', function (data) {

            chart.series[0].setData(data);
            chart.hideLoading();
        });
    }

    // See source code from the JSONP handler at https://github.com/highslide-software/highcharts.com/blob/master/samples/data/from-sql.php
    $.getJSON('http://www.highcharts.com/samples/data/from-sql.php?callback=?', function (data) {

        // Add a null value for the end date
        data = [].concat(data, [
            [Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]
        ]);

        // create the chart
        $('#container').highcharts('StockChart', {
            chart: {
                type: 'candlestick',
                zoomType: 'x'
            },

            navigator: {
                adaptToUpdatedData: false,
                series: {
                    data: data
                }
            },

            scrollbar: {
                liveRedraw: false
            },

            title: {
                text: 'AAPL history by the minute from 1998 to 2011'
            },

            subtitle: {
                text: 'Displaying 1.7 million data points in Highcharts Stock by async server loading'
            },

            rangeSelector: {
                buttons: [{
                    type: 'hour',
                    count: 1,
                    text: '1h'
                }, {
                    type: 'day',
                    count: 1,
                    text: '1d'
                }, {
                    type: 'month',
                    count: 1,
                    text: '1m'
                }, {
                    type: 'year',
                    count: 1,
                    text: '1y'
                }, {
                    type: 'all',
                    text: 'All'
                }],
                inputEnabled: true,
                selected: 4 // all
            },

            xAxis: {
                events: {
                    afterSetExtremes: afterSetExtremes
                },
                minRange: 3600 * 1000 // one hour
            },

            yAxis: {
                floor: 0
            },

            series: [{
                data: data,
                dataGrouping: {
                    enabled: false
                }
            }]
        });
    });
});