New to Kendo UI for jQuery? Download free 30-day trial

Zoom to Predefined Diagram Points

Environment

Product Progress® Kendo UI® Diagram for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript

Description

How can I zoom the Kendo UI for jQuery Diagram to a predefined point?

Solution

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


    <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.Shape({x: 120, y: 120, fill: "red", content: { text: "Test Shape" }}));

        $("#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

In this article