How to programmatically implement zoom in/out

I checked the example in, the diagram will zoom in/out based on the action of mouse wheel. I have a requirement to implement Zoom In/Out in my diagram by clicking zoom in and zoom out button. Can someone tell me how to do it?


Just have your buttons call myDiagram.commandHandler.increaseZoom and decreaseZoom.

If you want, you can disable those buttons too. See for an example.

Thanks for the quick response. I hook up my buttons with myDiagram.commandHandler.increaseZoom and decreaseZoom, but nothing was changed. Do any properties have to be set before it will work?

I checked my diagram and I have:

allowZoom : true
minScale : 0.0001
maxScale : 100

But whenever I called myDiagram.commandHandler.canIncreaseZoom(), it always returned false.

Did I miss anything?


This works for me:

And myDiagram.commandHandler.canIncreaseZoom() returns true for me too.

My diagram was placed inside our in-house javascript framework which extended from jQuery. Is there any setting I need to check to see if our code conflicts with the settings in goJS?


There are no inherent conflicts, since some of our samples make use of jQuery. But it is common to have a local conflict with the definition of "$". You'll note that all of our samples declare "$" to be a local variable. Or you can call jQuery.noConflict().

Also, are there any errors or warnings?

I knew the local conflict of $ and I have been trying to avoid that. What I suspect is if there is any CSS conflict that cause the zoom to fail.

I don’t see any error and warnings.

Offhand I cannot think of any CSS that would disable zooming without breaking a lot of stuff.

Can the user zoom without using your buttons?

Does your problem exist identically on all platforms?

I have tried in IE9, Firefox and Chrome, none of them worked. Some of the keyboard short cuts like CTRL+A, CTRL+Y and CTRL+Z worked, but not for CTRL+(+) and CTRL+(-).

BTW, I have the following setting as well:

myDiagram.autoScale = go.Diagram.Uniform
myDiagram.initialAutoScale = go.Diagram.Uniform

Are they correct?

That’s the problem – by setting Diagram.autoScale to Uniform you are telling the Diagram to always show all of the diagram in the viewport. So of course the user cannot zoom in or out.