Please take a look at this JSFiddle (https://jsfiddle.net/oneworld/8sfvv655/17/). It is based on the example at https://canvasjs.com/docs/charts/how-to/creating-dynamic-charts/.
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?
.
