Button to zoom

[Emeric]

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 !)

[Vishwas R]

Emeric,

You can programmatically zoom into certain region by setting viewportMinimum and viewportMaximum. If you like to set zoom into certain region after clicking the button, you can do so by changing viewportMinimum & viewportMaximum on clicking the button. Below is the code-snippet for the same.

document.getElementById("zoomBtn").addEventListener("click", function(){
  chart.axisX[0].set("viewportMinimum", new Date(2002, 01, 01), false);
  chart.axisX[0].set("viewportMaximum", new Date(2006, 01, 01));
});

Please take a look at this JSFiddle for complete code.

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

—
Vishwas R
Team CanvasJS

[Emeric]

Thank you a lot that’s it !

[Emeric]

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 !

[Suyash Singh]

@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

[Emeric]

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

[Suyash Singh]

@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

[Emeric]

Oh ok thank you a lot !