CODEWITHSUNDEEP
javascriptjqueryhighcharts
Alain Gauthier
Alain Gauthier

Reputation: 889

Highstock setExtremes with a custom range selector button

In highstock range selector I added a custom range selector button (named: my dates) and would like to set a custom extremes when this button is called. I know it works if you put simple button outside the chart and call: chart.xAxis[0].setExtremes(30,80);.

But my scenario is different I want to add a button beside "1m 1y All" range selector buttons, and want that new button to set a custom extremes dates. Using xAxis events setExtremes, does not seems to work unless I am missing something. http://jsfiddle.net/Aeaz3/1/

$(function() {

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


        rangeSelector: {
                    buttons: [{
                        type: '',
                        count: 2,
                        text: 'My dates'
                    },{
                        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'
                    }],
        },

        title : {
            text : 'AAPL Stock Price'
        },
        xAxis: {    
                        events:{
                            setExtremes: function(e) {
                                  var xMin = e.min;
                                 var xMax = e.max; 
                                var zmRange = computeTickInterval(xMin, xMax);
                                    this.chart.xAxis[0].options.tickInterval =zmRange;
                                    this.chart.xAxis[0].isDirty = true;


                            },
                        }
        },
        series : [{
            name : 'AAPL',
            data : data,
            tooltip: {
                valueDecimals: 2
            }
        }]
    });
  });

});

Upvotes: 4

Views: 11648

Answers (2)

Mike Nagle
Mike Nagle

Reputation: 5

One approach would be to modify highstock to use the values of e.min and e.max if they are changed in your event handler. This can be done by modifying 3 lines of code.

in highstock.src.js line 7447 (in version 2.0.4). The method is called setExtremes.

Change:

fireEvent(axis, 'setExtremes', eventArguments, function () { // the default event handler

        axis.userMin = newMin;
        axis.userMax = newMax;

To:

fireEvent(axis, 'setExtremes', eventArguments, function (event) { // the default event handler

        axis.userMin = event.min;
        axis.userMax = event.max;

And now changing e.min or e.max in the xAxis.setExtremes event will work. (Don't call setExtremes())

Upvotes: -2

Mark
Mark

Reputation: 108567

The setExtremes callback:

Fires when the minimum and maximum is set for the axis, either by calling the .setExtremes() method or by selecting an area in the chart. The this keyword refers to the axis object itself. One parameter, event, is passed to the function. This contains common event information based on jQuery or MooTools depending on which library is used as the base for Highcharts.

So it's not really meant to be used to set extremes but is rather a notification when something else does some extreme setting.

That said, I still think it is possible to leverage it for your use case by catching the call when your button is clicked and then resetting it to your custom range:

xAxis: {    
    events:{
        if (e.trigger == "rangeSelectorButton" && 
            e.rangeSelectorButton.text == "My dates"){
            // it is your button that caused this,
            // so setExtrememes to your custom
            // have to do in timeout to let
            // highcharts finish processing events...
            setTimeout(function(){
                Highcharts.charts[0].xAxis[0].setExtremes(1198681756385,1368144000000)
            }, 1);
        }
    }
},

Updated Fiddle here.

Upvotes: 5

Related Questions