pointsArray
Sets the intermediate points (in global coordinates) of the connection.
Example - configuring the points
<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.xNumber
Sets the X coordinate of the point.
Example - configuring the points.x
<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.yNumber
Sets the Y coordinate of the point.
Example
<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>In this article