how to set a rangeSelector for highstock

Question

I'm using highstock. How can I set the rangeSelector for the chart? I've used:

chart.rangeSelector({ selected: 5 });   *

but it didn't work.

I know to set it like this example: http://jsfiddle.net/Pffxt/2/ but I create the chart once and then add series. When I create the chart(like the example) and add series the rangeSelector doesn't work. I think I have to use like ***

Please help me! Thank you

Answer 1

Instead of using .rangeSelector({settings}), use the .clickButton function:

chart.rangeSelector.clickButton(0,{type: 'month', count: 1},true);

However, this function seems to be somewhat strange and undocumented from what I can tell.

It accepts the following arguments:

* @param {Number} i The index of the button
* @param {Object} rangeOptions
* @param {Boolean} redraw

redraw defaults to true, and i will just visually select one of the buttons (other than that, it seems to do nothing). The bread and butter seems to be in the rangeOptions, which is an object with a type and count. For instance, in the example above, it selects the most recent 1 month. Other available options are:

* millisecond
* second
* minute
* hour
* day
* week
* month
* ytd
* year
* all

However, please note that you cannot .destroy(); the range selector and have this still work, you would possibly have to do a little bit of hacking to get that to work.

Here is a JSFiddle illustrating it: http://jsfiddle.net/HFPr2/

Answer 2

You don't have to give the rangeSelector the options to use. You can simply call:

chart.rangeSelector.clickButton(0, true);

Thus the first button will be clicked while using its current options.