connections.pointsArray
Sets the intermediate points (in global coordinates) of the connection. These points cannot be manipulated by user action.
Example - setting intermediate connection points
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes:[
{
id:"1",
content:{
text: "State 1"
},
x: 20,
y: 20
},
{
id:"2",
content: {
text: "State 2"
},
x: 300,
y: 20
}
],
connections:[
{
from: "1",
to: "2",
points: [
{x: 150, y: 20},
{x: 270, y: 20}
]
}
],
connectionDefaults: {
type: "polyline"
}
});
</script>connections.points.xNumber
Sets the X coordinate of the intermediate point.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
],
connections: [{
from: "1",
to: "2",
type: "polyline",
points: [{ x: 200, y: 50 }]
}]
});
</script>connections.points.yNumber
Sets the Y coordinate of the intermediate point.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } },
{ id: "2", x: 300, y: 100, content: { text: "Shape 2" } }
],
connections: [{
from: "1",
to: "2",
type: "polyline",
points: [{ x: 200, y: 150 }]
}]
});
</script>In this article