Home forums Using CanvasJS Controlling Dynamic Charts

This topic contains 2 replies, has 2 voices, and was last updated by  oneworld 6 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #14354

    oneworld
    Member

    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?

    #14361

    Suyash Singh
    Moderator

    @oneworld,

    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.

    __
    Suyash,
    Team CanvasJS

    #14372

    oneworld
    Member

    It works! Thank you.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.