Reply To: How to change Navigation range accordingly to range selection

[Manoj Mohan]

@benna,

– before the modification you suggested, when the chart was rendered the first time i set the rangeSelector property “selectedRangeButtonIndex: 2” so the button with index 2 was selected. But now, setting this button using that property, the event “rangeChanged” is not triggered. Should i force this event via code so when the chart is loaded with button index 2 selected the navigation bar is set accordingly or there’s another way to do this?

rangeChanged event is triggered only when the range of the StockChart is changed manually using mouse/pointer (zooming/panning/sliding) and it doesn’t trigger when range of StockChart are set programmatically. However, you can manually call rangeChanged event handler after rendering the chart with required parameter as shown in this code snippet.

rangeChanged({minimum: stockChart.navigator.slider.minimum, maximum: stockChart.navigator.slider.maximum, source: "buttons" })

– when selecting a different button, inside the rangeChanged(e) function i set these 2 properties:

// my intention was to set the new button as the selected one
stockChart.rangeSelector.selectedRangeButtonIndex = e.index;

// and change the color of the new button
stockChart.rangeSelector.buttonStyle.set(“backgroundColorOnSelect”, “#ff9800”);

In order to set selectedRangeButtonIndex, either you can use set method or update the stockchart options. Please take a below code snippet for the same.
stockChart.rangeSelector.set("selectedRangeButtonIndex", e.index); or
stockChart.options.rangeSelector.selectedRangeButtonIndex = e.index;

– In order to see again ALL the chart data i need to click TWICE the “ALL” button in range selector, and this happen also in your JDIfiddle example above. Try selecting, the first time the page is loadedm range 3 months and then the ALL button. You’ll see that the first time will change just the navigation bar, and with a second click also the chart data will change accordingly.

We are looking into your query and will get back to you at the earliest.

—-
Manoj Mohan
Team CanvasJS