Shapes
The Diagram enables you to add various shapes by using its API reference on shapes.
Getting Started
To add a rectangular shape to the Diagram, call the diagram.addShape(); method which renders a rectangle in the upper-left corner of the Diagram surface. To change the initial position, call the addShape() method with an additional Point parameter.
var Point = kendo.dataviz.diagram.Point; diagram.addShape(new Point(100,220));To specify additional properties for the Diagram, use the options parameter. The following example demonstrates how to set the background color of the shape.
diagram.addShape(new Point(100,220), { background: "red" });The addShape() method also accepts a shape instance and enables you to add a new shape.
var Point = kendo.dataviz.diagram.Point; var shapeInstance = new kendo.diagram.Shape(); var shape = diagram.addShape(shape); shape.position(new Point(100,220));Adding Connections
To connect the shapes, use the connect() method.
var Point = kendo.dataviz.diagram.Point; var shape1 = diagram.addShape(new Point(100,100)); var shape2 = diagram.addShape(new Point(300,100)); var connection = diagram.connect(shape1, shape2);The previous example results in the following output.
Changing the Initial Options of the Shape
To change a particular configuration of the shape and visualize it, use the redraw() method which will render the shape with its new options.
var shape = new kendo.dataviz.diagram.Shape({x: 500, y: 100, fill: "green"}); diagram.addShape(shape); diagram.shapes[0].redraw({ fill: { color: "red" } });Cloning a Shape
To make a clone of a shape and render it on the Diagram, use the clone() method.
var shape = new kendo.dataviz.diagram.Shape({x: 500, y: 100, fill: "green"}); diagram.addShape(shape); var shape2 = diagram.shapes[0].clone(); diagram.addShape(shape2);Creating a Shape Using SVG Path Data
To create a Diagram shape with an SVG Path, use the path configuration.
var shape = new kendo.dataviz.diagram.Shape({path: 'm35.15,0 L84.85,0 L120,35.15 L120,84.85 L84.85,120 L35.15,120 L0,84.85 L0,35.15 z', fill: "green"}); diagram.addShape(shape);