How to set viewport programatically.

[offwhite]

I’m experiencing two issues with setting a viewport range.

The documentation for viewport states:

Viewport is the visible range of the axis and viewportMaximum allows you to set its maximum value. This can be used in combination with viewportMinimum in order to zoom into a certain region programmatically.

…

Clicking the reset button will set the viewport range to viewportMinimum and viewportMaximum.

1. Which means once you zoom into an area of the chart programatically, the reset button doesn’t reset anymore, it sets the viewport to whatever was programatically set.

2. The button will only set the viewport to that range once. If you click the button and then zoom or pan on the graph, the button no longer sets the viewport to the expected range.

Both of these behaviours can be seen in this jsFiddle.

[Manoj Mohan]

@offwhtie,

1. Which means once you zoom into an area of the chart programmatically, the reset button doesn’t reset anymore, it sets the viewport to whatever was programmatically set.

On updating the viewport range programmatically, you are setting the viewport range in the chart options. So by clicking the reset button after setting the viewport range programmatically, the chart will take the viewportMinimum and viewportMaximum as the default range for the chart. To overcome this behaviour, you can set the viewportMinimum and viewportMaximum to null on clicking the reset button in rangeChanging event.

2. The button will only set the viewport to that range once. If you click the button and then zoom or pan on the graph, the button no longer sets the viewport to the expected range.

Programmatically zooming can be done by setting chart-options, which is usually done without user interaction/mouse events, whereas user interaction through mouse-event over the chart updates the latest viewport. Because of this clicking button doesn’t set the viewport. However, you can reset the viewport by setting it to null and set it to the desired value to make it work according to your requirements.

—-
Manoj Mohan
Team CanvasJS