Zoom to Predefined Points

The following example demonstrates how to zoom the Diagram to a predefined point.

Example

<button id="zoomIn">+</button>
<button id="zoomOut">-</button>

<div id="diagram"></div>

<script>
    $(document).ready(function () {
        $("#diagram").kendoDiagram();

        var diagram = $("#diagram").data("kendoDiagram");

        var diagramNS = kendo.dataviz.diagram;
        var shape1 = diagram.addShape(new diagramNS.Point(100, 100));

        $("#zoomIn").on("click", function () {
            var zoom = $("#diagram").data("kendoDiagram").zoom();
            $("#diagram").data("kendoDiagram").zoom(zoom + 0.1,
                    {point: new diagramNS.Point(100, 100)});
        });

        $("#zoomOut").on("click", function () {
            var zoom = $("#diagram").data("kendoDiagram").zoom();
            $("#diagram").data("kendoDiagram").zoom(zoom - 0.1,
                    {point: new diagramNS.Point(100, 100)});
        });
    });

</script>

See Also

Other articles on the Kendo UI Diagram:

• JavaScript API Reference
• How to Implement Local Data Editing
• How to Render External Content in Shapes
• How to Wrap Text

For more runnable examples on the Kendo UI Diagram, browse the How To documentation folder.