shapeDefaults.connectorsArray
Defines the connectors the shape owns. A connector is the point in the shape where a connection between this shape and another one can originate from or end.
- "top" - top connector.
- "right" - right connector.
- "bottom" - bottom connector.
- "bottomRight" - bottom right connector.
- "left" - left connector.
- "auto" - auto connector.
You can define your own custom connectors or use the predefined types.
Example - including only some connectors and customize their look
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: [
{
name: "top",
width: 15,
height: 15,
fill: {
color: "green",
opacity: 0.7
},
hover: {
fill: {
color: "lightblue"
},
stroke: {
color: "gray",
dashType: "dot"
}
},
stroke: {
width: 2,
color: "white",
dashType: "solid"
}
},
{
name: "bottom"
}]
},
shapes: [{
id: "1",
content: {
text: "Monday"
},
x: 100,
y: 20
}, {
id: "2",
content: {
text: "Tuesday"
},
x: 250,
y: 20
}, {
id: "3",
content: {
text: "Wednesday"
},
x: 250,
y: 200
}],
connections: [{
from: "1",
to: "2",
fromConnector: "top",
toConnector: "top"
},{
from: "2",
to: "3",
fromConnector: "bottom",
toConnector: "top"
}],
connectionDefaults: {
endCap: "ArrowEnd"
}
});
</script>The following example demonstrates how to define a custom shape with connectors adapted to the outline of the shape. You can see how the shape bounds are accessed and used to determine the position of the connectors.
Example - creating a custom shape with custom connectors
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
dataSource: [{name: "item1"}],
shapeDefaults: {
path: "m1,53.69333l17.5647,-17.56445l0,8.78235l23.15292,0l0,-26.34678l-8.78181,0l17.56417,-17.56444l17.5647,17.56444l-8.78238,0l0,26.34678l23.15297,0l0,-8.78235l17.56473,17.56445l-17.56473,17.56466l0,-8.78231l-63.87057,0l0,8.78231l-17.5647,-17.56466l0,0z",
connectors: [{
name: "Upstream",
position: function(shape) {
return shape._transformPoint(shape.bounds().top());
}
}, {
name: "SideLeft",
position: function(shape) {
var p = shape.bounds().left();
return shape._transformPoint(new kendo.dataviz.diagram.Point(p.x, p.y + 17));
}
}, {
name: "SideRight",
position: function(shape) {
var p = shape.bounds().right();
return shape._transformPoint(new kendo.dataviz.diagram.Point(p.x, p.y + 17));
}
}]
}
});
</script>shapeDefaults.connectors.nameString
The connector name. The name is referenced when specifying explicit fromConnector and toConnector values in a connection.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapes: [
{
id: "1",
content: {
text: "Shape with Named Connectors"
},
x: 100,
y: 100
},
{
id: "2",
content: {
text: "Target Shape"
},
x: 300,
y: 100
}
],
shapeDefaults: {
connectors: [
{
name: "topConnector",
position: function(shape) {
return shape._transformedBounds().top();
}
}
]
},
connections: [
{
from: "1",
to: "2",
fromConnector: "topConnector"
}
]
});
</script>shapeDefaults.connectors.positionFunction
The function that positions the connector. The function is passed a shape and should return kendo.dataviz.diagram. As a result, a point that holds the connector position appears.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
position: function(shape) {
// Position connector at the center of the shape
return new kendo.dataviz.diagram.Point(shape.x + shape.width/2, shape.y + shape.height/2);
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.widthNumber(default: 8)
Defines the width of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
width: 12
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.heightNumber(default: 8)
Defines the height of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
height: 12
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.hoverObject
Defines the hover configuration of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
hover: {
fill: {
color: "lightblue"
},
stroke: {
color: "blue",
width: 2
}
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.hover.fillString|Object
Defines the hover fill options of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
hover: {
fill: "lightgreen"
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.hover.fill.colorString
Defines the hover fill color of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
hover: {
fill: {
color: "orange"
}
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.hover.fill.opacityNumber(default: 1)
Defines the hover fill opacity of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
hover: {
fill: {
color: "red",
opacity: 0.5
}
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.hover.strokeString|Object
Defines the hover stroke options of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
hover: {
stroke: {
color: "purple",
width: 3,
dashType: "dot"
}
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.hover.stroke.colorString(default: "Black")
Defines the hover stroke color.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
hover: {
stroke: {
color: "navy"
}
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.hover.stroke.dashTypeString
The hover stroke dash type.
The following dash types are supported:
- "dash" - A line that consists of dashes
- "dashDot" - A line that consists of a repeating pattern of dash-dot
- "dot" - A line that consists of dots
- "longDash" - A line that consists of a repeating pattern of long-dash
- "longDashDot" - A line that consists of a repeating pattern of long-dash-dot
- "longDashDotDot" - A line that consists of a repeating pattern of long-dash-dot-dot
- "solid" - A solid line
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
hover: {
stroke: {
color: "red",
dashType: "dash"
}
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.hover.stroke.widthNumber(default: 1)
Defines the thickness or width of the shape connectors stroke on hover.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
hover: {
stroke: {
color: "blue",
width: 4
}
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.fillString|Object
Defines the fill options of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
fill: {
color: "lightblue",
opacity: 0.8
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.fill.colorString
Defines the fill color of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
fill: {
color: "yellow"
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.fill.opacityNumber(default: 1)
Defines the fill opacity of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
fill: {
color: "green",
opacity: 0.6
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.strokeString|Object
Defines the stroke options of the shape connectors.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
stroke: {
color: "red",
width: 2,
dashType: "dot"
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.stroke.colorString(default: "Black")
Defines the stroke color.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
stroke: {
color: "magenta"
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.stroke.dashTypeString
Defines the stroke dash type. The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of long dashes
- "longDashDot" - a line consisting of a repeating pattern of long dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long dash-dot-dot
- "solid" - a solid line
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
stroke: {
color: "blue",
dashType: "dash"
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>shapeDefaults.connectors.stroke.widthNumber(default: 1)
Defines the thickness or width of the shape connectors stroke.
Example
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
shapeDefaults: {
connectors: {
stroke: {
color: "blue",
width: 3
}
}
},
shapes: [
{ id: "1", x: 100, y: 100, content: { text: "Shape 1" } }
]
});
</script>In this article