Home forums Using CanvasJS Button to zoom

This topic contains 7 replies, has 3 voices, and was last updated by  Emeric 3 months, 3 weeks ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #15304

    Emeric
    Member

    Hello,

    I’m using CanvasJS since few weeks and I have a question about zoom.
    I saw we can zoom easily by drag & drop but I would like to create a button to zoom (by click).
    Example: I have a button “x2” and when i click on it it zooms x2 on my graph (no drag & drop, just a click).
    I searched a lot and i found nothing.

    Thank you in advance !
    (Sorry my english isn’t perfect !)

    #15312

    Vishwas R
    Keymaster

    Emeric,

    To zoom into certain region, you need to change viewportMinimum and viewportMaximum. If you like to set viewportMinimum and viewportMaximum to certain region after clicking the button, you can achieve as shown in this jsfiddle.

    Also take a look at this jsfiddle, where viewportMinimum and viewportMaximum are changed based on dropdown options.


    Vishwas R
    Team CanvasJS

    #15313

    Emeric
    Member

    Thank you a lot that’s it !

    #15453

    Emeric
    Member

    I have another question with viewport.
    For example I have this graph: https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/zooming-panning/
    We can zoom by using drag & drop, is it possible to get the viewportMinimum and the viewportMaximum of this zoom ?
    I tried to console.log both but it’s “undefined”. Is it possible to get this value after zooming with the mouse ?

    Thank’s !

    #15454

    Suyash Singh
    Moderator

    @emeric,

    rangeChanged and rangeChanging events are fired on zooming, panning and reset. Please, take a look at this page for more details.

    ___
    Suyash Singh
    Team CanvasJS

    #15465

    Emeric
    Member

    Hello Suyash Singh,

    Thank you for your answer.

    I saw we can get the number of event but what I want is the value/label of X when I zoom or when I use the pan. I don’t really understand how it works, can you tell more ?

    Best regards,
    Emeric

    #15467

    Suyash Singh
    Moderator

    @emeric,

    When you change the viewport range by either zooming, panning or reset rangeChanging and rangeChanged events are fired. rangeChanging event is fired just before the current viewports are updated and the rangeChanged is fired on updation of the current viewports i.e. after zooming, panning or reset. An event parameter is passed to the event handler that you assign to the rangeChanging/rangeChanged event.This parameter contains current viewportMinimum, viewportMaximum and other properties.

    You can use the viewportMinimum and viewportMaximum to check in which range of the axis you have zoomed into.

    Please have a look at this jsfiddle in which all the dataPoints in the current zoomed range is displayed in the browser console.

    Also please refer the following jsfiddle which shows the viewports on zooming/panning.


    Suyash Singh
    Team CanvasJS

    #15472

    Emeric
    Member

    Oh ok thank you a lot !

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

You must be logged in to reply to this topic.