Home › forums › Using CanvasJS › Controlling Dynamic Charts
This topic contains 2 replies, has 2 voices, and was last updated by oneworld 2 years, 3 months ago.
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?
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.
It works! Thank you.
You must be logged in to reply to this topic.