connections.fromObject|String|Number
Defines the source of the connection. You can set this property to a value matching a shape id or to an object with XY-coordinates.
Example - configuring connection "from" and "to" settings
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [{
id: "1",
content: {
text: "Monday"
},
x: 100,
y: 20
}, {
id: "2",
content: {
text: "Tuesday"
},
x: 300,
y: 20
}],
connections: [
{
from: {
x: 20,
y: 70
},
to: "1",
startCap: "FilledCircle"
},
{
from: "1",
to: "2",
endCap: "ArrowEnd"
}]
});
</script>connections.from.xNumber
Defines the x-coordinate of the connection source.
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: { x: 100, y: 100 },
to: { x: 300, y: 100 }
}]
});
</script>connections.from.yNumber
Defines the y-coordinate of the connection source.
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: { x: 100, y: 100 },
to: { x: 300, y: 150 }
}]
});
</script>