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 ?

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 ?

• javascript
• charts
• highcharts

• post what you have tried or jsfiddle – Naveen Kumar Alone Commented Aug 23, 2013 at 10:24
• 1 Take look at the related topic stackoverflow./questions/15846859/… – Sebastian Bochan Commented Aug 23, 2013 at 11:57
• The jsfiddle from jsfiddle/E6GHC/1 seems to answer the question partially (though I'm still surprised there is no event callback for this). – Guillaume S. Commented Aug 26, 2013 at 8:54

3 Answers 3

The jsfiddle from jsfiddle/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);
                }
            }
        }
    }

This http://jsfiddle/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);
      }
    }
  }
}

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);
    }
}