CODEWITHSUNDEEP
javascriptchartsgoogle-visualizationzoomingpan
Olivier.B
Olivier.B

Reputation: 109

Google Chart Pan Zoom Buttons


I'm searching for having zoom and pan buttons on a google chart.
Like Here. (Maybe there is no option to have it and i have to dev it myself)
I also wondering how they do to have dynamic Xmin and Xmax. Is this calculated in real time by the client ?

Upvotes: 2

Views: 4074

Answers (1)

Michael Hutter
Michael Hutter

Reputation: 1532

Here is one possiblity to zoom in a google chart. The zooming is done by clicking and dragging the mouse left or right. Panning ist not possible in this version (but you don't need a scroll wheel).

explorer: { 
        actions: ['dragToZoom', 'rightClickToReset'],
        axis: 'horizontal',
        keepInBounds: true,
        maxZoomIn: 4.0
}

If you want to try it look here: https://jsfiddle.net/4w626v2s/2/

Another possiblity is the following. Here you need a mouse scroll wheel to zoom into the chart. After zooming you can click and drag to pan within the chart.

explorer: {
        axis: 'horizontal',
        keepInBounds: true,
        maxZoomIn: 4.0
}

And here you can test it: https://jsfiddle.net/5h7jxqq8/2/

Look also here

Upvotes: 1

Related Questions