Edit this page

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:

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

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy