Adjust the Path Origin of the Diagram

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 adjust the position of any path at the origin of the Kendo UI for jQuery Diagram?

Solution

The following example demonstrates how to position any path at the origin of the Diagram.

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

    <script>
      var diagram = $("#diagram").kendoDiagram({}).getKendoDiagram();

      diagram.addShape({
        visual: function() {
          var group = new kendo.dataviz.diagram.Group();
          var path = new kendo.dataviz.diagram.Path({
            data: "M100,100 L 200,200 100,300 z"
          });
          group.append(path);

          var bbox = group.drawingElement.bbox();

          if (bbox.origin.x !== 0 || bbox.origin.y !== 0) {
            group.position(-bbox.origin.x, -bbox.origin.y);
          }
          return group;
        }
      });
    </script>

See Also

• Basic Usage of the jQuery Diagram (Demo)
• JavaScript API Reference of the Diagram
• Implement Local Data Diagram Editing
• Render External Content in Diagram Shapes
• Wrap Diagram Text