In the JSFiddle, you will observe the following:
– This is a dynamic chart, with the dataseries being updated live.
– The data points are not set for scrolling, i.e. all the data points are shown and none are dropped off the window. The X-axis scale is simply compressed over time to fit in all the new data points.
– In this mode, when the user zooms in the chart, the data refresh appears frozen, i.e. no update is displayed in this window, simply because it is a window restricted to past data. However the actual updates keep coming, as shown by the current dataseries value displayed in the legend. This is excellent, since it allows the user a way to pause the display and analyse a snapshot of the feed at leisure, WITHOUT interrupting the actual data updates.
I would like to achieve the same thing described above, programmatically, e.g. through an external button click. How can I do that? How can I programmatically zoom in on a live chart within a specific X-axis range, e.g. between X:10 and X:20? Any ideas?
You can programmatically zoom into an axis range by using ViewPortMinimum and viewPortMaximum. Reset button won’t work since the viewPortMaximum / viewPortMinimum values were not set manually (mouse click and drag). So you will have to take care of zoom out on click of reset button. Please check this jsfiddle.