Get the currently selected range from RangeSelector in Highstock

Question

I'm using both highcharts and highstock and have some charts that use the rangeSelector .

Everything's working fine, but I'd like to GET the currently selected range (when the user clicks one of the rangeSelector buttons), so that I can store it in a cookie to know which range I want to display by default next time.

I've tried various things so far, like adding a chart.events.redraw test to try and catch the chart.rangeSelector.buttons object, but it doesn't seem to contain anything interesting in my case.

To me, the ideal would be an event callback on the rangeselector.buttons, with a simple getter function, like the equivalent of the chart.rangeSelector.buttons[x].setState() , named chart.rangeSelector.buttons[x].getState() ?

I'm surprised this doesn't exist... I must be missing something. Anybody can help on that ?

Answer 1

The jsfiddle from jsfiddle.net/E6GHC/1 seems to answer the question partially (though I'm still surprised there is no event callback for this)

The setExtremes event on the xaxis does the job:

 xAxis: {
        events: {
            setExtremes: function(e) {
                console.log(this);
                if(typeof(e.rangeSelectorButton)!== 'undefined')
                {
                  alert('count: '+e.rangeSelectorButton.count + 'text: ' +e.rangeSelectorButton.text + ' type:' + e.rangeSelectorButton.type);
                }
            }
        }
    }

Answer 2

This http://jsfiddle.net/E6GHC/5/ should do what you want:

xAxis: {
  events: {
    setExtremes: function(e) {
      if(typeof(e.rangeSelectorButton)!== 'undefined') {
        var c = e.rangeSelectorButton.count;
        var t = e.rangeSelectorButton.type;
        var btn_index = null;
        if(c == 1 && t == "month"){
          btn_index = 0;
        } else if(c == 3 && t == "month"){
          btn_index = 1;
        } else if(c == 6 && t == "month"){
          btn_index = 2;
        } else if(t == "ytd"){
          btn_index = 3;
        } else if(c == 1 && t == "year"){
          btn_index = 4;
        } else if(t == "all"){
          btn_index = 5;
        }
        // Store btn_index in a cookie here and use it
        // to initialise rangeSelector -> selected next
        // time the chart is loaded
        alert(btn_index);
      }
    }
  }
}

Answer 3

chart event: redraw can get the display range. Code is tested in highstock 3.10

events: {
    redraw: function(event) {
        console.log('==============> chart redraw <==============');
        console.log(
            Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', event.currentTarget.xAxis[0].min),
            Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', event.currentTarget.xAxis[0].max)
        );
        // log the min and max of the y axis
        console.log(event.currentTarget.yAxis[0].min, event.currentTarget.yAxis[0].max);
    }
}