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

Points

configuration

Sets the intermediate points (in global coordinates) of the connection.

points

Array

<div id="diagram"></div>
<script>
  var Point = kendo.dataviz.diagram.Point;
  var diagram = $("#diagram").kendoDiagram({ }).getKendoDiagram();
  var connection = diagram.connect(new Point(100,100), new Point(300,100), {
    type: "polyline",
    points: [
      new Point(150,100),
      new Point(150,150),
      new Point(200,150),
      new Point(200,100)
    ],
    selectable: false
  });
</script>

points.x

Number

Sets the X coordinate of the point.

<div id="diagram"></div>
<script>
  var Point = kendo.dataviz.diagram.Point;
  var diagram = $("#diagram").kendoDiagram({ }).getKendoDiagram();
  var connection = diagram.connect(new Point(100,100), new Point(300,100), {
    type: "polyline",
    points: [
      { x: 150, y: 100 },
      { x: 175, y: 150 },
      { x: 200, y: 100 }
    ],
    selectable: false
  });
</script>

points.y

Number

Sets the Y coordinate of the point.

<div id="diagram"></div>
<script>
  var Shape = kendo.dataviz.diagram.Shape;
  var Point = kendo.dataviz.diagram.Point;
  $("#diagram").kendoDiagram();
  var diagram = $("#diagram").data("kendoDiagram");
  var shape1 = diagram.addShape( new Shape({x:100, y: 100}));
  var shape2 = diagram.addShape( new Shape({x:300, y: 100}));

  var connection = new kendo.dataviz.diagram.Connection(shape1, shape2, {
    points: [
      new Point(200, 50),
      new Point(250, 150)
    ],
    selectable: false
  });

  diagram.addConnection(connection);
</script>