I have a chart that has a range selector on the upper left corner which allows the user to select from 1M, 3M, 6M, 1Y, 3Y, 5Y, All. This same chart also allows the user to input specific dates using date input boxes which are located on the top right of the chart.
When the user selects a range from the rangeSelector, the date in the input boxes change to match the range selected, which is pretty default behavior.
My objective: I need to save the range selection so that when the user comes back to the chart, i can set the same range selection he had before leaving. Right now the chart defaults to 1Y.
What i've tried:
If the user clicks on the range selector options specifically, i know i can also access what has been clicked on by using the x-axis events (below). This does not help me because i need to know what is selected from an event that takes place outside of the chart. I won't have access to that rangeSelector event.
if (typeof (e.rangeSelectorButton) !== 'undefined') {
alert('count: ' + e.rangeSelectorButton.count + 'text: ' +
e.rangeSelectorButton.text + ' type:' + e.rangeSelectorButton.type);
}
I know there is a way to get the inputs from the date input boxes, so i believe i can reset those dates when re-rendering the chart. If i do this, the rangeSelector will not have the highlighted option (1M, 3M, 6M, etc..) as it would if it was clicked on, but the chart will still render for the right dates. If there's no better alternative, i might use this solution.
var minDate = $('input.highcharts-range-selector:eq(0)').val();
var maxDate = $('input.highcharts-range-selector:eq(1)').val();
However, i'm still wondering if there is a way for me to get the currently selected rangeSelected option without interacting with the chart. In other words, is there a way for me to get this information without having to click on the rangeSelector?
Thanks,
TS
