javascript - Get the currently selected range from RangeSelector in Highstock - Stack Overflow

admin管理员组

文章数量:1344227

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

Share Improve this question Follow edited Aug 23, 2013 at 10:33 TheBlackBenzKid 27.1k4545 gold badges141141 silver badges214214 bronze badges asked Aug 23, 2013 at 10:21 Guillaume S.Guillaume S. 28211 gold badge44 silver badges1313 bronze badges 3

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

本文标签： javascriptGet the currently selected range from RangeSelector in HighstockStack Overflow