Search results

Migration from Essential JS 1

This article describes the API migration process of Diagram component from Essential JS 1 to Essential JS 2.

Background

Behaviour API in Essential JS 1 API in Essential JS 2
Defines the background color of diagram elements Property:`backgroundColor` $("#diagram").ejDiagram({ backgroundColor: "red" }); Property:`backgroundColor` var diagram = new ej.diagrams.Diagram({ backgroundColor: 'red' }); diagram.appendTo('#diagram');
Defines how to align the background image over the diagram area Property:`backgroundImage.alignment` $("#diagramcontent").ejDiagram({ backgroundImage: { alignment: ej.datavisualization.Diagram.ImageAlignment.XMidYMid } }); Property:`background.align` var diagram = new ej.diagrams.Diagram({ pageSettings: { background: { align: 'XMidYMid' } } }); diagram.appendTo('#diagram');
Defines how the background image should be scaled/stretched Property:`backgroundImage.scale` $("#diagramcontent").ejDiagram({ backgroundImage: { scale: ej.datavisualization.Diagram.ScaleConstraints.Meet } }); Property:`background.scale` var diagram = new ej.diagrams.Diagram({ pageSettings: { background: { scale: 'Meet' } } }); diagram.appendTo('#diagram');
Sets the source path of the background image Property:`backgroundImage.source` $("#diagramcontent").ejDiagram({ backgroundImage: { source: "Syncfusion.png" } }); Property:`background.source` var diagram = new ej.diagrams.Diagram({ pageSettings: { background: { source: 'Syncfusion.png' } } }); diagram.appendTo('#diagram');

Bridging

Behaviour API in Essential JS 1 API in Essential JS 2
Sets the direction of line bridges Property:`bridgeDirection` $("#diagramcontent").ejDiagram({ bridgeDirection: ej.datavisualization.Diagram.BridgeDirection.Bottom }); Property:`bridgeDirection` var diagram = new ej.diagrams.Diagram({ bridgeDirection: 'Top' }); diagram.appendTo('#diagram');

CommandManager

Behaviour API in Essential JS 1 API in Essential JS 2
Stores the multiple command names with the corresponding command objects Property:`commandManager.commands`

$("#diagramcontent").ejDiagram({ commandManager: { commands: { "clone": { gesture: { key: ej.datavisualization.Diagram.Keys.C, keyModifiers: ej.datavisualization.Diagram.KeyModifiers.Shift }, canExecute: function(args) { var diagram = $("#diagramcontent").ejDiagram("instance"); return diagram.model.selectedItems.children.length; }, execute: function(args) { var diagram = $("#diagramcontent").ejDiagram("instance"); diagram.copy(); diagram.paste(); } } } } });
Property:`commandManager.commands`

var diagram = new ej.diagrams.Diagram({ commandManager: { commands: [{ name: 'customCopy', parameter: 'node', canExecute: function() { if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) { return true; } return false; }, execute: function() { for (var i = 0; i < diagram.selectedItems.nodes.length; i++) { diagram.selectedItems.nodes[i].style.fill = 'red'; } diagram.dataBind(); }, gesture: { key: Keys.G, keyModifiers: KeyModifiers.Shift } }] } }); diagram.appendTo('#diagram');
The command is executable at the moment or not. Property:`commandManager.commands.canExecute`

$("#diagramcontent").ejDiagram({ commandManager: { commands: { "clone": { gesture: { key: ej.datavisualization.Diagram.Keys.C, keyModifiers: ej.datavisualization.Diagram.KeyModifiers.Shift }, canExecute: function(args) { var diagram = $("#diagramcontent").ejDiagram("instance"); return diagram.model.selectedItems.children.length; }, execute: function(args) { var diagram = $("#diagramcontent").ejDiagram("instance"); diagram.copy(); diagram.paste(); } } } } });
Property:`commandManager.commands.canExecute`

var diagram = new ej.diagrams.Diagram({ commandManager: { commands: [{ name: 'customCopy', parameter: 'node', canExecute: function() { if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) { return true; } return false; }, execute: function() { for (var i = 0; i < diagram.selectedItems.nodes.length; i++) { diagram.selectedItems.nodes[i].style.fill = 'red'; } diagram.dataBind(); }, gesture: { key: Keys.G, keyModifiers: KeyModifiers.Shift } }] } }); diagram.appendTo('#diagram');
Defines what to be executed when the key combination is recognized Property:`commandManager.commands.execute`

$("#diagramcontent").ejDiagram({ commandManager: { commands: { "clone": { gesture: { key: ej.datavisualization.Diagram.Keys.C, keyModifiers: ej.datavisualization.Diagram.KeyModifiers.Shift }, canExecute: function(args) { var diagram = $("#diagramcontent").ejDiagram("instance"); return diagram.model.selectedItems.children.length; }, execute: function(args) { var diagram = $("#diagramcontent").ejDiagram("instance"); diagram.copy(); diagram.paste(); } } } } });
Property:`commandManager.commands.execute`

var diagram = new ej.diagrams.Diagram({ commandManager: { commands: [{ name: 'customCopy', parameter: 'node', canExecute: function() { if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) { return true; } return false; }, execute: function() { for (var i = 0; i < diagram.selectedItems.nodes.length; i++) { diagram.selectedItems.nodes[i].style.fill = 'red'; } diagram.dataBind(); }, gesture: { key: Keys.G, keyModifiers: KeyModifiers.Shift } }] } }); diagram.appendTo('#diagram');
Defines a combination of keys and key modifiers, on recognition of which the command will be executed Property:`commandManager.commands.gesture`

$("#diagramcontent").ejDiagram({ commandManager: { commands: { "clone": { gesture: { key: ej.datavisualization.Diagram.Keys.C, keyModifiers: ej.datavisualization.Diagram.KeyModifiers.Shift }, canExecute: function(args) { var diagram = $("#diagramcontent").ejDiagram("instance"); return diagram.model.selectedItems.children.length; }, execute: function(args) { var diagram = $("#diagramcontent").ejDiagram("instance"); diagram.copy(); diagram.paste(); } } } } });
Property:`commandManager.commands.gesture`

var diagram = new ej.diagrams.Diagram({ commandManager: { commands: [{ name: 'customCopy', parameter: 'node', canExecute: function() { if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) { return true; } return false; }, execute: function() { for (var i = 0; i < diagram.selectedItems.nodes.length; i++) { diagram.selectedItems.nodes[i].style.fill = 'red'; } diagram.dataBind(); }, gesture: { key: Keys.G, keyModifiers: KeyModifiers.Shift } }] } }); diagram.appendTo('#diagram');
Sets the key value, on recognition of which the command will be executed Property:`commandManager.commands.gesture.key`

$("#diagramcontent").ejDiagram({ commandManager: { commands: { "clone": { gesture: { key: ej.datavisualization.Diagram.Keys.C, keyModifiers: ej.datavisualization.Diagram.KeyModifiers.Shift }, canExecute: function(args) { var diagram = $("#diagramcontent").ejDiagram("instance"); return diagram.model.selectedItems.children.length; }, execute: function(args) { var diagram = $("#diagramcontent").ejDiagram("instance"); diagram.copy(); diagram.paste(); } } } } });
Property:`commandManager.commands.gesture.key`

var diagram = new ej.diagrams.Diagram({ commandManager: { commands: [{ name: 'customCopy', parameter: 'node', canExecute: function() { if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) { return true; } return false; }, execute: function() { for (var i = 0; i < diagram.selectedItems.nodes.length; i++) { diagram.selectedItems.nodes[i].style.fill = 'red'; } diagram.dataBind(); }, gesture: { key: Keys.G, keyModifiers: KeyModifiers.Shift } }] } }); diagram.appendTo('#diagram');
Sets a combination of key modifiers, on recognition of which the command will be executed. Property:`commandManager.commands.gesture.keyModifiers`

$("#diagramcontent").ejDiagram({ commandManager: { commands: { "clone": { gesture: { key: ej.datavisualization.Diagram.Keys.C, keyModifiers: ej.datavisualization.Diagram.KeyModifiers.Shift }, canExecute: function(args) { var diagram = $("#diagramcontent").ejDiagram("instance"); return diagram.model.selectedItems.children.length; }, execute: function(args) { var diagram = $("#diagramcontent").ejDiagram("instance"); diagram.copy(); diagram.paste(); } } } } });
Property:`commandManager.commands.gesture.keyModifiers`

var diagram = new ej.diagrams.Diagram({ commandManager: { commands: [{ name: 'customCopy', parameter: 'node', canExecute: function() { if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) { return true; } return false; }, execute: function() { for (var i = 0; i < diagram.selectedItems.nodes.length; i++) { diagram.selectedItems.nodes[i].style.fill = 'red'; } diagram.dataBind(); }, gesture: { key: Keys.G, keyModifiers: KeyModifiers.Shift } }] } }); diagram.appendTo('#diagram');
Defines any additional parameters that are required at runtime Property:`commandManager.commands.parameter`

$("#diagramcontent").ejDiagram({ commandManager: { commands: { "clone": { parameter : "node", gesture: { key: ej.datavisualization.Diagram.Keys.C, keyModifiers: ej.datavisualization.Diagram.KeyModifiers.Shift }, canExecute: function(args) { var diagram = $("#diagramcontent").ejDiagram("instance"); return diagram.model.selectedItems.children.length; }, execute: function(args) { var diagram = $("#diagramcontent").ejDiagram("instance"); diagram.copy(); diagram.paste(); } } } } });
Property:`commandManager.commands.parameter`

var diagram = new ej.diagrams.Diagram({ commandManager: { commands: [{ name: 'customCopy', parameter: 'node', canExecute: function() { if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) { return true; } return false; }, execute: function() { for (var i = 0; i < diagram.selectedItems.nodes.length; i++) { diagram.selectedItems.nodes[i].style.fill = 'red'; } diagram.dataBind(); }, gesture: { key: Keys.G, keyModifiers: KeyModifiers.Shift } }] } }); diagram.appendTo('#diagram');

Connectors

Behaviour API in Essential JS 1 API in Essential JS 2
Allows the user to save custom information/data about a connector Property:`connectors.addInfo`

var addInfo = { Description: "Bidirectional Flow" }; var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, addInfo: addInfo }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.addInfo`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 } }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Defines the bridgeSpace of connector Property:`connectors.bridgeSpace`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, bridgeSpace: 15, targetPoint: { x: 200, y: 200 }, }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.bridgeSpace`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, bridgeSpace: 15, targetPoint: { x: 600, y: 200 } }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Enables or disables the behaviors of connectors Property:`connectors.constraints`

var ConnectorConstraints = ej.datavisualization.Diagram.ConnectorConstraints; var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, constraints: ConnectorConstraints.Default & ~ConnectorConstraints.Select }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.constraints`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, constraints: ConnectorConstraints.Default | ConnectorConstraints.Drag }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Defines the radius of the rounded corner Property:`connectors.cornerRadius`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, cornerRadius: 10, segments:[{ type: "orthogonal"}] }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.cornerRadius`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, cornerRadius: 10, type: 'Orthogonal', }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Customize connectors appearance using user-defined CSS Property:`connectors.cssClass`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, cssClass: "hoverConnector" }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Not applicable
Sets the horizontal alignment of the connector Property:`connectors.horizontalAlign`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, horizontalAlign:ej.datavisualization.Diagram.HorizontalAlignment.Right }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Not applicable
A collection of JSON objects where each object represents a label Property:`connectors.labels`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, labels:[{ text:"connector" }] }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.annotations`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, annotations: [{ id: 'label', content: 'Text', offset: 0.5 }] }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Stroke color of the connector Property:`connectors.lineColor`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, lineColor: "blue" }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.style.strokeColor`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, style: { strokeColor: 'blue' }, }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Sets the pattern of dashes and gaps used to stroke the path of the connector Property:`connectors.lineDashArray`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, lineColor: "blue", lineDashArray: "2,2" }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.style.strokeDashArray`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, style: { strokeColor: 'blue', strokeWidth: 3, strokeDashArray: '2,2' }, }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Sets the width of the line Property:`connectors.lineWidth`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, lineWidth: 10 }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.style.strokeWidth`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, style: { strokeColor: 'blue', strokeWidth: 3, strokeDashArray: '2,2' }, }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Defines the padding value to ease the interaction with connectors Property:`connectors.lineHitPadding`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, linehitPadding: 15 }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.hitPadding`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, hitPadding: 10 }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Defines the minimum space to be left between the bottom of parent bounds and the connector Property:`connectors.marginBottom`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, marginBottom: 15 }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.margin.bottom`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, margin: { bottom: 3 } }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Defines the minimum space to be left between the top of parent bounds and the connector Property:`connectors.marginTop`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, marginTop: 15 }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.margin.top`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, margin: { top: 3 } }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Defines the minimum space to be left between the left of parent bounds and the connector Property:`connectors.marginLeft`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, marginLeft: 15 }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.margin.left`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, margin: { left: 3 } }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Defines the minimum space to be left between the right of parent bounds and the connector Property:`connectors.marginRight`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, marginRight: 15 }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.margin.right`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, margin: { right: 3 } }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Sets a unique name for the connector Property:`connectors.name`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.id`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 } }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Defines the transparency of the connector Property:`connectors.opacity`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, opacity: 0.5 }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.style.opacity`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, style: { opacity: 0.5 }, }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Sets the parent name of the connector. Property:`connectors.parent`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, parent: "group" }; var group = { name: "group", children: ["connector"] }; $("#diagramcontent").ejDiagram({ connectors: [connector], nodes: [group] });
Not applicable
An array of JSON objects where each object represents a segment Property:`connectors.segments`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, segments: [{ type: "straight", point: { x: 75, y: 150 } }] }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.segments`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, segments: [{ type: 'Orthogonal', length: 30, direction: 'Bottom' }, { type: 'Orthogonal', length: 80, direction: 'Right' } ] }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Sets the direction of orthogonal segment Property:`connectors.segments.direction`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, segments: [{ type: "straight", point: { x: 75, y: 150 }, direction: "bottom" }] }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.segments.direction`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, segments: [{ type: 'Orthogonal', length: 30, direction: 'Bottom' }, { type: 'Orthogonal', length: 80, direction: 'Right' } ] }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Describes the length of orthogonal segment Property:`connectors.segments.length`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, segments: [{ type: "straight", point: { x: 75, y: 150 }, length: 50 }] }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.segments.length`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, segments: [{ type: 'Orthogonal', length: 30, direction: 'Bottom' }, { type: 'Orthogonal', length: 80, direction: 'Right' } ] }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Describes the end point of bezier/straight segment Property:`connectors.segments.point`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, segments: [{ type: "straight", point: { x: 75, y: 150 } }] }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.segments.point`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, segments: [{ type: 'Straight', point: { x: 800, y: 50 } }] }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Defines the first control point of the bezier segment Property:`connectors.segments.point1`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, segments: [{ type: "bezier", point1: { x: 150, y: 50 } }] }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.segments.point1`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, segments: [{ type: 'Bezier', point: { x: 600, y: 300 }, point1: { x: 525, y: 475 } }] }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Defines the second control point of bezier segment Property:`connectors.segments.point2`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, segments: [{ type: "bezier", point1: { x: 150, y: 50 }, point2: { x: 150, y: 150 } }] }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.segments.point2`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, segments: [{ type: 'Bezier', point: { x: 600, y: 300 }, point1: { x: 525, y: 475 }, point2: { x: 575, y: 475 } }] }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Sets the type of the segment Property:`connectors.segments.type`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, segments: [{ type: ej.datavisualization.Diagram.Segments.Bezier }] }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.segments.type`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, segments: [{ type: 'Bezier', point: { x: 600, y: 300 }, point1: { x: 525, y: 475 }, point2: { x: 575, y: 475 } }] }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Describes the length and angle between the first control point and the start point of bezier segment Property:`connectors.segments.vector1`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, segments: [{ type: "bezier", vector1: { distance: 75, angle: 0 }, vector2: { distance: 75, angle: 180 } }] }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.segments.vector1`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, segments: [{ type: 'Bezier', point: { x: 900, y: 160 }, vector1: { angle: 20, distance: 75 }, vector2: { angle: 20, distance: 75 } }], }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Describes the length and angle between the second control point and end point of bezier segment Property:`connectors.segments.vector2`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, segments: [{ type: "bezier", vector1: { distance: 75, angle: 0 }, vector2: { distance: 75, angle: 180 } }] }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.segments.vector2`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, segments: [{ type: 'Bezier', point: { x: 900, y: 160 }, vector1: { angle: 20, distance: 75 }, vector2: { angle: 20, distance: 75 } }] }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Sets the type of the connector Property:`connectors.shape.type`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, shape: { type: "bpmn" }, segments: [{ type: "straight" }] }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.shape.type`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, segments: [{ type: 'Bezier', point: { x: 600, y: 300 }, point1: { x: 525, y: 475 }, point2: { x: 575, y: 475 } }], shape: { type: 'Bpmn', flow: 'Message', message: 'InitiatingMessage' } }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Defines the source decorator of the connector Property:`connectors.sourceDecorator`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, sourceDecorator: { shape: "openarrow" } }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.sourceDecorator`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, sourceDecorator: { shape: 'Arrow', }, }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Sets the border color of the source decorator Property:`connectors.sourceDecorator.borderColor`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, sourceDecorator: { shape: "openarrow", borderColor: "red" } }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.sourceDecorator.style.strokeColor`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, sourceDecorator: { shape: 'Arrow', style: { strokeColor: 'red' }, }, }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Sets the border width of the decorator Property:`connectors.sourceDecorator.borderWidth`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, sourceDecorator: { shape: "openarrow", borderWidth: 5 } }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.sourceDecorator.style.strokeWidth`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, sourceDecorator: { shape: 'Arrow', strokeWidth: 5 }, }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Defines to customize sourceDecorator appearance using user-defined CSS Property:`connectors.sourceDecorator.cssClass`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, sourceDecorator: { shape: "openarrow", cssClass: "hoverDecorator" } }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Not applicable
Sets the fill color of the source decorator Property:`connectors.sourceDecorator.fillColor`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, sourceDecorator: { shape: "openarrow", fillColor: "red" } }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.sourceDecorator.style.fill`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, sourceDecorator: { shape: 'Arrow', fill: 'black' }, }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Sets the height of the source decorator Property:`connectors.sourceDecorator.height`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, sourceDecorator: { width: 10, height: 10 } }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.sourceDecorator.height`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, sourceDecorator: { shape: 'Arrow', height: 10, width: 10 }, }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Defines the custom shape of the source decorator Property:`connectors.sourceDecorator.pathData`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, sourceDecorator: { shape: "path", pathData: "M 376.892, 225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z" } }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.sourceDecorator.pathData`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, sourceDecorator: { shape: 'Custom', pathData: "M 376.892,225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z" }, }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Defines the shape of the source decorator. Property:`connectors.sourceDecorator.shape`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, sourceDecorator: { shape: ej.datavisualization.Diagram.DecoratorShapes.Circle } }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.sourceDecorator.shape`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, sourceDecorator: { shape: 'Arrow', }, }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Defines the width of the source decorator Property:`connectors.sourceDecorator.width`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, sourceDecorator: { shape: "openarrow", width: 10, height: 10 } }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.sourceDecorator.width`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, sourceDecorator: { shape: 'Arrow', width: 10, height: 10 }, }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Sets the source node of the connector Property:`connectors.sourceNode`

var node1 = { name: "source", offsetX: 100, offsetY: 100, width: 50, height: 50 }; var node2 = { name: "target", offsetX: 300, offsetY: 300, width: 50, height: 50 }; var connector = { name: "connector", sourceNode: "source", targetNode: "target" }; $("#diagramcontent").ejDiagram({ connectors: [connector], nodes:[ node1, node2 ] });
Property:`connectors.sourceID`

var nodes = [{ id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90 }, { id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90 } ]; var connectors = [{ id: 'connector', type: 'Straight', sourceID: 'source', targetID: 'target' }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors, nodes: nodes }); diagram.appendTo('#diagram');
Defines the space to be left between the source node and the source point of a connector Property:`connectors.sourcePadding`

var node1 = { name: "source", offsetX: 100, offsetY: 100, width: 50, height: 50 }; var node2 = { name: "target", offsetX: 300, offsetY: 300, width: 50, height: 50 }; var connector = { name: "connector", sourceNode: "source", targetNode: "target", sourcePadding: 2, targetPadding: 2 }; $("#diagramcontent").ejDiagram({ connectors: [connector], nodes: [node1, node2] });
Property:`connectors.hitPadding`

var nodes = [{ id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90 }, { id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90 } ]; var connectors = [{ id: 'connector', type: 'Straight', hitPadding: 2 sourceID: 'source', targetID: 'target' }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors, nodes: nodes }); diagram.appendTo('#diagram');
Describes the start point of the connector Property:`connectors.sourcePoint`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 } }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.sourcePoint`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Sets the source port of the connector Property:`connectors.sourcePort`

var node1 = { name: "source", offsetX: 100, offsetY: 100, width: 50, height: 50, ports: [{ name: "port", offset: { x: 1, y: 0.5 } }] }; var node2 = { name: "target", offsetX: 200, offsetY: 200, width: 50, height: 50, ports: [{ name: "port1", offset: { x: 0, y: 0.5 } }] }; var connector = { name: "connector", sourceNode: "source", targetNode: "target", sourcePort: "port", targetPort: "port1" }; $("#diagramcontent").ejDiagram({ connectors: [connector], nodes: [node1, node2] });
Property:`connectors.sourcePortID`

var nodeport1 = { id: ‘port’, shape: ‘Square’, offset: { x: 1, y: 0.5 } }; var nodeport2 = { id: ‘port1’, shape: ‘Square’, offset: { x: 0, y: 0.5 } }; var nodes = [{ id: ‘source’, width: 60, height: 60, offsetX: 75, offsetY: 90, ports: [nodeport1] }, { id: ‘target’, width: 75, height: 70, offsetX: 210, offsetY: 90, ports: [nodeport2] } ];

var connectors = [{ id: ‘connector’, type: ‘Straight’, sourceID: ‘source’, targetID: ‘target’, sourcePortID: ‘port’, targetPortID: ‘port1’, }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors, nodes: nodes }); diagram.appendTo(‘#diagram’);

Defines the target decorator of the connector Property:`connectors.targetDecorator`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, targetDecorator: { shape: "openarrow" } }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.targetDecorator`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, targetDecorator: { shape: 'Arrow', }, }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Sets the border color of the target decorator Property:`connectors.targetDecorator.borderColor`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, targetDecorator: { shape: "openarrow", borderColor: "red" } }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.targetDecorator.style.strokeColor`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, targetDecorator: { shape: 'Arrow', style: { strokeColor: 'red' }, }, }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Sets the border width of the decorator Property:`connectors.targetDecorator.borderWidth`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, targetDecorator: { shape: "openarrow", borderWidth: 5 } }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.targetDecorator.style.strokeWidth`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, targetDecorator: { shape: 'Arrow', strokeWidth: 5 }, }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Defines to customize target Decorator appearance using user-defined CSS Property:`connectors.targetDecorator.cssClass`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, targetDecorator: { shape: "openarrow", cssClass: "hoverDecorator" } }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Not applicable
Sets the fill color of the target decorator Property:`connectors.targetDecorator.fillColor`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, targetDecorator: { shape: "openarrow", fillColor: "red" } }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.targetDecorator.style.fill`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, targetDecorator: { shape: 'Arrow', fill: 'black' }, }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Sets the height of the target decorator Property:`connectors.targetDecorator.height`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, targetDecorator: { width: 10, height: 10 } }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.targetDecorator.height`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, targetDecorator: { shape: 'Arrow', height: 10, width: 10 }, }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Defines the custom shape of the target decorator Property:`connectors.targetDecorator.pathData`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, targetDecorator: { shape: "path", pathData: "M 376.892,225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z" } }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.targetDecorator.pathData`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, targetDecorator: { shape: 'Custom', pathData: "M 376.892,225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z" }, }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Defines the shape of the target decorator. Property:`connectors.targetDecorator.shape`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, targetDecorator: { shape: ej.datavisualization.Diagram.DecoratorShapes.Circle } }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.targetDecorator.shape`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, targetDecorator: { shape: 'Arrow', }, }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Defines the width of the target decorator Property:`connectors.targetDecorator.width`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, targetDecorator: { shape: "openarrow", width: 10, height: 10 } }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.targetDecorator.width`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 }, targetDecorator: { shape: 'Arrow', width: 10, height: 10 }, }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Sets the target node of the connector Property:`connectors.targetNode`

var node1 = { name: "source", offsetX: 100, offsetY: 100, width: 50, height: 50 }; var node2 = { name: "target", offsetX: 300, offsetY: 300, width: 50, height: 50 }; var connector = { name: "connector", sourceNode: "source", targetNode: "target" }; $("#diagramcontent").ejDiagram({ connectors: [connector], nodes: [node1, node2] });
Property:`connectors.targetID`

var nodes = [{ id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90 }, { id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90 } ]; var connectors = [{ id: 'connector', type: 'Straight', sourceID: 'source', targetID: 'target' }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors, nodes: nodes }); diagram.appendTo('#diagram');
Defines the space to be left between the target node and the target point of a connector Property:`connectors.targetPadding`

var node1 = { name: "source", offsetX: 100, offsetY: 100, width: 50, height: 50 }; var node2 = { name: "target", offsetX: 300, offsetY: 300, width: 50, height: 50 }; var connector = { name: "connector", sourceNode: "source", targetNode: "target", sourcePadding: 2, targetPadding: 2 }; $("#diagramcontent").ejDiagram({ connectors: [connector], nodes: [node1, node2] });
Property:`connectors.hitPadding`

var nodes = [{ id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90 }, { id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90 } ]; var connectors = [{ id: 'connector', type: 'Straight', hitPadding: 2 sourceID: 'source', targetID: 'target' }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors, nodes: nodes }); diagram.appendTo('#diagram');
Describes the start point of the connector Property:`connectors.targetPoint`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 } }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.targetPoint`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Sets the target port of the connector Property:`connectors.targetPort`

var node1 = { name: "source", offsetX: 100, offsetY: 100, width: 50, height: 50, ports: [{ name: "port", offset: { x: 1, y: 0.5 } }] }; var node2 = { name: "target", offsetX: 200, offsetY: 200, width: 50, height: 50, ports: [{ name: "port1", offset: { x: 0, y: 0.5 } }] }; var connector = { name: "connector", sourceNode: "source", targetNode: "target", sourcePort: "port", targetPort: "port1" }; $("#diagramcontent").ejDiagram({ connectors: [connector], nodes: [node1, node2] });
Property:`connectors.targetPortID`

var nodeport1 = { id: ‘port’, shape: ‘Square’, offset: { x: 1, y: 0.5 } }; var nodeport2 = { id: ‘port1’, shape: ‘Square’, offset: { x: 0, y: 0.5 } }; var nodes = [{ id: ‘source’, width: 60, height: 60, offsetX: 75, offsetY: 90, ports: [nodeport1] }, { id: ‘target’, width: 75, height: 70, offsetX: 210, offsetY: 90, ports: [nodeport2] } ];

var connectors = [{ id: ‘connector’, type: ‘Straight’, sourceID: ‘source’, targetID: ‘target’, sourcePortID: ‘port’, targetPortID: ‘port1’, }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors, nodes: nodes }); diagram.appendTo(‘#diagram’);

Defines the tooltip that should be shown when the mouse hovers over connector Property:`connectors.tooltip`

var tooltip = { templateId: "mouseovertooltip", alignment: { horizontal: "center", vertical: "bottom" } }; var ConnectorConstraints = ej.datavisualization.Diagram.ConnectorConstraints; var connector = { name: "flow", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, constraints: ConnectorConstraints.Default & ~ConnectorConstraints.InheritTooltip, tooltip: tooltip }; $("#diagramcontent").ejDiagram({ connectors: [connector] }) < script type = "text/x-jsrender" id = "mouseovertooltip" > < div style = "background-color: #F08080; color: white; white-space: nowrap; height: 20px" > < span style = "padding: 5px;" > < /span> < /div> < /script> var tooltip = { templateId: "mouseovertooltip", alignment: { horizontal: "center", vertical: "bottom" } }; var ConnectorConstraints = ej.datavisualization.Diagram.ConnectorConstraints; var connector = { name: "flow", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, constraints: ConnectorConstraints.Default & ~ConnectorConstraints.InheritTooltip, tooltip: tooltip }; $("#diagramcontent").ejDiagram({ connectors: [connector] });;
Property:`connectors.tooltip`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, constraints: ConnectorConstraints.Default | ConnectorConstraints.Tooltip, tooltip: { content: 'Connector', position: 'TopCenter', showTipPointer: true, }, }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Sets the vertical alignment of connector Property:`connectors.verticalAlign`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 150, y: 150 }, verticalAlign: ej.datavisualization.Diagram.VerticalAlignment.Bottom }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Not applicable
Enables or disables the visibility of connector Property:`connectors.visible`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, visible: true }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.visible`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, visible: true }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Sets the z-index of the connector Property:`connectors.zOrder`

var connector = { name: "connector", sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, zOrder: 1000 }; $("#diagramcontent").ejDiagram({ connectors: [connector] });
Property:`connectors.zIndex`

var connectors = [{ id: 'connector', type: 'Straight', sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 200, y: 200 }, zIndex: -1 }]; var diagram = new ej.diagrams.Diagram({ connectors: connectors }); diagram.appendTo('#diagram');
Binds the custom JSON data with connector properties Property:`connectors.connectorTemplate`

var data = [{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" }, { "Id": "E2", "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ]; $("#diagramcontent").ejDiagram({ dataSourceSettings: { id: "Id", parent: "ReportingPerson", dataSource: data }, connectorTemplate: "connectorTemplate" });

function connectorTemplate(diagram, connector) { if (connector.sourceNode && connector.targetNode) { connector.linecolor = “green”; } }

Not applicable
Enables/Disables the default behaviors of the diagram Property:`constraints`

var DiagramConstraints = ej.datavisualization.Diagram.DiagramConstraints; $("#diagramcontent").ejDiagram({ constraints: DiagramConstraints.Default | DiagramConstraints.Bridging });
Property:`constraints`

var diagram = new ej.diagrams.Diagram({ constraints: DiagramConstraints.Default | DiagramConstraints.Bridging }); diagram.appendTo('#diagram');

ContextMenu

Behaviour API in Essential JS 1 API in Essential JS 2
Defines the collection of context menu items Property:`contextMenu.items`

var menuitems = [{ "name": "hyperLink", "text": "Hyperlink", "image": "", "style": "" }]; var contextMenu = { items: menuitems }; $("#diagramcontent").ejDiagram({ contextMenu: contextMenu });
Property:`contextMenuSettings.items`

var diagram = new ej.diagrams.Diagram({ contextMenuSettings: { show: true, items: [{ text: 'delete', id: 'delete', target: '.e-diagramcontent', iconCss: 'e-copy' }], }, }); diagram.appendTo('#diagram');
Defines the text for the collection of context menu item Property:`contextMenu.items.text`

var menuitems = [{ "text": "ZoomIn" }]; var contextMenu = { items: menuitems }; $("#diagramcontent").ejDiagram({ contextMenu: contextMenu });
Property:`contextMenuSettings.items.text`

var diagram = new ej.diagrams.Diagram({ contextMenuSettings: { show: true, items: [{ text: 'ZoomIn' }], }, }); diagram.appendTo('#diagram');
Defines the name for the collection of context menu items Property:`contextMenu.items.name`

var menuitems = [{ "name": "hyperLink" }]; var contextMenu = { items: menuitems }; $("#diagramcontent").ejDiagram({ contextMenu: contextMenu });
Property:`contextMenuSettings.items.id`

var diagram = new ej.diagrams.Diagram({ contextMenuSettings: { show: true, items: [{ text: 'delete', id: 'delete' }] }, }); diagram.appendTo('#diagram');
Defines the image url for the collection of context menu items Property:`contextMenu.items.imageUrl`

var menuitems = [{ "name": "zoomin", "text": "ZoomIn", "imageUrl": "Images/zoomin.png", "style": "" }]; var contextMenu = { items: menuitems }; $("#diagramcontent").ejDiagram({ contextMenu: contextMenu });
Property:`contextMenuSettings.items.url`

var diagram = new ej.diagrams.Diagram({ contextMenuSettings: { show: true, items: [{ 'id': 'zoomin', 'text': 'ZoomIn', 'url': 'Images/zoomin.png', }], }, }); diagram.appendTo('#diagram');
Defines the cssClass for the collection of context menu items Property:`contextMenu.items.cssClass`

var menuitems = [{ "name": "zoomin", "text": "ZoomIn", "imageUrl": "Images/zoomin.png", "cssClass": "menu", "style": "" }]; var contextMenu = { items: menuitems }; $("#diagramcontent").ejDiagram({ contextMenu: contextMenu });
Property:`contextMenuSettings.items.iconCss`

var diagram = new ej.diagrams.Diagram({ contextMenuSettings: { show: true, items: [{ text: 'delete', id: 'delete', target: '.e-diagramcontent', iconCss: 'e-copy' }], }, }); diagram.appendTo('#diagram');
Defines the collection of sub items for the context menu items Property:`contextMenu.items.subItems`

$("#diagramcontent").ejDiagram({ contextMenu: { items: [{ name: "zoom", text: "Zoom", subItems: [{ name: "zoomIn", text: "ZoomIn" }, { name: "zoomOut", text: "ZoomOut" }] }] } });
Property:`contextMenuSettings.items`

var diagram = new ej.diagrams.Diagram({ contextMenuSettings: { show: true, items: [{ text: 'Zoom', id: 'zoom', items: [{ name: "zoomIn", text: "ZoomIn" }, { name: "zoomOut", text: "ZoomOut" }] }], showCustomMenuOnly: false, }, }); diagram.appendTo('#diagram');
Set whether to display the default context menu items or not Property:`contextMenu.showCustomMenuItemsOnly`

var contextMenu = { showCustomMenuItemsOnly: true }; $("#diagramcontent").ejDiagram({ contextMenu: contextMenu });
Property:`contextMenuSettings.showCustomMenuOnly`

var diagram = new ej.diagrams.Diagram({ contextMenuSettings: { showCustomMenuOnly: false, }, }); diagram.appendTo('#diagram');
Specifies separator between the menu items Not applicable Property:`contextMenuSettings.items.separator`

var diagram = new ej.diagrams.Diagram({ contextMenuSettings: { show: true, items: [{ text: 'Save', id: 'save', target: '.e-diagramcontent', iconCss: 'e-save', separator: true }, { text: 'Load', id: 'load', target: '.e-diagramcontent', iconCss: 'e-load' }, }, }); diagram.appendTo('#diagram');
Define the target to show the menu item. Not applicable Property:`contextMenuSettings.items.target`

var diagram = new ej.diagrams.Diagram({ contextMenuSettings: { show: true, items: [{ text: 'delete', id: 'delete', target: '.e-diagramcontent', iconCss: 'e-copy' }], showCustomMenuOnly: false, }, }); diagram.appendTo('#diagram');
Enables/Disables the context menu items Not applicable Property:`contextMenuSettings.show`

var diagram = new ej.diagrams.Diagram({ contextMenuSettings: { show: true, items: [{ text: 'delete', id: 'delete', target: '.e-diagramcontent', iconCss: 'e-copy' }], showCustomMenuOnly: false, }, }); diagram.appendTo('#diagram');

DataSourceSettings

Behaviour API in Essential JS 1 API in Essential JS 2
Defines the data source either as a collection of objects or as an instance of ej.DataManager Property:`dataSourceSettings.dataSource`

var data = [{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" }, { "Id": "E2", "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];

$(“#diagramcontent”).ejDiagram({ dataSourceSettings: { dataSource: data } });

Property:`dataSourceSettings.dataManager`

var items = [{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" }, { "Id": "E2", "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ]; var diagram = new ej.diagrams.Diagram({ dataSourceSettings: { dataManager: items }, }); diagram.appendTo('#diagram');
Sets the unique id of the data source items Property:`dataSourceSettings.id`

var data = [{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" }, { "Id": "E2", "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];

$(“#diagramcontent”).ejDiagram({ dataSourceSettings: { id: “Id”, dataSource: data } });

Property:`dataSourceSettings.id`

var items = [{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" }, { "Id": "E2", "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ]; var diagram = new ej.diagrams.Diagram({ dataSourceSettings: { id: 'Id', dataManager: items }, }); diagram.appendTo('#diagram');
Defines the parent id of the data source item Property:`dataSourceSettings.parent`

var data = [{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" }, { "Id": "E2", "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];

$(“#diagramcontent”).ejDiagram({ dataSourceSettings: { id: “Id”, parent: “ReportingPerson”, dataSource: data } });

Property:`dataSourceSettings.parentId`

var items = [{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" }, { "Id": "E2", "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ]; var diagram = new ej.diagrams.Diagram({ dataSourceSettings: { id: 'Id', parentId: 'ReportingPerson', dataManager: items }, }); diagram.appendTo('#diagram');
Describes query to retrieve a set of data from the specified datasource Property:`dataSourceSettings.query`

$("#diagramcontent").ejDiagram({ dataSourceSettings: { dataSource: ej.DataManager({ url: "http://mvc.syncfusion.com/Services/Northwnd.svc/" }), query: ej.Query().from("Employees").select("EmployeeID,ReportsTo,FirstName"), tableName: "Employees", id: "EmployeeID", parent: "ReportsTo" } });
Not applicable
Sets the unique id of the root data source item Property:`dataSourceSettings.root`

var data = [{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" }, { "Id": "E2", "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];

$(“#diagramcontent”).ejDiagram({ dataSourceSettings: { id: “Id”, parent: “ReportingPerson”, root: “E1”, dataSource: data } });

Property:`dataSourceSettings.root`

var items = [{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" }, { "Id": "E2", "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ]; var diagram = new ej.diagrams.Diagram({ dataSourceSettings: { id: 'Id', parentId: 'ReportingPerson', dataManager: items, root: 'E1' }, }); diagram.appendTo('#diagram');
Describes the name of the table on which the specified query has to be executed Property:`dataSourceSettings.tableName`

$("#diagramcontent").ejDiagram({ dataSourceSettings: { dataSource: ej.DataManager({ url: "http://mvc.syncfusion.com/Services/Northwnd.svc/" }), query: ej.Query().from("Employees").select("EmployeeID,ReportsTo,FirstName"), //Table name tableName: "Employees", id: "EmployeeID", parent: "ReportsTo" } });
Not applicable
Specifies the method name which is used to get the updated data from client side to the server side Property:`dataSourceSettings.crudAction`

$("#diagramcontent").ejDiagram({ dataSourceSettings: { id: "Name", crudAction: { read: http://js.syncfusion.com/demos/ejservices/api/Diagram/GetNodes } } });
Not applicable
Specifies the create method which is used to get the nodes to be added from client side to the server side Property:`dataSourceSettings.crudAction.create`

$("#diagramcontent").ejDiagram({ dataSourceSettings: { id: "Name", crudAction: { create: "http://js.syncfusion.com/demos/ejservices/api/Diagram/AddNodes", } } });
Not applicable
Specifies the update method which is used to get the updated data from client side to the server side Property:`dataSourceSettings.crudAction.update`

$("#diagramcontent").ejDiagram({ dataSourceSettings: { id: "Name", crudAction: { update: "http://js.syncfusion.com/demos/ejservices/api/Diagram/UpdateNodes", } } });
Not applicable
Specifies the destroy method which is used to get the deleted items data from client side to the server side Property:`dataSourceSettings.crudAction.destroy`

$("#diagramcontent").ejDiagram({ dataSourceSettings: { id: "Name", crudAction: { destroy: "http://js.syncfusion.com/demos/ejservices/api/Diagram/DeleteNodes" } } });
Not applicable
Specifies the read method to get the created nodes from client side to the server side Property:`dataSourceSettings.crudAction.read`

$("#diagramcontent").ejDiagram({ dataSourceSettings: { id: "Name", crudAction: { read: http://js.syncfusion.com/demos/ejservices/api/Diagram/GetNodes } } });
Not applicable
Defines the data source either as a collection of objects or as an instance of ej.DataManager Property:`dataSourceSettings.customFields`

$("#diagramcontent").ejDiagram({ dataSourceSettings: { id: 'Name', customFields: [ "Description", "Color" ] } });
Property:`dataSourceSettings.data`

var diagram = new ej.diagrams.Diagram({ dataSourceSettings: { id: 'Name', customFields: [ "Description", "Color" ] }, }); diagram.appendTo('#diagram');
Defines the data source either as a collection of objects or as an instance of ej.DataManager Property:`dataSourceSettings.connectionDataSource`

$("#diagramcontent").ejDiagram({ dataSourceSettings: { id: "Name", connectionDataSource: { id: "Name" } } });
Not applicable
Sets the datasource for the connection datasource settings items Property:`dataSourceSettings.connectionDataSource.dataSource`

var data = [{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" }, { "Id": "E2", "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ]; $("#diagramcontent").ejDiagram({ dataSourceSettings: { id: "Name", connectionDataSource: { id: "Name", dataSource: data } } });
Not applicable
Sets the unique id of the connection data source item Property:`dataSourceSettings.connectionDataSource.id`

$("#diagramcontent").ejDiagram({ dataSourceSettings: { id: "Name", connectionDataSource: { id: "Name" } } });
Not applicable
Sets the source node of the connection data source item Property:`dataSourceSettings.connectionDataSource.sourceNode`

$("#diagramcontent").ejDiagram({ dataSourceSettings: { id: "Name", connectionDataSource: { id: "Name", sourceNode: "sourceNode", } } });
Not applicable
Sets the target node of the connection data source item Property:`dataSourceSettings.connectionDataSource.targetNode`

$("#diagramcontent").ejDiagram({ dataSourceSettings: { id: "Name", connectionDataSource: { id: "Name", targetNode: "targetNode" } } });
Not applicable
Sets the sourcePointX value of the connection data source item Property:`dataSourceSettings.connectionDataSource.sourcePointX`

$("#diagramcontent").ejDiagram({ dataSourceSettings: { id: "Name", connectionDataSource: { id: "Name", sourcePointX:200 } } });
Not applicable
Sets the sourcePointY value of the connection data source item Property:`dataSourceSettings.connectionDataSource.sourcePointY`

$("#diagramcontent").ejDiagram({ dataSourceSettings: { id: "Name", connectionDataSource: { id: "Name", sourcePointY:200 } } });
Not applicable
Sets the targetPoint-x value of the connection data source item Property:`dataSourceSettings.connectionDataSource.targetPointX`

$("#diagramcontent").ejDiagram({ dataSourceSettings: { id: "Name", connectionDataSource: { id: "Name", targetPointX:200 } } });
Not applicable
Sets the targetPoint-y value of the connection data source item Property:`dataSourceSettings.connectionDataSource.targetPointY`

$("#diagramcontent").ejDiagram({ dataSourceSettings: { id: "Name", connectionDataSource: { id: "Name", targetPointY:200 } } });
Not applicable
Specifies the method name which is used to get updated connectors from client side to the server side Property:`dataSourceSettings.connectionDataSource.crudAction`

$("#diagramcontent").ejDiagram({ dataSourceSettings: { id: "Name", connectionDataSource: { id: "Name", sourceNode: "sourceNode", targetNode: "targetNode", crudAction: { read: http://js.syncfusion.com/demos/ejservices/api/Diagram/GetConnectors" } } } });
Not applicable
Specifies the create method which is used to get the connectors to be added from client side to the server side Property:`dataSourceSettings.connectionDataSource.crudAction.create`

$("#diagramcontent").ejDiagram({ dataSourceSettings: { id: "Name", connectionDataSource: { id: "Name", sourceNode: "sourceNode", targetNode: "targetNode", crudAction: { create: http://js.syncfusion.com/demos/ejservices/api/Diagram/AddConnectors", } } } });
Not applicable
Specifies the update method which is used to get the updated connectors from client side to the server side Property:`dataSourceSettings.connectionDataSource.crudAction.update`

$("#diagramcontent").ejDiagram({ dataSourceSettings: { id: "Name", connectionDataSource: { id: "Name", crudAction: { update: http://js.syncfusion.com/demos/ejservices/api/Diagram/UpdateConnectors", } } } });
Not applicable
Specifies the destroy method which is used to get the deleted items data from client side to the server side Property:`dataSourceSettings.connectionDataSource.crudAction.destroy`

$("#diagramcontent").ejDiagram({ dataSourceSettings: { id: "Name", connectionDataSource: { id: "Name", crudAction: { destroy: http://js.syncfusion.com/demos/ejservices/api/Diagram/DeleteConnectors" } } } });
Not applicable
Specifies the read method which is used to get the data from client side to the server side Property:`dataSourceSettings.connectionDataSource.crudAction.read`

$("#diagramcontent").ejDiagram({ dataSourceSettings: { id: "Name", connectionDataSource: { id: "Name", crudAction: { read: http://js.syncfusion.com/demos/ejservices/api/Diagram/GetConnectors" } } } });
Not applicable
Specifies the custom fields to get the updated data from client side to the server side Property:`dataSourceSettings.connectionDataSource.customFields`

$("#diagramcontent").ejDiagram({ dataSourceSettings: { id: "Name", connectionDataSource: { id: "Name", customFields: [ "Description", "Color"] } } });
Not applicable
Binds the custom data with node model Property:`dataSourceSettings.doBinding`

$("#diagramcontent").ejDiagram({ width: 1500, height: 2500, layout: { type: 'HierarchicalTree', verticalSpacing: 40 }, dataSourceSettings: { id: 'Name', parentId: 'ReportingPerson', dataManager: items, doBinding: (nodeModel: NodeModel, data: object, diagram: Diagram) => { nodeModel.annotations = [{ content: data['Name'], margin: { top: 10 } }]; } } });
Not applicable

DefaultSettings

Behaviour API in Essential JS 1 API in Essential JS 2
Initializes the default values for nodes and connectors Property:`defaultSettings.node`

$("#diagramcontent").ejDiagram({ defaultSettings: { node: { fillColor:"red"} } });
Property:`getNodeDefaults`

var diagram = new ej.diagrams.Diagram({ getNodeDefaults: (object: Node) => { object.style = { fill: 'lightgrey', strokeColor: 'none', strokeWidth: 2 }; return object; } }); diagram.appendTo('#diagram');
Initializes the default connector properties Property:`defaultSettings.connector`

$("#diagramcontent").ejDiagram({ defaultSettings: { connector: { lineColor:"red", lineWidth:4, lineDashArray:"2,2" } } });
Property:`getConnectorDefaults`

var diagram = new ej.diagrams.Diagram({ getConnectorDefaults: (connector: ConnectorModel) => { connector= { targetDecorator:{shape 'None'}, type : 'Orthogonal'}; return connector; } }); diagram.appendTo('#diagram');
Initializes the default properties of groups Property:`defaultSettings.group`

$("#diagramcontent").ejDiagram({ defaultSettings: { group: {constraints: ej.datavisualization.Diagram.NodeConstraints.Default & ~ej.datavisualization.Diagram.NodeConstraints.Drag } } });
Not applicable

DrawType

Behaviour API in Essential JS 1 API in Essential JS 2
Sets the type of JSON object to be drawn through drawing tool Property:`drawType`

$("#diagramcontent").ejDiagram({ drawType:{type:"node"} });
Property:`drawingObject`

var diagram = new ej.diagrams.Diagram({ drawingObject : {id: 'connector', type: 'Straight'} }); diagram.appendTo('#diagram');

EnableAutoScroll

Behaviour API in Essential JS 1 API in Essential JS 2
Enables or disables auto scroll in diagram Property:`enableAutoScroll`

$("#diagramcontent").ejDiagram({ enableAutoScroll: false });
Property:`canAutoScroll`

var diagram = new ej.diagrams.Diagram({ canAutoScroll: true }); diagram.appendTo('#diagram');

EnableContextMenu

Behaviour API in Essential JS 1 API in Essential JS 2
Enables or disables diagram context menu Property:`enableContextMenu`

$("#diagramcontent").ejDiagram({ enableContextMenu: false });
Property:`contextMenuSettings.show`

var diagram = new ej.diagrams.Diagram({ contextMenuSettings: { show: true } }); diagram.appendTo('#diagram');

GetCustomCursor

Behaviour API in Essential JS 1 API in Essential JS 2
Enable or disable rendering component with custom cursor Not applicable Property:`getCustomCursor`

function getCustomCursor(action: string, active: boolean): string { var cursor; if (active && action === 'Drag') { cursor = '-webkit-grabbing'; } else if (action === 'Drag') { cursor = '-webkit-grabbing' } return cursor; } var nodes = [{ id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100, }, { id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100, shape: { type: 'Basic', shape: 'Ellipse' }, }]; var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', nodes: nodes, getCustomCursor: getCustomCursor }); diagram.appendTo('#diagram');

GetCustomProperty

Behaviour API in Essential JS 1 API in Essential JS 2
Allows to get the custom properties that have to be serialized Not applicable Property:`getCustomProperty`

var nodes = [{ id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100, }, { id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100, shape: { type: 'Basic', shape: 'Ellipse' }, }]; var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', nodes: nodes, getCustomProperty: (key: string) => { if (key === 'nodes') { return ['description']; } return null; } }); diagram.appendTo('#diagram');

GetDescription

Behaviour API in Essential JS 1 API in Essential JS 2
Allows to get the custom description Not applicable Property:`getDescription`

function getAccessibility(object: ConnectorModel, diagram: Diagram): string { var value; if (object instanceof Connector) { value = 'clicked on Connector'; } else { value = undefined; } return value; } var nodes = [{ id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100, }, { id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100, shape: { type: 'Basic', shape: 'Ellipse' }, }]; var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', nodes: nodes, getDescription: getAccessibility }); diagram.appendTo('#diagram');

GetCustomTool

Behaviour API in Essential JS 1 API in Essential JS 2
Allows to get the custom tool Not applicable Property:`getCustomTool`

function getTool(action: string): ToolBase { var tool; if (action === 'userHandle') { tool = new CloneTool(diagram.commandHandler, true); } return tool; } class CloneTool extends ToolBase { public mouseDown(args: MouseEventArgs): void { super.mouseDown(args); diagram.copy(); diagram.paste(); } } var nodes = [{ id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100, }, { id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100, shape: { type: 'Basic', shape: 'Ellipse' }, }]; var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', nodes: nodes, getCustomTool: getTool }); diagram.appendTo('#diagram');

Height

Behaviour API in Essential JS 1 API in Essential JS 2
Specifies the height of the diagram Property:`height`

$("#diagramcontent").ejDiagram({ height:"500", width:"500" });
Property:`height`

var diagram = new ej.diagrams.Diagram({ height: 1000 }); diagram.appendTo('#diagram');

HistoryManager

Behaviour API in Essential JS 1 API in Essential JS 2
A method that takes a history entry as argument and returns whether the specific entry can be popped or not Property:`historyManager.canPop`

var diagram = $("#diagramcontent").ejDiagram("instance"); var entry = { object: node, prevState: node.empInfo }; diagram.model.historyManager.push(entry); var value = { role: "New role" }; node.empInfo = value;

if(diagram.model.historyManager.canPop(entry)){ diagram.model.historyManager.pop(); }

Not applicable
A method that ends grouping the changes Property:`historyManager.closeGroupAction`

var group = diagram.model.selectedItems; diagram.model.historyManager.startGroupAction();

for (var i = 0; i < group.children.length; i++) { var option = {}; var item = group.children[i]; // Updates the fillColor for all the child elements. option.fillColor = args.style.backgroundColor; diagram.updateNode(item.name, option); }

diagram.model.historyManager.closeGroupAction();

Property:`historyList.endGroupAction`

var diagram = new ej.diagrams.Diagram({ nodes: [{ id: 'node1', offsetX: 100, offsetY: 100, width: 100, height: 100, }, { offsetX: 200, offsetY: 200, width: 100, height: 100, id: 'node2' }], connectors: [{ id: 'connector1', sourcePoint: { x: 100, y: 200 }, targetPoint: { x: 200, y: 300 }, type: 'Orthogonal' }] }); diagram.appendTo('#diagram'); var objects = []; objects.push(diagram.nodes[0], diagram.nodes[1], diagram.connectors[0]); diagram.historyList.startGroupAction(); diagram.distribute('Top', objects); diagram.distribute('Bottom', objects); diagram.distribute('BottomToTop', objects); diagram.historyList.endGroupAction();
A method that removes the history of a recent change made in diagram Property:`historyManager.pop`

var diagram = $("#diagramcontent").ejDiagram("instance"); diagram.model.historyManager.pop();
Not applicable
A method that allows to track the custom changes made in diagram Property:`historyManager.push`

var diagram = $("#diagramcontent").ejDiagram("instance");

var entry = { object: node, prevState: node.empInfo }; diagram.model.historyManager.push(entry);

var value = { role: “New role” }; node.empInfo = value;

Property:`historyList.push`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }] }); diagram.appendTo('#diagram'); var object = diagram.nodes[0]; object['description'] = (document.getElementById('custom') as HTMLSelectElement).value; var entry = { undoObject: object }; diagram.historyList.push(entry); diagram.dataBind();
Defines what should be happened while trying to restore a custom change Property:`historyManager.redo`

$("#diagramcontent").ejDiagram({ historyManager: { undo: customUndoRedo, redo: customUndoRedo } });

function customUndoRedo(args) { var diagram = $(“#diagramcontent”).ejDiagram(“instance”); var node = args.object; var currentState = node.empInfo;

node.empInfo = args.prevState;

args.prevState = currentState;

}

Property:`historyList.redo`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }] }); diagram.appendTo('#diagram'); var node1 = diagram.nodes[0]; node1['customName'] = 'customNode'; entry = { undoObject: node1 }; diagram.historyList.push(entry); diagram.historyList.undo = function(args: HistoryEntry) { args.redoObject = cloneObject(args.undoObject) as NodeModel; args.undoObject['customName'] = 'customNodeChange'; } diagram.historyList.redo = function(args: HistoryEntry) { var current = cloneObject(args.undoObject) as NodeModel; args.undoObject['customName'] = args.redoObject['customName']; args.redoObject = current; }
Gets the number of redo actions to be stored on the history manager. Its an read-only property and the collection should not be modified Property:`historyManager.redoStack`

var diagram = $("#diagramcontent").ejDiagram("instance"); diagram.model.historyManager.redoStack();
Property:`historyList.redoStack`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }] }); diagram.appendTo('#diagram'); diagram.historyList.redoStack();
Restricts the undo and redo actions to a certain limit Property:`historyManager.stackLimit`

var diagram = $("#diagramcontent").ejDiagram("instance"); diagram.model.historyManager.stackLimit();
Not applicable
A method that starts to group the changes to revert/restore them in a single undo or redo Property:`historyManager.startGroupAction`

var group = diagram.model.selectedItems

diagram.model.historyManager.startGroupAction();

for (var i = 0; i < group.children.length; i++) { var option = {}; var item = group.children[i]; option.fillColor = args.style.backgroundColor; diagram.updateNode(item.name, option); }

diagram.model.historyManager.closeGroupAction();

Property:`historyList.startGroupAction`

var diagram = new ej.diagrams.Diagram({ nodes: [{ id: 'node1', offsetX: 100, offsetY: 100, width: 100, height: 100, }, { offsetX: 200, offsetY: 200, width: 100, height: 100, id: 'node2' }], connectors: [{ id: 'connector1', sourcePoint: { x: 100, y: 200 }, targetPoint: { x: 200, y: 300 }, type: 'Orthogonal' }] }); diagram.appendTo('#diagram'); var objects = []; objects.push(diagram.nodes[0], diagram.nodes[1], diagram.connectors[0]); diagram.historyList.startGroupAction(); diagram.distribute('Top', objects); diagram.distribute('Bottom', objects); diagram.distribute('BottomToTop', objects); diagram.historyList.endGroupAction();
Defines what should be happened while trying to revert a custom change Property:`historyManager.undo`

$("#diagramcontent").ejDiagram({ historyManager: { undo: customUndoRedo, redo: customUndoRedo } });

function customUndoRedo(args) { var diagram = $(“#diagramcontent”).ejDiagram(“instance”); var node = args.object; var currentState = node.empInfo;

node.empInfo = args.prevState;

args.prevState = currentState;

}

Property:`historyList.undo`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }] }); diagram.appendTo('#diagram'); var node1 = diagram.nodes[0]; node1['customName'] = 'customNode'; entry = { undoObject: node1 }; diagram.historyList.push(entry); diagram.historyList.undo = function(args: HistoryEntry) { args.redoObject = cloneObject(args.undoObject) as NodeModel; args.undoObject['customName'] = 'customNodeChange'; } diagram.historyList.redo = function(args: HistoryEntry) { var current = cloneObject(args.undoObject) as NodeModel; args.undoObject['customName'] = args.redoObject['customName']; args.redoObject = current; }
Gets the number of undo actions to be stored on the history manager. Its an read-only property and the collection should not be modified Property:`historyManager.undoStack`

var diagram = $("#diagramcontent").ejDiagram("instance"); diagram.model.historyManager.undoStack();
Property:`historyList.undoStack`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }] }); diagram.appendTo('#diagram'); diagram.historyList.undoStack();
Set the current entry object Not applicable Property:`historyList.currentEntry`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }] }); diagram.appendTo('#diagram'); diagram.historyList.currentEntry();
Set the history entry can be undo Not applicable Property:`historyList.canUndo`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }] }); diagram.appendTo('#diagram'); diagram.historyList.canUndo = true;
Set the history entry can be redo Not applicable Property:`historyList.canRedo`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }] }); diagram.appendTo('#diagram'); diagram.historyList.canRedo = true;
Used to decide to stored the changes to history Property:`historyManager.canLog`

var diagram = $("#diagramcontent").ejDiagram("instance"); diagram.model.historyManager.canLog();
Property:`historyList.canLog`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }] }); diagram.appendTo('#diagram'); diagram.historyList.canLog = function (entry: HistoryEntry) { entry.cancel = true; return entry; }

LabelRenderingMode

Behaviour API in Essential JS 1 API in Essential JS 2
Defines the type of the rendering mode of label Property:`labelRenderingMode`

$("#diagramcontent").ejDiagram({ labelRenderingMode: "svg" });
Not applicable

Layout

Behaviour API in Essential JS 1 API in Essential JS 2
Specifies the custom bounds to arrange/align the layout Property:`layout.bounds`

$("#diagramcontent").ejDiagram({ layout: { bounds:{ x: 0, y: 0, width: 1000, height: 1000} }});
Property:`layout.bounds`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }], layout: { bounds: new Rect(0, 0, 500, 500) } }); diagram.appendTo('#diagram');
Defines the fixed node with reference to which, the layout will be arranged and fixed node will not be repositioned Property:`layout.fixedNode`

$("#diagramcontent").ejDiagram({ fixedNode: "node" });
Property:`layout.fixedNode`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }], layout: { fixedNode: 'node' } }); diagram.appendTo('#diagram');
Customizes the orientation of trees/sub trees Property:`layout.getLayoutInfo`

function getLayoutInfo(diagram, node, options) { options.orientation = "vertical"; options.type = "left"; offset = 10;};

$(“#diagramcontent”).ejDiagram({ layout: { getLayoutInfo:getLayoutInfo } });

Property:`layout.getLayoutInfo`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }], layout: { getLayoutInfo: (node: Node, tree: TreeInfo) => { if (!tree.hasSubTree) { tree.orientation = 'vertical'; } } } }); diagram.appendTo('#diagram');
Defines a method to customize the segments based on source and target nodes Property:`layout.getConnectorSegments`

function getConnectorSegment(diagram, node, options) { }; $("#diagramcontent").ejDiagram({layout: { getConnectorSegments:getConnectorSegment } });
Property:`layout.connectorSegments`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }], layout: { connectorSegments: 'Default' } }); diagram.appendTo('#diagram');
Sets the space to be horizontally left between nodes Property:`layout.horizontalSpacing`

$("#diagramcontent").ejDiagram({layout: { horizontalSpacing: 50 }});
Property:`layout.horizontalSpacing`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }], layout: { horizontalSpacing: 30 } }); diagram.appendTo('#diagram');
Defines the space to be left between layout bounds and layout Property:`layout.margin`

$("#diagramcontent").ejDiagram({ layout: { margin:{ left: 10, right: 10, top: 10, bottom: 10} }});
Property:`layout.margin`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, layout: { margin: { left: 50, top: 50, right: 0, bottom: 0 } } }); diagram.appendTo('#diagram');
Defines how to horizontally align the layout within the layout bounds Property:`layout.horizontalAlignment`

$("#diagramcontent").ejDiagram({ layout: { horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Center } });
Property:`layout.horizontalAlignment`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }], layout: { horizontalAlignment: 'Center' } }); diagram.appendTo('#diagram');
Defines how to vertically align the layout within the layout bounds Property:`layout.verticalAlignment`

$("#diagramcontent").ejDiagram({ layout: { verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Center } });
Property:`layout.verticalAlignment`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }], layout: { verticalAlignment: 'Center' } }); diagram.appendTo('#diagram');
Sets the orientation/direction to arrange the diagram elements Property:`layout.orientation`

$("#diagramcontent").ejDiagram({ layout: { orientation: ej.datavisualization.Diagram.LayoutOrientations.LeftToRight } });
Property:`layout.orientation`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }], layout: { orientation: 'TopToBottom',} }); diagram.appendTo('#diagram');
Sets the type of the layout based on which the elements will be arranged Property:`layout.type`

$("#diagramcontent").ejDiagram({ layout: { type: ej.datavisualization.Diagram.LayoutTypes.HierarchicalTree } s});
Property:`layout.type`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }], layout: { type: 'OrganizationalChart' } }); diagram.appendTo('#diagram');
Sets the space to be vertically left between nodes Property:`layout.verticalSpacing`

$("#diagramcontent").ejDiagram({ layout: { verticalSpacing: 50 }});
Property:`layout.verticalSpacing`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }], layout: { verticalSpacing: 30 } }); diagram.appendTo('#diagram');
Sets the value is used to define the root node of the layout Property:`layout.root`

$("#diagramcontent").ejDiagram({ layout: { root: 'rootNode' } });
Property:`layout.root`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }], layout: { root: 'rootNode' } }); diagram.appendTo('#diagram');
Defines how long edges should be, ideally. This will be the resting length for the springs Property:`layout.springFactor`

$("#diagramcontent").ejDiagram({ layout: { springFactor: 0.442 } });
Property:`layout.springFactor`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }], layout: { type: 'SymmetricalLayout', springLength: 80, springFactor: 0.8, maxIteration: 500, } }); diagram.appendTo('#diagram');
Defines how long edges should be, ideally. This will be the resting length for the springs Property:`layout.maxIteration`

$("#diagramcontent").ejDiagram({ layout: { maxIteration: 442 } });
Property:`layout.maxIteration`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }], layout: { type: 'SymmetricalLayout', springLength: 80, springFactor: 0.8, maxIteration: 500, } }); diagram.appendTo('#diagram');
Defines how long edges should be, ideally. This will be the resting length for the springs Property:`layout.springLength`

$("#diagramcontent").ejDiagram({ layout: { springLength: 80 } });
Property:`layout.springLength`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }], layout: { type: 'SymmetricalLayout', springLength: 80, springFactor: 0.8, maxIteration: 500, } }); diagram.appendTo('#diagram');
Sets how to define the connection direction (first segment direction & last segment direction) Not applicable Property:`layout.connectionDirection`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }], layout: { connectionDirection:'Auto', type: 'SymmetricalLayout', springLength: 80, springFactor: 0.8, maxIteration: 500, } }); diagram.appendTo('#diagram');
Enables/Disables animation option when a node is expanded/collapsed Not applicable Property:`layout.enableAnimation`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }], layout: { enableAnimation: true, orientation: 'TopToBottom', type: 'OrganizationalChart', margin: { top: 20 }, horizontalSpacing: 30, verticalSpacing: 30, } }); diagram.appendTo('#diagram');
Defines whether an object should be at the left/right of the mind map. Applicable only for the direct children of the root node Not applicable Property:`layout.getBranch`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }], layout: { type: 'MindMap', } }); diagram.appendTo('#diagram'); diagram.layout.getBranch = (node: NodeModel, nodes: NodeModel[]) => { return 'Left'; } diagram.dataBind();

Nodes

Behaviour API in Essential JS 1 API in Essential JS 2
Array of JSON objects where each object represents a node Property:`nodes`

var nodes = [{ name: "node1", width: 175, height: 60, offsetX:100, offsetY:100}]; $("#diagramcontent").ejDiagram({ nodes:nodes });
Property:`nodes`

var node = { offsetX: 250, offsetY: 250, width: 100, height: 100, }; var diagram = new ej.diagrams.Diagram({ nodes: [node] }); diagram.appendTo('#diagram');
Defines the type of BPMN Activity. Applicable, if the node is a BPMN activity Property:`nodes.activity`

var nodes = [{ type: "bpmn", shape: ej.datavisualization.Diagram.BPMNShapes.Activity, activity: ej.datavisualization.Diagram.BPMNActivity.SubProcess, width:50, height:50 }]; $("#diagramcontent").ejDiagram({ nodes:nodes });
Property:`nodes.shape.activity`

var node = { offsetX: 250, offsetY: 250, width: 100, height: 100, shape: { type: 'Bpmn', shape: 'Activity', activity: { activity: 'Task' }, }, }; var diagram = new ej.diagrams.Diagram({ nodes: [node] }); diagram.appendTo('#diagram');
To maintain additional information about nodes Property:`nodes.addInfo`

var addInfo = { TooltipData: "Shares the information with the customer" };

var node1 = { name: “node1”, addInfo: addInfo, offsetX:100, offsetY:100, width:50, height:50 };

var node2 = { type: “swimlane”, name: “swimlane”, addInfo: addInfo }; $(“#diagramcontent”).ejDiagram({nodes:[node1, node2]});

Property:`nodes.addInfo`

var node = { offsetX: 250, offsetY: 250, width: 100, height: 100, addInfo: { "borderColor": "black", "borderWidth": '1px' }, }; var diagram = new ej.diagrams.Diagram({ nodes: [node] }); diagram.appendTo('#diagram');
Defines the additional information of a process. It is not directly related to the message flows or sequence flows of the process Property:`nodes.annotation`

var nodes = [{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, type:"bpmn", shape: "activity", annotation: { text: "This is a BPMN Activity shape", width: 100, height: 50, angle: -45, length: 150, direction: "top" } }]; $("#diagramcontent").ejDiagram({ nodes:nodes });
Property:`nodes.shape.annotations`

var node = { offsetX: 250, offsetY: 250, width: 100, height: 100, shape: { type: 'Bpmn', shape: 'DataObject', dataObject: { collection: true, type: 'Input' }, annotations: [{ id: 'left', angle: 45, length: 150, text: 'Left', }] } }; var diagram = new ej.diagrams.Diagram({ nodes: [node] }); diagram.appendTo('#diagram');
Sets the angle between the BPMN shape and the annotation Property:`nodes.annotation.angle`

var nodes = [{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, type:"bpmn", shape: "activity", annotation: { text: "This is a BPMN Activity shape", width: 100, height: 50, angle: -45 } }]; $("#diagramcontent").ejDiagram({ nodes:nodes });
Property:`nodes.shape.annotations.angle`

var node = { offsetX: 250, offsetY: 250, width: 100, height: 100, shape: { type: 'Bpmn', shape: 'DataObject', dataObject: { collection: true, type: 'Input' }, annotations: [{ id: 'left', angle: 45, }] } }; var diagram = new ej.diagrams.Diagram({ nodes: [node] }); diagram.appendTo('#diagram');
Sets the direction of the text annotation Property:`nodes.annotation.direction`

var nodes = [{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, type:"bpmn", shape: "activity", annotation: { text: "This is a BPMN Activity shape", width: 100, height: 50, angle: -45, length: 150, direction: "top" } }]; $("#diagramcontent").ejDiagram({ nodes:nodes });
Not applicable
Sets the height of the text annotation Property:`nodes.annotation.height`

var nodes = [{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, type:"bpmn", shape: "activity", annotation: { text: "This is a BPMN Activity shape", width: 100, height: 50, } }]; $("#diagramcontent").ejDiagram({ nodes:nodes });
Property:`nodes.shape.annotations.height`

var node = { offsetX: 250, offsetY: 250, width: 100, height: 100, shape: { type: 'Bpmn', shape: 'DataObject', dataObject: { collection: true, type: 'Input' }, annotations: [{ id: 'left', text: 'Left', height: 50 }] } }; var diagram = new ej.diagrams.Diagram({ nodes: [node] }); diagram.appendTo('#diagram');
Sets the distance between the BPMN shape and the annotation Property:`nodes.annotation.length`

var nodes = [{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, type:"bpmn", shape: "activity", annotation: { text: "This is a BPMN Activity shape", width: 100, height: 50, length: 150 } }]; $("#diagramcontent").ejDiagram({ nodes:nodes });
Property:`nodes.shape.annotations.length`

var node = { offsetX: 250, offsetY: 250, width: 100, height: 100, shape: { type: 'Bpmn', shape: 'DataObject', dataObject: { collection: true, type: 'Input' }, annotations: [{ id: 'left', length: 150, text: 'Left', }] } }; var diagram = new ej.diagrams.Diagram({ nodes: [node] }); diagram.appendTo('#diagram');
Defines the additional information about the flow object in a BPMN Process Property:`nodes.annotation.text`

var nodes = [{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, type:"bpmn", shape: "activity", annotation: { text: "This is a BPMN Activity shape" } }]; $("#diagramcontent").ejDiagram({ nodes:nodes });
Property:`nodes.shape.annotations.text`

var node = { offsetX: 250, offsetY: 250, width: 100, height: 100, shape: { type: 'Bpmn', shape: 'DataObject', dataObject: { collection: true, type: 'Input' }, annotations: [{ text: 'Left', }] } }; var diagram = new ej.diagrams.Diagram({ nodes: [node] }); diagram.appendTo('#diagram');
Sets the width of the text annotation Property:`nodes.annotation.width`

var nodes = [{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, type:"bpmn", shape: "activity", annotation: { text: "This is a BPMN Activity shape", width: 100, height: 50 } }]; $("#diagramcontent").ejDiagram({ nodes:nodes });
Property:`nodes.shape.annotations.width`

var node = { offsetX: 250, offsetY: 250, width: 100, height: 100, shape: { type: 'Bpmn', shape: 'DataObject', dataObject: { collection: true, type: 'Input' }, annotations: [{ id: 'left', width: 45, text: 'Left', }] } }; var diagram = new ej.diagrams.Diagram({ nodes: [node] }); diagram.appendTo('#diagram');
Sets the id for the annotation Not applicable Property:`nodes.shape.annotations.id`

var node = { offsetX: 250, offsetY: 250, width: 100, height: 100, shape: { type: 'Bpmn', shape: 'DataObject', dataObject: { collection: true, type: 'Input' }, annotations: [{ id: 'left', text: 'Left', }] } }; var diagram = new ej.diagrams.Diagram({ nodes: [node] }); diagram.appendTo('#diagram');
Defines whether the group can be ungrouped or not Property:`nodes.canUngroup`

var node1 = { name: "node1", width: 50, height: 50, offsetX: 50, offsetY: 50, borderColor: "red", borderDashArray: "4,2" }; var node2 = { name: "node2", width: 50, height: 50, offsetX: 150, offsetY: 150, borderColor: "red", borderDashArray: "4,2" }; var group = { name: "group", children: [node1, node2], canUngroup: false }; $("#diagramcontent").ejDiagram({ nodes: [group] });
Not applicable
Array of JSON objects where each object represents a child node/connector Property:`nodes.children`

var node1 = { name: "node1", width: 50, height:50, offsetX:50, offsetY:50, borderColor: "red", borderDashArray: "4,2" }; var node2 = { name: "node2", width: 50, height: 50, offsetX: 150, offsetY: 150, borderColor: "red", borderDashArray: "4,2" };

var group = { name: “group”, children: [node1, node2] }; $(“#diagramcontent”).ejDiagram({ nodes: [group] });

Property:`nodes.children`

var node1 = { id: 'node1', offsetX: 250, offsetY: 250, width: 100, height: 100, }; var node2 = { id: 'node2', offsetX: 450, offsetY: 450, width: 100, height: 100, }; var group = { id: 'group', }; group.children = ['node1', 'node2']; var diagram = new ej.diagrams.Diagram({ nodes: [group] }); diagram.appendTo('#diagram');
Sets the type of UML classifier Property:`nodes.classifier`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Class }]; $("#diagramcontent").ejDiagram({ nodes:nodes });
Not applicable
Defines the name, attributes and methods of a Class. Applicable, if the node is a Class Property:`nodes.class`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Class, "class": { name: "Patient", } }]; $("#DiagramContent").ejDiagram({ nodes: nodes });
Not applicable
Sets the name of class Property:`nodes.class.name`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Class, "class": { name: "Patient", } }]; $("#DiagramContent").ejDiagram({ nodes: nodes });
Not applicable
Defines the collection of attributes Property:`nodes.class.attributes`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Class, "class": { name: "Patient", attributes: [{ name: "accepted"}] } }]; $("#DiagramContent").ejDiagram({ nodes: nodes });
Not applicable
Sets the name of the attribute Property:`nodes.class.attributes.name`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Class, "class": { name: "Patient", attributes: [{ name: "accepted" }] } }]; $("#DiagramContent").ejDiagram({ nodes: nodes });
Not applicable
Sets the data type of attribute Property:`nodes.class.attributes.type`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Class, "class": { name: "Patient", attributes: [{ name: "accepted", type: "Date" }] } }]; $("#DiagramContent").ejDiagram({ nodes: nodes });
Not applicable
Defines the visibility of the attribute Property:`nodes.class.attributes.scope`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Class, "class": { name: "Patient", attributes: [{ name: "accepted", type: "Date", scope:"protected" }] } }]; $("#DiagramContent").ejDiagram({ nodes: nodes });
Not applicable
Defines the collection of methods of a Class Property:`nodes.class.methods`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Class, "class": { name: "Patient", methods: [{ name: "getHistory" }] } }]; $("#DiagramContent").ejDiagram({ nodes: nodes });
Not applicable
Sets the name of the method Property:`nodes.class.methods.name`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Class, "class": { name: "Patient", methods: [{ name: "getHistory", arguments: [{name: "Date" }] }] } }]; $("#DiagramContent").ejDiagram({ nodes: nodes });
Not applicable
Defines the arguments of the method Property:`nodes.class.methods.arguments`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Class, "class": { name: "Patient", methods: [{ name: "getHistory", arguments: [{ name: "Date", type:"String" }] }] } }]; $("#DiagramContent").ejDiagram({ nodes: nodes });
Not applicable
Defines the name, attributes and methods of a Class. Applicable, if the node is a Class Property:`nodes.class.methods.arguments.name`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Class, "class": { name: "Patient", methods: [ { name: "getHistory", arguments: [ { name: "Date" } ], type: "History" }] } }]; $("#DiagramContent").ejDiagram({ nodes: nodes });
Not applicable
Sets the type of the argument Property:`nodes.class.methods.arguments.type`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Class, "class": { name: "Patient", methods: [ { name: "getHistory", arguments: [ { name: "Date" } ], type: "History" }] } }]; $("#DiagramContent").ejDiagram({ nodes: nodes });
Not applicable
Sets the return type of the method Property:`nodes.class.methods.type`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Class, "class": { name: "Patient", methods: [{ name: "getHistory", arguments: [{name: "Date" }], type: "History" }] } }]; $("#DiagramContent").ejDiagram({ nodes: nodes });
Not applicable
Sets the visibility of the method Property:`nodes.class.methods.scope`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Class, "class": { name: "Patient", methods: [{ name: "getHistory", arguments: [{name: "Date" }], type: "History", scope:"protected" }] } }]; $("#DiagramContent").ejDiagram({ nodes: nodes });
Not applicable
Defines the state of the node is collapsed/expanded Property:`nodes.collapseIcon`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, collapseIcon: { shape:"arrowup", width:10, height:10 }, expandIcon: { height: 10, width: 10, shape: "ArrowDown" } }], });
Property:`nodes.collapseIcon`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' }, collapseIcon: { height: 20, width: 20, shape: "ArrowUp" } }] }); diagram.appendTo('#diagram');
Sets the border color for collapse icon of node Property:`nodes.collapseIcon.borderColor`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, collapseIcon: { shape:"arrowup", width:10, height:10, borderColor: "red" }, expandIcon: { height: 10, width: 10, shape: "ArrowDown", borderColor: "red" } }], });
Property:`nodes.collapseIcon.borderColor`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, expandIcon: { height: 20, width: 20, shape: "ArrowDown", borderColor: 'red' }, collapseIcon: { height: 20, width: 20, shape: "ArrowUp", borderColor: 'red' } }] }); diagram.appendTo('#diagram');
Sets the border width for collapse icon of node Property:`nodes.collapseIcon.borderWidth`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, collapseIcon: { shape:"arrowup", width:10, height:10, borderWidth: "2" }, expandIcon: { height: 10, width: 10, shape: "ArrowDown", borderWidth: "2" } }], });
Property:`nodes.collapseIcon.borderWidth`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, expandIcon: { height: 20, width: 20, shape: "ArrowDown", borderWidth: '2' }, collapseIcon: { height: 20, width: 20, shape: "ArrowUp", borderWidth: '2' } }] }); diagram.appendTo('#diagram');
Sets the fill color for collapse icon of node Property:`nodes.collapseIcon.fillColor`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, collapseIcon: { shape:"arrowup", width:10, height:10, fillColor: "green" }, expandIcon: { height: 10, width: 10, shape: "ArrowDown", fillColor: "green" } }], });
Property:`nodes.collapseIcon.fill`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' }, collapseIcon: { height: 20, width: 20, shape: "ArrowUp", fill: 'red' } }] }); diagram.appendTo('#diagram');
Defines the height for collapse icon of node Property:`nodes.collapseIcon.height`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, collapseIcon: { shape:"arrowup", width:10, height:10 }, expandIcon: { height: 10, width: 10, shape: "ArrowDown" } }], });
Property:`nodes.collapseIcon.height`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' }, collapseIcon: { height: 20, width: 20, shape: "ArrowUp" } }] }); diagram.appendTo('#diagram');
Sets the horizontal alignment of the icon Property:`nodes.collapseIcon.horizontalAlignment`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, collapseIcon: { shape:"arrowup", width:10, height:10, horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Left }, expandIcon: { height: 10, width: 10, shape: "ArrowDown", horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Left } }], });
Property:`nodes.collapseIcon.horizontalAlignment`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, expandIcon: { height: 20, width: 20, shape: "ArrowDown", horizontalAlignment:'Center' }, collapseIcon: { height: 20, width: 20, shape: "ArrowUp", horizontalAlignment:'Center' } }] }); diagram.appendTo('#diagram');
To set the margin for the collapse icon of node Property:`nodes.collapseIcon.margin`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, collapseIcon: { shape:"arrowup", width:10, height:10, margin:{ left: 5 } }, expandIcon: { height: 10, width: 10, shape: "ArrowDown", margin:{ left: 5 } } }], });
Property:`nodes.collapseIcon.margin`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red', margin:{ left: 5 } }, collapseIcon: { height: 20, width: 20, shape: "ArrowUp", margin:{ left: 5 } } }] }); diagram.appendTo('#diagram');
Sets the fraction/ratio(relative to node) that defines the position of the icon Property:`nodes.collapseIcon.offset`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, collapseIcon: { shape:"arrowup", width:10, height:10, offset:ej.datavisualization.Diagram.Point(0,0.5) }, expandIcon: { height: 10, width: 10, shape: "ArrowDown", offset:ej.datavisualization.Diagram.Point(0,0.5) } }], });
Property:`nodes.collapseIcon.offset`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, expandIcon: { height: 20, width: 20, shape: "ArrowDown", offset: { x: 0, y: 0.5 } }, collapseIcon: { height: 20, width: 20, shape: "ArrowUp", offset: { x: 0, y: 0.5 } } }] }); diagram.appendTo('#diagram');
Defines the shape of the collapsed state of the node Property:`nodes.collapseIcon.shape`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, collapseIcon: { shape:"arrowup", width:10, height:10 }, expandIcon: { height: 10, width: 10, shape: "arrowdown" } }], });
Property:`nodes.collapseIcon.shape`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' }, collapseIcon: { height: 20, width: 20, shape: "ArrowUp" } }] }); diagram.appendTo('#diagram');
Sets the vertical alignment of the icon Property:`nodes.collapseIcon.verticalAlignment `

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, collapseIcon: { shape:"arrowup", width:10, height:10, verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Top }, expandIcon: { height: 10, width: 10, shape: "arrowdown", verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Top } }], });
Property:`nodes.collapseIcon.verticalAlignment `

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, expandIcon: { height: 20, width: 20, shape: "ArrowDown", verticalAlignment: 'Center' }, collapseIcon: { height: 20, width: 20, shape: "ArrowUp", verticalAlignment: 'Center' } }] }); diagram.appendTo('#diagram');
Defines the custom content of the icon Not applicable Property:`nodes.collapseIcon.content`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, expandIcon: { height: 20, width: 20, shape: "Template", content: '' + '' }, collapseIcon: { height: 20, width: 20, shape: "ArrowUp" } }] }); diagram.appendTo('#diagram');
Defines the geometry of a path Not applicable Property:`nodes.collapseIcon.pathData`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, expandIcon: { height: 20, width: 20, shape: "Path", pathData: "M0,0 L0,100" }, collapseIcon: { height: 20, width: 20, shape: "Path", pathData: "M0,0 L0,100" } }] }); diagram.appendTo('#diagram');
Defines the corner radius of the icon border Not applicable Property:`nodes.collapseIcon.cornerRadius`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, expandIcon: { height: 20, width: 20, shape: "ArrowDown", cornerRadius: 3}, collapseIcon: { height: 20, width: 20, shape: "ArrowUp", cornerRadius: 3 } }] }); diagram.appendTo('#diagram');
Defines the space that the icon has to be moved from the icon border Not applicable Property:`nodes.collapseIcon.padding`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, expandIcon: { height: 20, width: 20, shape: "ArrowDown", padding: { left: 50 } }, collapseIcon: { height: 20, width: 20, shape: "ArrowUp", padding: { left: 50 } } }] }); diagram.appendTo('#diagram');
Defines the distance to be left between a node and its connections(In coming and out going connections) Property:`nodes.connectorPadding`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, connectorPadding: 5 }], });
Not applicable
Enables or disables the default behaviors of the node Property:`nodes.constraints`

var NodeConstraints = ej.datavisualization.Diagram.NodeConstraints;

$(“#diagram”).ejDiagram({ nodes: [{ name: “node”, width: 100, height: 100, offsetX: 100, offsetY: 100, constraints: NodeConstraints.Default & ~NodeConstraints.Select }], });

Property:`nodes.constraints`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, constraints: NodeConstraints.Default | NodeConstraints.Select }] }); diagram.appendTo('#diagram');
Defines how the child objects need to be arranged(Either in any predefined manner or automatically). Applicable, if the node is a group Property:`nodes.container`

var node1 = { name: "node1", width: 50, height: 50, borderColor: "red", borderDashArray: "4,2" }; var node2 = { name: "node2", width: 50, height: 50, borderColor: "red", borderDashArray: "4,2" }; var group = { name: "group", children: [node1, node2], container: { type: "stack" }, offsetX: 200, offsetY: 100 }; $("#diagramcontent").ejDiagram({ nodes: [group] });
Not applicable
Defines the orientation of the container. Applicable, if the group is a container Property:`nodes.container.orientation`

var node1 = { name: "node1", width: 50, height: 50, borderColor: "red", borderDashArray: "4,2" }; var node2 = { name: "node2", width: 50, height: 50, borderColor: "red", borderDashArray: "4,2" }; var group = { name: "group", children: [node1, node2], container: { type: "stack", orientation: "horizontal" }, offsetX: 200, offsetY: 100 }; $("#diagramcontent").ejDiagram({ nodes: [group] });
Not applicable
Sets the type of the container. Applicable if the group is a container. Property:`nodes.container.type`

var node1 = { name: "node1", width: 50, height: 50, borderColor: "red", borderDashArray: "4,2" }; var node2 = { name: "node2", width: 50, height: 50, borderColor: "red", borderDashArray: "4,2" }; var group = { name: "group", children: [node1, node2], container: { type: ej.datavisualization.Diagram.ContainerType.Stack }, offsetX: 200, offsetY: 100 }; $("#diagramcontent").ejDiagram({ nodes: [group] });
Not applicable
Defines the corner radius of rectangular shapes Property:`nodes.cornerRadius`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, type:"basic", shape:"rectangle", cornerRadius:5 }], });
Not applicable
This property allows you to customize nodes appearance using user-defined CSS Property:`nodes.cssClass`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, cssClass: "hoverNode" }], });
Not applicable
Defines the BPMN data object Property:`nodes.data.type`

$("#diagram").ejDiagram({ nodes: [{ name: "dataobject", type: "bpmn", shape: ej.datavisualization.Diagram.BPMNShapes.DataObject, data: { type: ej.datavisualization.Diagram.BPMNDataObjects.Input }, width: 50, height: 50, offsetX: 100, offsetY: 100 }]; });
Property:`nodes.shape.dataObject.type`

var diagram = new ej.diagrams.Diagram({ nodes: [{ id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100, shape: { type: 'Bpmn', shape: 'DataObject', dataObject: { collection: false, type: 'Input' } } }] }); diagram.appendTo('#diagram');
Defines whether the BPMN data object is a collection or not Property:`nodes.data.collection`

$("#diagram").ejDiagram({ nodes: [{ name: "dataobject", type: "bpmn", shape: ej.datavisualization.Diagram.BPMNShapes.DataObject, data: { type: ej.datavisualization.Diagram.BPMNDataObjects.Input, collection: false }, width: 50, height: 50, offsetX: 100, offsetY: 100 }]; });
Property:`nodes.shape.dataObject.collection`

var diagram = new ej.diagrams.Diagram({ nodes: [{ id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100, shape: { type: 'Bpmn', shape: 'DataObject', dataObject: { collection: false, type: 'Input' } } }] }); diagram.appendTo('#diagram');
Defines an Enumeration in a UML Class Diagram Property:`nodes.enumeration`

$("#diagram").ejDiagram({ nodes : [{ name: "Enums", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration, enumeration: { name: "AccountType", } }] });
Not applicable
Sets the name of the Enumeration Property:`nodes.enumeration.name`

$("#diagram").ejDiagram({ nodes : [{ name: "Enums", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration, enumeration: { name: "AccountType", } }] });
Not applicable
Defines the collection of enumeration members Property:`nodes.enumeration.members`

$("#diagram").ejDiagram({ nodes : [{ name: "Enums", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration, enumeration: { name: "AccountType", members: [{ name: "CheckingAccount"}] } }] });
Not applicable
Sets the name of the enumeration member Property:`nodes.enumeration.members.name`

$("#diagram").ejDiagram({ nodes : [{ name: "Enums", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration, enumeration: { name: "AccountType", members: [{ name: "CheckingAccount"}] } }] });
Not applicable
Sets the type of the BPMN Events. Applicable, if the node is a BPMN event Property:`nodes.event`

$("#diagram").ejDiagram({ nodes : [{ name: "nodeEvent", type: "bpmn", shape: "event", event: ej.datavisualization.Diagram.BPMNEvents.Intermediate, width: 50, height: 50 }] });
Property:`nodes.shape.event`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, shape: { type: 'Bpmn', shape: 'Event', event: { event: 'Start', trigger: 'None' } } }] }); diagram.appendTo('#diagram');
Defines the type of the trigger Property:`nodes.event.trigger`

$("#diagram").ejDiagram({ nodes : [{ name: "nodeEvent", type: "bpmn", shape: ej.datavisualization.Diagram.BPMNShapes.Event, trigger: ej.datavisualization.Diagram.BPMNTriggers.None width: 50, height: 50 }] });
Property:`nodes.shape.event.trigger`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, shape: { type: 'Bpmn', shape: 'Event', event: { event: 'Start', trigger: 'None' } } }] }); diagram.appendTo('#diagram');
Defines whether the node can be automatically arranged using layout or not Property:`nodes.excludeFromLayout`

var node1 = { name: "node1", width: 50, height: 50, offsetX: 50, offsetY: 50, excludeFromLayout: true };

var node2 = { name: “node2”, width: 50, height: 50 }; var node3 = { name: “node3”, width: 50, height: 50 };

$(“#diagramcontent”).ejDiagram({ nodes: [node1, node2, node3], layout: { type: “hierarchicaltree” } });

Property:`nodes.excludeFromLayout`

var diagram = new ej.diagrams.Diagram({ nodes: [{ id: 'node', offsetX: 100, offsetY: 100, width: 100, height: 100, excludeFromLayout: true, }, { id: 'node1', width: 70, height: 70, annotations: [{ content: 'node1' }] }, { id: 'node2', width: 70, height: 70, annotations: [{ content: 'node2' }] }; ], layout: { type: 'RadialTree', }, }); diagram.appendTo('#diagram');
Defines the fill color of the node Property:`nodes.fillColor`

var node1 = { name: "node1", width: 50, height: 50, offsetX: 50, offsetY: 50, fillColor:"red"};

$(“#diagramcontent”).ejDiagram({ nodes: [node1], });

Property:`nodes.style.fill`

var diagram = new ej.diagrams.Diagram({ nodes: [{ id: 'node', offsetX: 100, offsetY: 100, width: 100, height: 100, style: { fill: 'red' } }, ], }); diagram.appendTo('#diagram');
Sets the type of the BPMN Gateway. Applicable, if the node is a BPMN gateway Property:`nodes.gateway`

var node1 = { name: "node1", width: 50, height: 50, offsetX: 50, offsetY: 50, type: "bpmn", shape: "gateway" , gateway: ej.datavisualization.Diagram.BPMNGateways.Exclusive };

$(“#diagramcontent”).ejDiagram({ nodes: [node1], });

Property:`nodes.shape.gateway`

var diagram = new ej.diagrams.Diagram({ nodes: [{ id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100, shape: { type: 'Bpmn', shape: 'Gateway', gateway: { type: 'Exclusive' } } }], }); diagram.appendTo('#diagram');
Paints the node with linear color transitions Property:`nodes.gradient.type`

var gradient = { type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [{ color: "white", offset: 0 }, { color: "red", offset: 50 }] }; var node1 = { name: "node1", width: 50, height: 50, offsetX: 50, offsetY: 50, gradient : gradient };

$(“#diagramcontent”).ejDiagram({ nodes: [node1], });

Property:`nodes.style.gradient.type`

var stopscol = []; var stops1 = { color: 'white', offset: 0 }; stopscol.push(stops1); var stops2 = { color: 'red', offset: 50 }; stopscol.push(stops2); var gradient1 = { x1: 0, x2: 50, y1: 0, y2: 50, stops: stopscol, type: 'Linear' };

var diagram = new ej.diagrams.Diagram({ nodes: [{ id: ‘node’, width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient1 } }], }); diagram.appendTo(‘#diagram’);

Defines the x1 value of linear gradient Property:`nodes.gradient.LinearGradient.x1`

var gradient = { type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [{ color: "white", offset: 0 }, { color: "red", offset: 50 }] }; var node1 = { name: "node1", width: 50, height: 50, offsetX: 50, offsetY: 50, gradient : gradient };

$(“#diagramcontent”).ejDiagram({ nodes: [node1], });

Property:`nodes.style.gradient.LinearGradient.x1`

var stopscol = []; var stops1 = { color: 'white', offset: 0 }; stopscol.push(stops1); var stops2 = { color: 'red', offset: 50 }; stopscol.push(stops2); var gradient1 = { x1: 0, x2: 50, y1: 0, y2: 50, stops: stopscol, type: 'Linear' };

var diagram = new ej.diagrams.Diagram({ nodes: [{ id: ‘node’, width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient1 } }], }); diagram.appendTo(‘#diagram’);

Defines the x2 value of linear gradient Property:`nodes.gradient.LinearGradient.x2`

var gradient = { type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [{ color: "white", offset: 0 }, { color: "red", offset: 50 }] }; var node1 = { name: "node1", width: 50, height: 50, offsetX: 50, offsetY: 50, gradient : gradient };

$(“#diagramcontent”).ejDiagram({ nodes: [node1], });

Property:`nodes.style.gradient.LinearGradient.x2`

var stopscol = []; var stops1 = { color: 'white', offset: 0 }; stopscol.push(stops1); var stops2 = { color: 'red', offset: 50 }; stopscol.push(stops2); var gradient1 = { x1: 0, x2: 50, y1: 0, y2: 50, stops: stopscol, type: 'Linear' };

var diagram = new ej.diagrams.Diagram({ nodes: [{ id: ‘node’, width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient1 } }], }); diagram.appendTo(‘#diagram’);

Defines the y1 value of linear gradient Property:`nodes.gradient.LinearGradient.y1`

var gradient = { type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [{ color: "white", offset: 0 }, { color: "red", offset: 50 }] }; var node1 = { name: "node1", width: 50, height: 50, offsetX: 50, offsetY: 50, gradient : gradient };

$(“#diagramcontent”).ejDiagram({ nodes: [node1], });

Property:`nodes.style.gradient.LinearGradient.y1`

var stopscol = []; var stops1 = { color: 'white', offset: 0 }; stopscol.push(stops1); var stops2 = { color: 'red', offset: 50 }; stopscol.push(stops2); var gradient1 = { x1: 0, x2: 50, y1: 0, y2: 50, stops: stopscol, type: 'Linear' };

var diagram = new ej.diagrams.Diagram({ nodes: [{ id: ‘node’, width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient1 } }], }); diagram.appendTo(‘#diagram’);

Defines the y2 value of linear gradient Property:`nodes.gradient.LinearGradient.y2`

var gradient = { type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [{ color: "white", offset: 0 }, { color: "red", offset: 50 }] }; var node1 = { name: "node1", width: 50, height: 50, offsetX: 50, offsetY: 50, gradient : gradient };

$(“#diagramcontent”).ejDiagram({ nodes: [node1], });

Property:`nodes.style.gradient.LinearGradient.y2`

var stopscol = []; var stops1 = { color: 'white', offset: 0 }; stopscol.push(stops1); var stops2 = { color: 'red', offset: 50 }; stopscol.push(stops2); var gradient1 = { x1: 0, x2: 50, y1: 0, y2: 50, stops: stopscol, type: 'Linear' };

var diagram = new ej.diagrams.Diagram({ nodes: [{ id: ‘node’, width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient1 } }], }); diagram.appendTo(‘#diagram’);

Defines the type of gradient Property:`nodes.gradient.RadialGradient.type`

var node = { name: "node", width: 50, height: 50, offsetX: 100, offsetY: 100, gradient: { type: "radial", fx: 50, fy: 50, cx: 50, cy: 50, stops: [{ color: "white", offset: 0 }, { color: "red", offset: 100 }] } };

$(“#diagramcontent”).ejDiagram({ nodes: [node1], });

Property:`nodes.style.gradient.type`

var stops = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }]; var gradient = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' }; var diagram = new ej.diagrams.Diagram({ nodes: [{ id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient } }], }); diagram.appendTo('#diagram');
Defines the position of the outermost circle Property:`nodes.gradient.RadialGradient.cx`

var node = { name: "node", width: 50, height: 50, offsetX: 100, offsetY: 100, gradient: { type: "radial", fx: 50, fy: 50, cx: 50, cy: 50, stops: [{ color: "white", offset: 0 }, { color: "red", offset: 100 }] } };

$(“#diagramcontent”).ejDiagram({ nodes: [node1], });

Property:`nodes.style.RadialGradient.cx`

var stops = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }]; var gradient = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' }; var diagram = new ej.diagrams.Diagram({ nodes: [{ id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient } }], }); diagram.appendTo('#diagram');
Defines the outer most circle of the radial gradient Property:`nodes.gradient.RadialGradient.cy`

var node = { name: "node", width: 50, height: 50, offsetX: 100, offsetY: 100, gradient: { type: "radial", fx: 50, fy: 50, cx: 50, cy: 50, stops: [{ color: "white", offset: 0 }, { color: "red", offset: 100 }] } };

$(“#diagramcontent”).ejDiagram({ nodes: [node1], });

Property:`nodes.style.RadialGradient.cy`

var stops = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }]; var gradient = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' }; var diagram = new ej.diagrams.Diagram({ nodes: [{ id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient } }], }); diagram.appendTo('#diagram');
Defines the innermost circle of the radial gradient Property:`nodes.gradient.RadialGradient.fx`

var node = { name: "node", width: 50, height: 50, offsetX: 100, offsetY: 100, gradient: { type: "radial", fx: 50, fy: 50, cx: 50, cy: 50, stops: [{ color: "white", offset: 0 }, { color: "red", offset: 100 }] } };

$(“#diagramcontent”).ejDiagram({ nodes: [node1], });

Property:`nodes.style.RadialGradient.fx`

var stops = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }]; var gradient = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' }; var diagram = new ej.diagrams.Diagram({ nodes: [{ id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient } }], }); diagram.appendTo('#diagram');
Defines the innermost circle of the radial gradient Property:`nodes.gradient.RadialGradient.fy`

var node = { name: "node", width: 50, height: 50, offsetX: 100, offsetY: 100, gradient: { type: "radial", fx: 50, fy: 50, cx: 50, cy: 50, stops: [{ color: "white", offset: 0 }, { color: "red", offset: 100 }] } };

$(“#diagramcontent”).ejDiagram({ nodes: [node1], });

Property:`nodes.style.RadialGradient.fy`

var stops = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }]; var gradient = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' }; var diagram = new ej.diagrams.Diagram({ nodes: [{ id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient } }], }); diagram.appendTo('#diagram');
Defines the different colors and the region of color transitions Property:`nodes.gradient.RadialGradient.stops`

var node = { name: "node", width: 50, height: 50, offsetX: 100, offsetY: 100, gradient: { type: "radial", fx: 50, fy: 50, cx: 50, cy: 50, stops: [{ color: "white", offset: 0 }, { color: "red", offset: 100 }] } };

$(“#diagramcontent”).ejDiagram({ nodes: [node1], });

Property:`nodes.style.RadialGradient.stops`

var stops = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }]; var gradient = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' }; var diagram = new ej.diagrams.Diagram({ nodes: [{ id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient } }], }); diagram.appendTo('#diagram');
Sets the color to be filled over the specified region Property:`nodes.gradient.stops.color`

var node = { name: "node", width: 50, height: 50, offsetX: 100, offsetY: 100, gradient: { type: "radial", fx: 50, fy: 50, cx: 50, cy: 50, stops: [{ color: "white", offset: 0 }, { color: "red", offset: 100 }] } };

$(“#diagramcontent”).ejDiagram({ nodes: [node1], });

Property:`nodes.style.gradient.stops.color`

var stops = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }]; var gradient = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' }; var diagram = new ej.diagrams.Diagram({ nodes: [{ id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient } }], }); diagram.appendTo('#diagram');
Sets the position where the previous color transition ends and a new color transition starts Property:`nodes.gradient.stops.offset`

var node = { name: "node", width: 50, height: 50, offsetX: 100, offsetY: 100, gradient: { type: "radial", fx: 50, fy: 50, cx: 50, cy: 50, stops: [{ color: "white", offset: 0 }, { color: "red", offset: 100 }] } };

$(“#diagramcontent”).ejDiagram({ nodes: [node1], });

Property:`nodes.style.gradient.stops.offset`

var stops = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }]; var gradient = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' }; var diagram = new ej.diagrams.Diagram({ nodes: [{ id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient } }], }); diagram.appendTo('#diagram');
Describes the transparency level of the region Property:`nodes.gradient.stops.opacity`

var node = { name: "node", width: 50, height: 50, offsetX: 100, offsetY: 100, gradient: { type: "radial", fx: 50, fy: 50, cx: 50, cy: 50, stops: [{ color: "white", offset: 0 }, { color: "red", offset: 100, opacity: 0.5 }] } };

$(“#diagramcontent”).ejDiagram({ nodes: [node1], });

Property:`nodes.style.gradient.stops.opacity`

var stops = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50, opacity: 0.5 }]; var gradient = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' }; var diagram = new ej.diagrams.Diagram({ nodes: [{ id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100, style: { gradient: gradient } }], }); diagram.appendTo('#diagram');
Defines the header of a swimlane/lane Property:`nodes.header`

var swimlane = { type: "swimlane", name: "swimlane", header: { text: "Swimlane", fontSize: 12, bold: true } }; $("#diagramcontent").ejDiagram({ nodes: [swimlane] });
Not applicable
Defines the height of the node Property:`nodes.height`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, }], });
Property:`nodes.height`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }] }); diagram.appendTo('#diagram');
Sets the horizontal alignment of the node. Applicable, if the parent of the node is a container Property:`nodes.horizontalAlign`

var node1 = { name: "node1", width: 50, height: 50 }; var node2 = { name: "node2", width: 50, height: 50, horizontalAlign: ej.datavisualization.Diagram.HorizontalAlignment.Right }; var group = { name: "group", children: [node1, node2], container: { type: "canvas" }, offsetX: 200, offsetY: 100, minWidth: 200, minHeight: 200, fillColor: "red" }; $("#diagramcontent").ejDiagram({ nodes: [group] });
Not applicable
A read only collection of the incoming connectors/edges of the node Property:`nodes.inEdges`

var node = diagram.selectionList[0]; for(var i = 0; i < node.inEdges.length; i++){ console.log(node.inEdges[i]); };
Property:`nodes.inEdges`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, }] }); diagram.appendTo('#diagram'); var node = (diagram.nodes[0] as Node).inEdges; for (var i = 0; i < node.length; i++) { console.log(node[i]); };
Defines an interface in a UML interface Diagram Property:`nodes.interface`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.interface }]; $("#diagramcontent").ejDiagram({ nodes:nodes });
Not applicable
Defines the name, attributes and methods of a Interface. Applicable, if the node is a Interface Property:`nodes.interface.name`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.interface, "interface": { name: "Patient", } }]; $("#DiagramContent").ejDiagram({ nodes: nodes });
Not applicable
Defines the collection of attributes Property:`nodes.interface.attributes`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.interface, "interface": { name: "Patient", attributes: [{ name: "accepted"}] } }]; $("#DiagramContent").ejDiagram({ nodes: nodes });
Not applicable
Sets the name of the attribute Property:`nodes.interface.attributes.name`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.interface, "interface": { name: "Patient", attributes: [{ name: "accepted" }] } }]; $("#DiagramContent").ejDiagram({ nodes: nodes });
Not applicable
Sets the data type of attribute Property:`nodes.interface.attributes.type`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.interface, "interface": { name: "Patient", attributes: [{ name: "accepted", type: "Date" }] } }]; $("#DiagramContent").ejDiagram({ nodes: nodes });
Not applicable
Defines the visibility of the attribute Property:`nodes.interface.attributes.scope`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.interface, "interface": { name: "Patient", attributes: [{ name: "accepted", type: "Date", scope:"protected" }] } }]; $("#DiagramContent").ejDiagram({ nodes: nodes });
Not applicable
Defines the collection of methods of a interface Property:`nodes.interface.methods`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.interface, "interface": { name: "Patient", methods: [{ name: "getHistory" }] } }]; $("#DiagramContent").ejDiagram({ nodes: nodes });
Not applicable
Sets the name of the method Property:`nodes.interface.methods.name`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.interface, "interface": { name: "Patient", methods: [{ name: "getHistory", arguments: [{name: "Date" }] }] } }]; $("#DiagramContent").ejDiagram({ nodes: nodes });
Not applicable
Defines the arguments of the method Property:`nodes.interface.methods.arguments`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.interface, "interface": { name: "Patient", methods: [{ name: "getHistory", arguments: [{ name: "Date", type:"String" }] }] } }]; $("#DiagramContent").ejDiagram({ nodes: nodes });
Not applicable
Defines the name, attributes and methods of a interface. Applicable, if the node is a interface Property:`nodes.interface.methods.arguments.name`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.interface, "interface": { name: "Patient", methods: [ { name: "getHistory", arguments: [ { name: "Date" } ], type: "History" }] } }]; $("#DiagramContent").ejDiagram({ nodes: nodes });
Not applicable
Sets the type of the argument Property:`nodes.interface.methods.arguments.type`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.interface, "interface": { name: "Patient", methods: [ { name: "getHistory", arguments: [ { name: "Date" } ], type: "History" }] } }]; $("#DiagramContent").ejDiagram({ nodes: nodes });
Not applicable
Sets the return type of the method Property:`nodes.interface.methods.type`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.interface, "interface": { name: "Patient", methods: [{ name: "getHistory", arguments: [{name: "Date" }], type: "History" }] } }]; $("#DiagramContent").ejDiagram({ nodes: nodes });
Not applicable
Sets the visibility of the method Property:`nodes.interface.methods.scope`

var nodes = [{ name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black", type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.interface, "interface": { name: "Patient", methods: [{ name: "getHistory", arguments: [{name: "Date" }], type: "History", scope:"protected" }] } }]; $("#DiagramContent").ejDiagram({ nodes: nodes });
Not applicable
Defines whether the sub tree of the node is expanded or collapsed Property:`nodes.isExpanded`

var node1 = { name: "node1", width: 50, height: 50, offsetX: 50, offsetY: 50, isExpanded: false };

var node2 = { name: “node2”, width: 50, height: 50 }; var connector = { sourceNode: “node1”, targetNode: “node2”, name: “connector” }; $(“#diagramcontent”).ejDiagram({ nodes: [node1, node2], connectors: [connector], layout: { type: “hierarchicaltree” } });

Property:`nodes.isExpanded`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, id: 'node1', isExpanded: true, }, { id: 'node2', width: 50, height: 50 }], connectors: [{ sourceNode: 'node1', targetNode: 'node2', id: 'connector' }], layout: { type: "hierarchicaltree" } }); diagram.appendTo('#diagram');
Sets the node as a swimlane Property:`nodes.isSwimlane`

var swimlane = { type: "swimlane", name: "swimlane", isSwimlane: true, header: { text: "Swimlane", fontSize: 12, bold: true } }; $("#diagramcontent").ejDiagram({ nodes: [swimlane] });
Not applicable
A collection of objects where each object represents a label Property:`nodes.labels`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, labels: [ { text: "Label", fontColor: "Red" } ] }], });
Property:`nodes.annotations`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, annotations: [{ content: 'Annotation' }] }] }); diagram.appendTo('#diagram');
An array of objects where each object represents a lane. Applicable, if the node is a swimlane Property:`nodes.lanes`

var swimlane = { type: "swimlane", name: "swimlane", offsetX: 300, offsetY: 200, lanes: [{ name: "lane1", width: 200 }, { name: "lane2", width: 100 } ] }; $("#diagramcontent").ejDiagram({ nodes: [swimlane] });
Not applicable
This property allows you to customize lanes appearance using user-defined CSS Property:`nodes.lanes.cssClass`

var addInfo = { Description:"Describe the functionality" }; var swimlane = { type: "swimlane", name: "swimlane", offsetX: 300, offsetY: 200, lanes: [{ name: "lane1", width: 200 }, { name: "lane2", width: 100, cssClass:"hoverLane", addInfo: addInfo, fillColor:"lightgrey" } ] }; $("#diagramcontent").ejDiagram({ nodes: [swimlane] });
Not applicable
Defines the header of the lane Property:`nodes.lanes.header`

var swimlane = { type: "swimlane", name: "swimlane", offsetX: 300, offsetY: 200, lanes: [{ name: "lane1", width: 200 }, { name: "lane2", width: 100, header: { fillColor:"blue", fontColor:"white", text:"Function 1" } } ] }; $("#diagramcontent").ejDiagram({ nodes: [swimlane] });
Not applicable
Defines the width of lane Property:`nodes.lanes.width`

var swimlane = { type: "swimlane", name: "swimlane", offsetX: 300, offsetY: 200, lanes: [{ name: "lane1", width: 200, height: 200, zOrder:10 }, { name: "lane2", width: 100 } ] }; $("#diagramcontent").ejDiagram({ nodes: [swimlane] });
Not applicable
An array of objects where each object represents a child node of the lane Property:`nodes.lanes.children`

var swimlane = { type: "swimlane", name: "swimlane", offsetX: 300, offsetY: 200, lanes: [{ name: "lane1", width: 200 }, { name: "lane2", width: 100, children:[{name:"process", width: 50, height: 50 }] } ] }; $("#diagramcontent").ejDiagram({ nodes: [swimlane] });
Not applicable
Defines the object as a lane Property:`nodes.lanes.isLane`

var swimlane = { type: "swimlane", name: "swimlane", offsetX: 300, offsetY: 200, lanes: [{ name: "lane1", width: 200, height: 200, isLane:true, orientation:"vertical" }, { name: "lane2", width: 100 } ] }; $("#diagramcontent").ejDiagram({ nodes: [swimlane] });
Not applicable
Defines the minimum space to be left between the bottom of parent bounds and the node Property:`nodes.margin`

var swimlane = { type: "swimlane", name: "swimlane", offsetX: 300, offsetY: 200, lanes: [{ name: "lane1", width: 200, children: [{ name: "process", width: 50, height: 50, marginBottom: 50, marginLeft: 10, marginRight: 10, marginTop: 10 }] }] } $("#diagramcontent").ejDiagram({ nodes: [swimlane] });
Property:`nodes.margin`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, margin : { left: 15, right: 15, top: 15, bottom: 15 } }] }); diagram.appendTo('#diagram');
Defines the maximum height limit of the node Property:`nodes.maxHeight`

var nodes = [{ name: "node1", width: 50, height: 50, offsetX: 50, offsetY: 50, maxHeight: 100, maxWidth: 100, minHeight: 10, minWidth: 10 }]; $("#diagramcontent").ejDiagram({ nodes: nodes });
Property:`nodes.maxHeight`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, maxHeight: 100, maxWidth: 100, minHeight: 10, minWidth: 10 }] }); diagram.appendTo('#diagram');
Sets the unique identifier of the node Property:`nodes.name`

var nodes = [{ name: "node1", width: 50, height: 50, offsetX: 50, offsetY: 50, }]; $("#diagramcontent").ejDiagram({ nodes: nodes });
Property:`nodes.id`

var diagram = new ej.diagrams.Diagram({ nodes: [{ id: 'node1' offsetX: 100, offsetY: 100, width: 100, height: 100, }] }); diagram.appendTo('#diagram');
Defines the opaque of the node Property:`nodes.opacity`

var nodes = [{ name: "node1", width: 50, height: 50, offsetX: 50, offsetY: 50, opacity: 0.5, rotateAngle: 70 }]; $("#diagramcontent").ejDiagram({ nodes: nodes });
Property:`nodes.style.opacity`

var diagram = new ej.diagrams.Diagram({ nodes: [{ id: 'node1' offsetX: 100, offsetY: 100, width: 100, height: 100, rotateAngle: 70, style: { opacity: 0.5 } }] }); diagram.appendTo('#diagram');
Defines the minimum padding value to be left between the bottom most position of a group and its children. Applicable, if the group is a container Property:`nodes.paddingBottom`

var node1 = { name: "node1", width: 50, height: 50 }; var node2 = { name: "node2", width: 50, height: 50, verticalAlign: "bottom" }; var group = { name: "group", children: [node1, node2], container: { type: "canvas" }, offsetX: 200, offsetY: 100, fillColor: "gray", minWidth: 200, minHeight: 200, paddingBottom: 10, paddingLeft: 10, paddingRight: 10, paddingTop: 10 }; $("#diagramcontent").ejDiagram({nodes:[group]});
Not applicable
Sets the name of the parent group Property:`nodes.parent`

var node1 = { name: "node1", width: 50, height: 50, offsetX: 50, offsetY: 50, parent: "group" }; var node2 = { name: "node2", width: 50, height: 50, offsetX: 150, offsetY: 150, parent: "group" };

var group = { name: “group”, children: [“node1”, “node2”] }; $(“#diagramcontent”).ejDiagram({ nodes: [node1, node2, group] });

Not applicable
Sets the path geometry that defines the shape of a path node Property:`nodes.pathData`

var nodes; nodes = [{ name: "node1", width: 50, height: 50, offsetX: 50, offsetY: 50, type: "basic", shape: "path", pathData: "M 370.9702,194.9961 L 359.5112,159.7291 L 389.5112,137.9341 L 419.5112,159.7291 L 408.0522,194.9961 L 370.9702,194.9961 z" }]; $("#diagramcontent").ejDiagram({ nodes: nodes });
Property:`nodes.shape.data`

var nodes = [ { id: 'node1', width: 100, height: 100, offsetX: 300, offsetY: 100, shape: { type: 'Path', data: 'M 540.3643,137.9336 L 546.7973,159.7016 L 570.3633,159.7296 L 550.7723,171.9366 L 558.9053,194.9966 L 540.3643,179.4996 L 521.8223,194.9966 L 529.9553,171.9366 L 510.3633,159.7296 L 533.9313,159.7016 L 540.3643,137.9336 z' }, }, ];

var diagram = new ej.diagrams.Diagram({ width: ‘800px’, height: ‘500px’, nodes: nodes });

An array of objects, where each object represents a smaller region(phase) of a swimlane Property:`nodes.phases`

var swimlane = { type: "swimlane", name: "swimlane", offsetX: 300, offsetY: 100, width: 300, orientation: "horizontal", phases: [{ name: "phase1", offset: 150, label: { text: "Phase1" } }, { name: "phase2", label: { text: "Phase2" } } ] }; $("#diagramcontent").ejDiagram({ nodes: [swimlane] });
Not applicable
Defines the header of the smaller regions Property:`nodes.phases.label`

var swimlane = { type: "swimlane", name: "swimlane", offsetX: 300, offsetY: 100, width: 300, orientation: "horizontal", phases: [{ name: "phase1", offset: 150, label: { text: "Phase1" } }, { name: "phase2", label: { text: "Phase2" } } ] }; $("#diagramcontent").ejDiagram({ nodes: [swimlane] });
Not applicable
Defines the line color of the splitter that splits adjacent phases Property:`nodes.phases.lineColor`

var swimlane = { type: "swimlane", name: "swimlane", offsetX: 300, offsetY: 100, width: 300, orientation: "horizontal", phases: [{ name: "phase1", offset: 150, label: { text: "Phase1" }, lineColor:"green", lineDashArray:"2,2", lineWidth:3 }, { name: "phase2", label: { text: "Phase2" } } ] }; $("#diagramcontent").ejDiagram({ nodes: [swimlane] });
Not applicable
Sets the length of the smaller region(phase) of a swimlane Property:`nodes.phases.offset`

var swimlane = { type: "swimlane", name: "swimlane", offsetX: 300, offsetY: 100, width: 300, orientation: "horizontal", phases: [{ name: "phase1", offset: 150, label: { text: "Phase1" } }, { name: "phase2", label: { text: "Phase2" } } ] }; $("#diagramcontent").ejDiagram({ nodes: [swimlane] });
Not applicable
Sets the orientation of the phase Property:`nodes.phases.orientation`

var diagram = $("#diagramcontent").ejDiagram("instance"); diagram.addPhase(diagram.selectionList[0].name, { name: "verticalPhase", type: "phase", offset: 200, orientation: "vertical", label: { text: "New Phase" } } );
Not applicable
Sets the height of the phase headers Property:`nodes.phaseSize`

var swimlane = { type: "swimlane", name: "swimlane", offsetX: 300, offsetY: 100, width: 300, orientation: "horizontal", phaseSize: 50, phases: [{ name: "phase1", offset: 150, label: { text: "Phase 1" } }] }; $("#diagramcontent").ejDiagram({ nodes: [swimlane] });
Not applicable
Sets the ratio/ fractional value relative to node, based on which the node will be transformed(positioning, scaling and rotation) Property:`nodes.pivot`

var nodes = [{ name: "node1", width: 50, height: 50, offsetX: 50, offsetY: 50, pivot: { x: 0, y: 0 } }]; $("#diagramcontent").ejDiagram({ nodes: nodes });
Property:`nodes.pivot`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, pivot: { x: 0, y: 0 } }] }); diagram.appendTo('#diagram');
Defines a collection of points to draw a polygon. Applicable, if the shape is a polygon Property:`nodes.points`

var nodes = [{ name: "node1", width: 50, height: 50, offsetX: 50, offsetY: 50, type: "basic", shape: "polygon", points: [{ x: 0, y: 12.5 }, { x: 0, y: 50 }, { x: 50, y: 50 }, { x: 50, y: 0 }, { x: 12.5, y: 0 }, { x: 0, y: 12.5 }] }]; $("#diagramcontent").ejDiagram({ nodes: nodes });
Property:`nodes.shape.points`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, shape: { type: 'Basic', shape: 'Polygon', points: [{ x: 35, y: 0 }, { x: 65, y: 0 }, { x: 100, y: 35 }, { x: 100, y: 65 }, { x: 65, y: 100 }, { x: 35, y: 100 }, { x: 0, y: 65 }, { x: 0, y: 35 }] }, }] }); diagram.appendTo('#diagram');
An array of objects where each object represents a port Property:`nodes.ports`

var nodes = [{ name: "node1", width: 50, height: 50, offsetX: 50, offsetY: 50, ports: [{ name: "port1", offset: { x: 0.5, y: 0 } }, { name: "port2", offset: { x: 0.5, y: 1 } } ] }]; $("#diagramcontent").ejDiagram({ nodes: nodes });
Property:`nodes.ports`

var port = [{ id: 'port1', visibility: PortVisibility.Visible, shape: 'Circle', offset: { x: 0, y: 0 } }]; var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, ports: port }] }); diagram.appendTo('#diagram');
Sets the border color of the port Property:`nodes.ports.borderColor`

var nodes = [{ name: "node1", width: 50, height: 50, offsetX: 50, offsetY: 50, ports: [{ name: "port1", offset: { x: 0.5, y: 0 }, borderColor:"yellow", borderWidth: 3, cssClass:"hoverPort", fillColor:"red", size: 10, visibility:ej.datavisualization.Diagram.PortVisibility.Visible }, { name: "port2", offset: { x: 0.5, y: 1 } } ] }]; $("#diagramcontent").ejDiagram({ nodes: nodes });
Property:`nodes.ports.style.strokeColor`

var port = [{ id: 'port1', visibility: PortVisibility.Visible, shape: 'Circle', offset: { x: 0, y: 0 }, style: { strokeColor: 'yellow', strokeDashArray: '2 2', strokeWidth: 4, fill:'red', opacity: 0.5 } }]; var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, ports: port }] }); diagram.appendTo('#diagram');
Defines whether connections can be created with the port Property:`nodes.ports.constraints`

var nodes = [{ name: "node1", width: 50, height: 50, offsetX: 50, offsetY: 50, ports: [{ name: "port1", offset: { x: 0.5, y: 0 } }, { name: "port2", offset: { x: 0.5, y: 1 } } ] }]; $("#diagramcontent").ejDiagram({ nodes: nodes });
Property:`nodes.ports.constraints`

var port = [{ id: 'port1', visibility: PortVisibility.Visible, shape: 'Circle', offset: { x: 0, y: 0 }, constraints: PortConstraints.Draw }]; var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, ports: port }] }); diagram.appendTo('#diagram');
An array of objects where each object represents a port Property:`nodes.ports.shape`

var nodes = [{ name: "node1", width: 50, height: 50, offsetX: 50, offsetY: 50, ports: [{ name: "port1", offset: { x: 0.5, y: 0 }, shape:ej.datavisualization.Diagram.PortShapes.Path, pathData: "M5,0 L10,10 L0,10 z" }, { name: "port2", offset: { x: 0.5, y: 1 } } ] }]; $("#diagramcontent").ejDiagram({ nodes: nodes });
Property:`nodes.ports.shape`

var port = [{ id: 'port1', visibility: PortVisibility.Visible, shape: 'Path', pathData: 'M5,0 L10,10 L0,10 z' offset: { x: 0, y: 0 } }]; var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, ports: port }] }); diagram.appendTo('#diagram');
Sets the vertical alignment of the port with respect to its immediate parent Not applicable Property:`nodes.ports.verticalAlignment`

var port = [{ id: 'port1', visibility: PortVisibility.Visible, shape: 'Circle', offset: { x: 0, y: 0 }, verticalAlignment: 'Top', horizontalAlignment: 'Left', width: 10, height: 10 }]; var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, ports: port }] }); diagram.appendTo('#diagram');
Defines the opacity and the position of shadow Property:`nodes.shadow`

var nodes = [{ name: "node1", width: 50, height: 50, offsetX: 50, offsetY: 50, shadow: { opacity: 0.5, distance: 10, angle: 45 } }]; $("#diagramcontent").ejDiagram({ nodes: nodes });
Property:`nodes.shadow`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, shadow: { opacity: 0.5, distance: 10, angle: 45 } }] }); diagram.appendTo('#diagram');
Defines the sub process of a BPMN Activity. Applicable, if the type of the BPMN activity is sub process Property:`nodes.subProcess`

var nodes = [{ name: "node1", width: 100, height: 100, offsetX: 50, offsetY: 50, type: "bpmn", shape: "activity", activity: "subprocess", subProcess: { loop: ej.datavisualization.Diagram.BPMNLoops.Standard, adhoc: true, boundary: ej.datavisualization.Diagram.BPMNBoundary.Call, compensation: true, collapsed: false } }]; $("#diagramcontent").ejDiagram({ nodes: nodes });
Property:`nodes.shape.activity.subProcess`

var nodes = [{ id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100, shape: { type: 'Bpmn', shape: 'Activity', activity: { activity: 'SubProcess', subProcess: { adhoc: false, boundary: 'Default', collapsed: true } } } }]; var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', nodes: nodes }); diagram.appendTo('#diagram');
Defines the collection of events that need to be appended with BPMN Sub-Process Property:`nodes.subProcess.events`

var nodes = [{ name: "node1", width: 100, height: 100, offsetX: 50, offsetY: 50, type: "bpmn", shape: "activity", activity: "subprocess", subProcess: { type: "transaction", events: [{ name:"intermediate1", event: "intermediate", offset: { x: 0.25, y: 1 } }, { event: "intermediate", trigger: "error", offset: { x: 0.75, y: 1 } } ] } }]; $("#diagramcontent").ejDiagram({ nodes: nodes });
Property:`nodes.shape.activity.subProcess.events`

var nodes = [{ id: 'node1', width: 190, height: 190, offsetX: 300, offsetY: 200, shape: { type: 'Bpmn', shape: 'Activity', activity: { activity: 'SubProcess', subProcess: { type: 'Event', loop: 'ParallelMultiInstance', compensation: true, adhoc: false, boundary: 'Event', collapsed: true, events: [{ height: 20, width: 20, offset: { x: 0, y: 0 }, margin: { left: 10, top: 10 }, horizontalAlignment: 'Left', verticalAlignment: 'Top', event: 'Intermediate', trigger: 'Error' }] } } } }]; var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', nodes: nodes }); diagram.appendTo('#diagram');
An array of objects where each object represents a port Property:`nodes.subProcess.events.ports`

var nodes; nodes = [{ name: "node1", width: 100, height: 100, offsetX: 50, offsetY: 50, type: "bpmn", shape: "activity", activity: "subprocess", subProcess: { type: "transaction", events: [{ event: "intermediate", offset: { x: 0.25, y: 1 }, ports: [{ name: "port1", offset: { x: 0.5, y: 0 } }, { name: "port2", offset: { x: 0.5, y: 1 } } ] }] } }]; $("#diagramcontent").ejDiagram({ nodes: nodes });
Property:`nodes.shape.activity.subProcess.events.ports`

var nodes = [{ id: 'node1', width: 190, height: 190, offsetX: 300, offsetY: 200, shape: { type: 'Bpmn', shape: 'Activity', activity: { activity: 'SubProcess', subProcess: { type: 'Event', loop: 'ParallelMultiInstance', compensation: true, adhoc: false, boundary: 'Event', collapsed: true, events: [{ height: 20, width: 20, offset: { x: 0, y: 0 }, margin: { left: 10, top: 10 }, horizontalAlignment: 'Left', verticalAlignment: 'Top', ports: [{ id: 'port1', visibility: PortVisibility.Visible, shape: 'Circle', offset: { x: 0, y: 0 } }], event: 'Intermediate', trigger: 'Error' }] } } } }]; var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', nodes: nodes }); diagram.appendTo('#diagram');
A collection of objects where each object represents a label Property:`nodes.subProcess.events.labels`

var label = []; label = { "text": "Node1", "fontColor": "Red"}; var nodes = [{ name: "node1", width: 100, height: 100, offsetX: 50, offsetY: 50, type: "bpmn", shape: "activity", activity: "subprocess", subProcess: { type: "transaction", events: [{ event: "intermediate", offset: { x: 0.25, y: 1 }, {labels:label} }] } }]; $("#diagramcontent").ejDiagram({ nodes: nodes });
Property:`nodes.shape.activity.subProcess.events.annotations`

var nodes = [{ id: 'node1', width: 190, height: 190, offsetX: 300, offsetY: 200, shape: { type: 'Bpmn', shape: 'Activity', activity: { activity: 'SubProcess', subProcess: { type: 'Event', loop: 'ParallelMultiInstance', compensation: true, adhoc: false, boundary: 'Event', collapsed: true, events: [{ height: 20, width: 20, offset: { x: 0, y: 0 }, margin: { left: 10, top: 10 }, horizontalAlignment: 'Left', verticalAlignment: 'Top', annotations: [{ id: 'label3', margin: { bottom: 10 }, horizontalAlignment: 'Center', verticalAlignment: 'Top', content: 'Event', offset: { x: 0.5, y: 1 }, style: { color: 'black', fontFamily: 'Fantasy', fontSize: 8 } }], event: 'Intermediate', trigger: 'Error' }] } } } }]; var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', nodes: nodes }); diagram.appendTo('#diagram');
Defines the task of the BPMN activity. Applicable, if the type of activity is set as task Property:`nodes.task`

var nodes = [{ name: "node1", width: 100, height: 100, offsetX: 50, offsetY: 50, type: "bpmn", shape: "activity", activity: "task", task: { compensation: true, call: true, loop: ej.datavisualization.Diagram.BPMNLoops.Standard, type: ej.datavisualization.Diagram.BPMNTasks.Service } }]; $("#diagramcontent").ejDiagram({ nodes: nodes });
Property:`nodes.shape.activity.task`

var nodes = [{ id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100, shape: { type: 'Bpmn', shape: 'Activity', activity: { activity: 'Task', task: { call: true, compensation: false, type: 'Service', loop: 'ParallelMultiInstance' } } } }]; var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', nodes: nodes }); diagram.appendTo('#diagram'); diagram.tool = DiagramTools.ZoomPan;

NodeTemplate

Behaviour API in Essential JS 1 API in Essential JS 2
Binds the custom JSON data with node properties Property:`nodeTemplate`

var data = [{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" }, { "Id": "E2", "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];

$(“#diagramcontent”).ejDiagram({ dataSourceSettings: { id: “Id”, parent: “ReportingPerson”, dataSource: data }, nodeTemplate: “nodeTemplate” });

function nodeTemplate(diagram, node) { node.labels[0].text = node.Name; }

Property:`setNodeTemplate`

function setNodeTemplate() { setNodeTemplate: (object: NodeModel, diagram: Diagram): StackPanel => { if (object.id === 'node2') { var table = new StackPanel(); table.orientation = 'Horizontal'; var column1 = new StackPanel(); column1.children = []; column1.children.push(getTextElement('Column1')); addRows(column1); var column2 = new StackPanel(); column2.children = []; column2.children.push(getTextElement('Column2')); addRows(column2); table.children = [column1, column2]; return table; } return null; } } var getTextElement = (text: string) => { var textElement = new TextElement(); textElement.width = 50; textElement.height = 20; textElement.content = text; return textElement; }; var nodes = [{ id: 'node1', height: 100, offsetX: 100, offsetY: 100, }, { id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100 } ]; var connectors = [{ id: 'connector1', type: 'Straight', sourcePoint: { x: 100, y: 300 }, targetPoint: { x: 200, y: 400 }, }]; var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', connectors: connectors, nodes: nodes, setNodeTemplate: setNodeTemplate, }); diagram.appendTo('#diagram');

Overview

Behaviour API in Essential JS 1 API in Essential JS 2
Allows to see a preview or an overall view of the entire content of a Diagram Property:`overview`

;
;

$(“#diagram”).ejDiagram({ width: “100%”, height: “600px” });

$(“#overview”).ejOverview({ // Relates Diagram with overview sourceID: “diagram”, width: “100%”, height: “100%” });

Property:`Overview`

// Initializes the diagram control var diagram = new ej.diagrams.Diagram({ width: "100%", height: "600px" });

diagram.appendTo(‘#diagram’); var overview = new ej.diagrams.Overview({ width: ‘100%’, height: ‘150px’, sourceID: ‘diagram’ }); overview.appendTo(‘#overview’);

Layers

Behaviour API in Essential JS 1 API in Essential JS 2
A collection of JSON objects where each object represents a layer. Layer is a named category of diagram shapes Property:`layers`

var layer = { name: "layer1", active: true, visible: true, print: true, lock: true, objects: ["textNode"] }; $("#diagram").ejDiagram({ layers: [layer] });
Property:`layers`

var nodes = [{ id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100, }, { id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100, shape: { type: 'Basic', shape: 'Ellipse' }, } ]; var connectors = [{ id: 'connector1', type: 'Straight', sourcePoint: { x: 100, y: 300 }, targetPoint: { x: 200, y: 400 }, }]; var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', connectors: connectors, nodes: nodes, layers: [{ id: 'layer1', visible: true, lock: true, zIndex: -1, objects: ['node1', 'node2', 'connector1'] }],

}); diagram.appendTo(‘#diagram’);

A collection of JSON objects where each object represents a layer. Layer is a named category of diagram shapes Property:`layers.print`

var layer = { name: "layer1", active: true, visible: true, print: true, lock: true, objects: ["textNode"] }; $("#diagram").ejDiagram({ layers: [layer] });
Not applicable

Annotations

Behaviour API in Essential JS 1 API in Essential JS 2
A collection of objects where each object represents a label Property:`labels.text`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, labels: [ { text: "Label" } ] }], });
Property:`annotations.content`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, annotations: [{ content: 'Annotation' }] }] }); diagram.appendTo('#diagram');
Offset for annotation content Property:`labels.offset`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, labels: [ { text: "Label", offset: { x: 0, y: 1}, rotateAngle: 90 } ] }], });
Property:`annotations.offset`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, annotations: [{ content: 'Annotation', offset: { x: 0, y: 1}, rotateAngle: 90 }] }] }); diagram.appendTo('#diagram');
Sets the hyperlink for the labels Property:`labels.hyperText`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, labels: [ { text: "Label", bold:true, "hyperText": "https://www.syncfusion.com" } ] }], });
Property:`annotations.hyperlink`

var style = { bold: true }; var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, annotations: [{ content: 'Annotation', style: style, hyperlink: { color: 'red', content: 'HRPortal', textDecoration: 'Overline', link: 'https://hr.syncfusion.com/home' } }] }] }); diagram.appendTo('#diagram');
Enables/disables the bold style Property:`labels.bold`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, labels: [ { text: "Label", bold:true } ] }], });
Property:`annotations.style.bold`

var style = { bold: true }; var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, annotations: [{ content: 'Annotation', style: style }] }] }); diagram.appendTo('#diagram');
Sets the border color of the label Property:`labels.borderColor`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, labels: [ { text: "Label", borderColor:"red", borderWidth: 2 } ] }], });
Property:`annotations.style.borderColor`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, annotations: [{ content: 'Annotation', style: { strokeColor: 'black', strokeWidth: 2 } }] }] }); diagram.appendTo('#diagram');
Sets the border width of the label Property:`labels.borderWidth`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, labels: [ { text: "Label", borderColor: 'black', borderWidth: 2 } ] }], });
Property:`annotations.style.borderWidth`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, annotations: [{ content: 'Annotation', style: { color: 'black', fill: 'white', opacity: 0.7, strokeColor: 'black', strokeWidth: 2 } }] }] }); diagram.appendTo('#diagram');
This property allows you to customize labels appearance using user-defined CSS Property:`labels.cssClass`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, labels: [ { text: "Label", cssClass:"hoverText" } ] }], });
Not applicable
Enables or disables the default behaviors of the label Property:`labels.constraints`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, labels: [ { text: "Label", constraints: LabelConstraints.All & ~LabelConstraints.Resizable } ] }], });
Property:`annotations.constraints`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, annotations: [{ content: 'Annotation', constraints: ~AnnotationConstraints.InheritReadOnly }] }] }); diagram.appendTo('#diagram');
Sets the fill color of the text area Property:`labels.fillColor`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, labels: [ { text: "Label", fillColor: "green" } ] }], });
Property:`annotations.style.fill`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, annotations: [{ content: 'Annotation', style: { color: 'black', fill: 'white', } }] }] }); diagram.appendTo('#diagram');
Sets the font color of the text Property:`labels.fontColor`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, labels: [ { text: "Label", fontColor: "green" } ] }], });
Property:`annotations.style.color`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, annotations: [{ content: 'Annotation', style: { color: 'black', } }] }] }); diagram.appendTo('#diagram');
Sets the font family of the text Property:`labels.fontFamily`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, labels: [ { text: "Label", fontColor: "green", fontFamily:"seugoe UI", fontSize: 14 } ] }], });
Property:`annotations.style.fontFamily`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, annotations: [{ content: 'Annotation', style: { color: 'black', bold: true, italic: true, fontSize: '12', fontFamily: 'TimesNewRoman' } }] }] }); diagram.appendTo('#diagram');
Sets the height of the label Property:`labels.height`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, labels: [ { text: "Label", height: 100, width: 100 } ] }], });
Property:`annotations.height`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, annotations: [{ content: 'Annotation', height: 100, width: 100 }] }] }); diagram.appendTo('#diagram');
Sets the horizontal alignment of the label Property:`labels.horizontalAlignment`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, labels: [ { text: "Label", verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Top, horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Left } ] }], });
Property:`annotations.horizontalAlignment`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, annotations: [{ content: 'Annotation', horizontalAlignment: 'Left', verticalAlignment: 'Top' }] }] }); diagram.appendTo('#diagram');
To set the margin of the label Property:`labels.margin`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, labels: [ { text: "Label", margin:{ left: 5 }, padding:{ left: 5 } } ] }], });
Property:`annotations.margin`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, annotations: [{ content: 'Annotation', margin:{ left: 5 } }] }] }); diagram.appendTo('#diagram');
Defines whether the label is editable or not Property:`labels.readOnly`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, labels: [ { text: "Label", readOnly:true } ] }], });
Property:`annotations.constraints`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, annotations: [{ content: 'Annotation', constraints: AnnotationConstraints.ReadOnly }] }] }); diagram.appendTo('#diagram');
Sets the id of svg/html templates. Applicable, if the node’s label is HTML or native Property:`labels.templateId`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, labels: [ { templateId:"SvgEllipse" } ] }], });
Not applicable
Defines how to align the text inside the label Property:`labels.textAlign`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, labels: [ { text: "Label", textAlign:ej.datavisualization.Diagram.TextAlign.Left, textDecoration: ej.datavisualization.Diagram.TextDecorations.Underline, textOverflow:true, overflowType: ej.datavisualization.Diagram.OverflowType.Ellipsis, wrapping:ej.datavisualization.Diagram.TextWrapping.NoWrap } ] }], });
Property:`annotations.style.textAlign`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, annotations: [{ content: 'Annotation', style: { textAlign: 'Justify', textOverflow : 'Wrap', textDecoration : 'LineThrough', textWrapping : 'WrapWithOverflow' } }] }] }); diagram.appendTo('#diagram');
Enables or disables the visibility of the label Property:`labels.visible`

$("#diagram").ejDiagram({ nodes: [{ name: "node", width: 100, height: 100, offsetX: 100, offsetY: 100, labels: [ { text: "Label", visible: false } ] }], });
Property:`annotations.visible`

var diagram = new ej.diagrams.Diagram({ nodes: [{ offsetX: 100, offsetY: 100, width: 100, height: 100, annotations: [{ content: 'Annotation', visible : false }] }] }); diagram.appendTo('#diagram');
Gets whether the label is currently being edited or not Property:`labels.mode`

var node = diagram.selectionList[0]; console.log(node.labels[0].mode);
Not applicable

PageSettings

Behaviour API in Essential JS 1 API in Essential JS 2
Defines the size and appearance of diagram page Property:`pageSettings.autoScrollBorder`

$("#diagramcontent").ejDiagram({ pageSettings: { autoScrollBorder: { left: 50, top: 50, right: 50, bottom: 50 } } });
Not applicable
Sets whether multiple pages can be created to fit all nodes and connectors Property:`pageSettings.multiplePage`

$("#diagramcontent").ejDiagram({ pageSettings: { multiplePage:false pageWidth: 800, pageHeight: 500, pageOrientation:ej.datavisualization.Diagram.PageOrientations.Landscape } });
Property:`pageSettings.multiplePage`

var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', pageSettings: { width: 800, height: 600, multiplePage: true, orientation:'Landscape' }, }); diagram.appendTo('#diagram');
Defines the background color of diagram pages Property:`pageSettings.pageBackgroundColor`

$("#diagramcontent").ejDiagram({ pageSettings: { pagebackgroundColor: "lightgrey", } });
Property:`pageSettings.background.color`

var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', pageSettings: { background: { color: 'red', source: 'Clayton.png', scale: 'Meet', align: 'XMidYMid' } }, }); diagram.appendTo('#diagram');
Defines the scrollable area of diagram. Applicable, if the scroll limit is “limited” Property:`pageSettings.scrollableArea`

$("#diagramcontent").ejDiagram({ pageSettings: { scrollableArea: { x:0, y:0, width:1000, height:1000} } });
Property:`scrollSettings.scrollableArea`

var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', scrollSettings: { scrollableArea: new Rect(0, 0, 300, 300), }, }); diagram.appendTo('#diagram');
Defines the draggable region of diagram elements Property:`pageSettings.boundaryConstraints`

$("#diagramcontent").ejDiagram({ pageSettings: { boundaryConstraints: ej.datavisualization.Diagram.BoundaryConstraints.Diagram } });
Property:`pageSettings.boundaryConstraints`

var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', pageSettings: { width: 800, height: 600, boundaryConstraints: 'Diagram' }, }); diagram.appendTo('#diagram');

SymbolPalette

Behaviour API in Essential JS 1 API in Essential JS 2
Defines the size and preview size of the node to add that to symbol palette Property:`nodes.paletteItem`

$("#symbolpalette").ejSymbolPalette({ palettes: [{ name: "Basic Shapes", expanded: true, items: [{ name: "Rectangle", height: 40, width: 80, paletteItem: { previewWidth: 100, previewHeight: 100 } }] }] });
Property:`palettes`

export function getFlowShapes(): NodeModel[] { var flowShapes = [{ id: 'Terminator', shape: { type: 'Flow', shape: 'Terminator' }, style: { strokeWidth: 2 } }, { id: 'Process', shape: { type: 'Flow', shape: 'Process' }, style: { strokeWidth: 2 } }, { id: 'Decision', shape: { type: 'Flow', shape: 'Decision' }, style: { strokeWidth: 2 } }, ] }; var palette = new ej.diagrams.SymbolPalette({ expandMode: 'Multiple', palettes: [{ id: 'flow', expanded: true, symbols: getFlowShapes(), title: 'Flow Shapes' }, ], width: '100%', height: '100%', symbolHeight: 50, symbolWidth: 50, symbolPreview: { height: 100, width: 100 }, enableSearch: true, symbolMargin: { left: 12, right: 12, top: 12, bottom: 12 }, getSymbolInfo: (symbol: NodeModel): SymbolInfo => { return { fit: true }; } }); palette.appendTo('#symbolpalette');
Defines whether the symbol should be drawn at its actual size regardless of precedence factors or not Property:`nodes.paletteItem.enableScale`

$("#symbolpalette").ejSymbolPalette({ palettes: [{ name: "Basic Shapes", expanded: true, items: [{ name: "Rectangle", height: 40, width: 80, paletteItem: { previewWidth: 100, previewHeight: 100, enableScale:false } }] }] });
Property:`palettes.fit`

export function getFlowShapes(): NodeModel[] { var flowShapes = [{ id: 'Terminator', shape: { type: 'Flow', shape: 'Terminator' }, style: { strokeWidth: 2 } }, { id: 'Process', shape: { type: 'Flow', shape: 'Process' }, style: { strokeWidth: 2 } }, { id: 'Decision', shape: { type: 'Flow', shape: 'Decision' }, style: { strokeWidth: 2 } }, ] }; var palette = new ej.diagrams.SymbolPalette({ expandMode: 'Multiple', palettes: [{ id: 'flow', expanded: true, symbols: getFlowShapes(), title: 'Flow Shapes' }, ], width: '100%', height: '100%', symbolHeight: 50, symbolWidth: 50, symbolPreview: { height: 100, width: 100 }, enableSearch: true, symbolMargin: { left: 12, right: 12, top: 12, bottom: 12 }, getSymbolInfo: (symbol: NodeModel): SymbolInfo => { return { fit: true }; } }); palette.appendTo('#symbolpalette');
To display a name for nodes in the symbol palette Property:`nodes.paletteItem.label`

$("#symbolpalette").ejSymbolPalette({ palettes: [{ name: "Basic Shapes", expanded: true, items: [{ name: "Rectangle", height: 40, width: 80, paletteItem: { previewWidth: 100, previewHeight: 100, label: "label", margin: { left: 4, right: 4, top: 4, bottom: 4 } } }] }] });
Property:`palettes.title`

export function getFlowShapes(): NodeModel[] { var flowShapes = [{ id: 'Terminator', shape: { type: 'Flow', shape: 'Terminator' }, style: { strokeWidth: 2 } }, { id: 'Process', shape: { type: 'Flow', shape: 'Process' }, style: { strokeWidth: 2 } }, { id: 'Decision', shape: { type: 'Flow', shape: 'Decision' }, style: { strokeWidth: 2 } }, ] }; var palette = new ej.diagrams.SymbolPalette({ expandMode: 'Multiple', palettes: [{ id: 'flow', expanded: true, symbols: getFlowShapes(), title: 'Flow Shapes' }, ], width: '100%', height: '100%', symbolHeight: 50, symbolWidth: 50, symbolPreview: { height: 100, width: 100 }, enableSearch: true, symbolMargin: { left: 12, right: 12, top: 12, bottom: 12 }, getSymbolInfo: (symbol: NodeModel): SymbolInfo => { return { fit: true }; } }); palette.appendTo('#symbolpalette');

ScrollSettings

Behaviour API in Essential JS 1 API in Essential JS 2
Defines the zoom value, zoom factor, scroll status and view port size of the diagram Property:`scrollSettings.horizontalOffset`

$("#diagramcontent").ejDiagram({ scrollSettings: { horizontalOffset: 300, verticalOffset: 300 } });
Property:`scrollSettings.horizontalOffset`

var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', scrollSettings: { horizontalOffset: 300, verticalOffset: 300 }, }); diagram.appendTo('#diagram');
Allows to read the view port width of the diagram Property:`scrollSettings.viewPortWidth`

$("#diagramcontent").ejDiagram({ scrollSettings: { viewPortWidth: 300, viewPortHeight: 300 } });
Property:`scrollSettings.viewPortWidth`

var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', scrollSettings: { viewPortWidth: 300, viewPortHeight: 300 }, }); diagram.appendTo('#diagram');
Allows to extend the scrollable region that is based on the scroll limit Property:`scrollSettings.padding`

$("#diagramcontent").ejDiagram({ scrollSettings: { padding: { left: 25, right: 25, top: 25, bottom: 25 } } });
Not applicable
Allows to read the zoom value of diagram Property:`scrollSettings.currentZoom`

$("#diagramcontent").ejDiagram({ scrollSettings: { currentZoom: 0.2 } });
Property:`scrollSettings.currentZoom`

var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', scrollSettings: { currentZoom: 0.2, }, }); diagram.appendTo('#diagram');
Allows to read the maximum zoom value of scroller Not applicable Property:`scrollSettings.maxZoom`

var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', scrollSettings: { maxZoom: 0.23 }, }); diagram.appendTo('#diagram');
Allows to read the maximum zoom value of scroller Not applicable Property:`scrollSettings.autoScrollBorder`

var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', scrollSettings: { autoScrollBorder: { left: 25, right: 25, top: 25, bottom: 25 } }, }); diagram.appendTo('#diagram');
Enables/Disables the autoscroll option Not applicable Property:`scrollSettings.canAutoScroll`

var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', scrollSettings: { canAutoScroll: false, }, }); diagram.appendTo('#diagram');
Defines the scrollable area of diagram Not applicable Property:`scrollSettings.scrollableArea`

var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', scrollSettings: { scrollableArea: new Rect(0, 0, 300, 300), }, }); diagram.appendTo('#diagram');

RulerSettings

Behaviour API in Essential JS 1 API in Essential JS 2
Enables or disables both the horizontal and vertical ruler Property:`rulerSettings.showRulers`

$("#diagramcontent").ejDiagram({ rulerSettings: { showRulers: true, } });
Property:`rulerSettings.showRulers`

var arrange = (args: IArrangeTickOptions) => { if (args.tickInterval % 10 == 0) { args.tickLength = 25; } } var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', rulerSettings: { showRulers: true, }, }); diagram.appendTo('#diagram');
Enables or disables both the horizontal and vertical ruler Property:`rulerSettings.horizontalRuler`

$("#diagramcontent").ejDiagram({ rulerSettings: { showRulers: true, horizontalRuler: { segmentWidth: 50, interval: 10, thickness: 50, length: 1000, markerColor: "pink", tickAlignment: ej.datavisualization.Diagram.TickAlignment.LeftOrTop, arrangeTick: function alignTick(args){ } }, } });
Property:`rulerSettings.horizontalRuler`

var arrange = (args: IArrangeTickOptions) => { if (args.tickInterval % 10 == 0) { args.tickLength = 25; } } var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', rulerSettings: { showRulers: true, horizontalRuler: { segmentWidth: 50, interval: 10, thickness: 20, markerColor: 'red', tickAlignment: 'LeftOrTop', arrangeTick: arrange, orientation: 'Horizontal', }, }, }); diagram.appendTo('#diagram');
Enables or disables both the horizontal and vertical ruler Property:`rulerSettings.verticalRuler`

$("#diagramcontent").ejDiagram({ rulerSettings: { showRulers: true, verticalRuler: { segmentWidth: 50, interval: 10, thickness: 50, length: 1000, markerColor: "pink", tickAlignment: ej.datavisualization.Diagram.TickAlignment.LeftOrTop, arrangeTick: function alignTick(args){ } } } });
Property:`rulerSettings.verticalRuler`

var arrange = (args: IArrangeTickOptions) => { if (args.tickInterval % 10 == 0) { args.tickLength = 25; } } var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', rulerSettings: { showRulers: true, verticalRuler: { segmentWidth: 200, interval: 20, arrangeTick: arrange, thickness: 20, markerColor: 'red', tickAlignment: 'LeftOrTop', arrangeTick: arrange, orientation: 'Horizontal' } }, }); diagram.appendTo('#diagram');
Updates the gridlines relative to the ruler ticks Not applicable Property:`rulerSettings.dynamicGrid`

var arrange = (args: IArrangeTickOptions) => { if (args.tickInterval % 10 == 0) { args.tickLength = 25; } } var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', rulerSettings: { dynamicGrid: true, showRulers: true, }, }); diagram.appendTo('#diagram');

SnapSettings

Behaviour API in Essential JS 1 API in Essential JS 2
Enables or disables snapping nodes/connectors to objects Property:`snapSettings.enableSnapToObject`

$("#diagramcontent").ejDiagram({ snapSettings: { enableSnapToObject: false } });
Not applicable
Defines the appearance of horizontal gridlines Property:`snapSettings.horizontalGridLines`

var gridline = { lineColor :"blue", lineDashArray:"2,2", linesInterval: [1, 14, 0.5, 14.5 ], snapInterval : [5] }; $("#diagramcontent").ejDiagram({ snapSettings: { horizontalGridLines: gridline} });
Property:`snapSettings.horizontalGridlines`

var snapSettings = { horizontalGridLines: { lineColor: 'black', lineDashArray: '1,1', lineIntervals: [0.95, 9.05, 0.2, 9.75], snapIntervals: [10] } }; var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', snapSettings: snapSettings }); diagram.appendTo('#diagram');
Defines the appearance of vertical gridlines Property:`snapSettings.verticalGridLines`

var gridline = { lineColor :"blue", lineDashArray:"2,2", linesInterval: [1, 14, 0.5, 14.5 ], snapInterval : [5] }; $("#diagramcontent").ejDiagram({ snapSettings: { verticalGridLines: gridline} });
Property:`snapSettings.verticalGridlines`

var snapSettings = { verticalGridLines: { lineColor: 'black', lineDashArray: '1,1', lineIntervals: [0.95, 9.05, 0.2, 9.75], snapIntervals: [10] } }; var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', snapSettings: snapSettings }); diagram.appendTo('#diagram');
Defines the angle by which the object needs to be snapped Property:`snapSettings.snapAngle`

$("#diagramcontent").ejDiagram({snapSettings: { snapAngle: 10} });
Property:`snapSettings.snapAngle`

var snapSettings = { snapAngle: 5, }; var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', snapSettings: snapSettings }); diagram.appendTo('#diagram');
Sets the minimum distance between the selected object and the nearest object Property:`snapSettings.snapObjectDistance`

$("#diagramcontent").ejDiagram({ snapSettings: { snapObjectDistance: 5 } });
Property:`snapSettings.snapObjectDistance`

var snapSettings = { snapObjectDistance: 5, }; var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', snapSettings: snapSettings }); diagram.appendTo('#diagram');
Defines and sets the snapConstraints Property:`snapSettings.snapConstraints`

$("#diagramcontent").ejDiagram({ snapSettings: { snapConstraints : ej.datavisualization.Diagram.SnapConstraints.ShowLines } });
Property:`snapSettings.constraints`

var snapSettings = { constraints: SnapConstraints.ShowLines, }; var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', snapSettings: snapSettings }); diagram.appendTo('#diagram');

ZoomFactor

Behaviour API in Essential JS 1 API in Essential JS 2
Sets the factor by which we can zoom in or zoom out Property:`zoomFactor`

$("#diagramcontent").ejDiagram({zoomFactor: 1});
Property:`zoomFactor`

var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', }); diagram.appendTo('#diagram'); var zoomin = { type: 'ZoomIn', zoomFactor: 0.5 }; diagram.zoomTo(zoomin);

Tool

Behaviour API in Essential JS 1 API in Essential JS 2
Enables/Disables the interactive behaviors of diagram Property:`tool`

$("#diagramcontent").ejDiagram({tool: ej.datavisualization.Diagram.Tool.ZoomPan});
Property:`tool`

var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', }); diagram.appendTo('#diagram'); diagram.tool = DiagramTools.ZoomPan;

ShowTooltip

Behaviour API in Essential JS 1 API in Essential JS 2
Enables or disables tooltip of diagram Property:`showTooltip`

$("#diagramcontent").ejDiagram({showTooltip: true});
Property:`constraints`

var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip, }); diagram.appendTo('#diagram');

SelectedItems

Behaviour API in Essential JS 1 API in Essential JS 2
A read only collection of the selected items Property:`selectedItems.children`

var diagram = $("#diagramcontent").ejDiagram("instance"); for(var i =0; i< diagram.model.selectedItems.children; i++){ //Do your actions here }
Not applicable
Controls the visibility of selector Property:`selectedItems.constraints`

$("#diagramcontent").ejDiagram({ selectedItems: { constraints: ej.datavisualization.Diagram.SelectorConstraints.UserHandles } });
Property:`selectedItems.constraints`

var diagram = new ej.diagrams.Diagram({ selectedItems: { constraints: SelectorConstraints.UserHandles }, }); diagram.appendTo('#diagram');
Defines a method that dynamically enables/ disables the interaction with multiple selection Property:`selectedItems.getConstraints`

$("#diagramcontent").ejDiagram({ selectedItems: { getConstraints: function() { return ej.datavisualization.Diagram.NodeConstraints.Drag | ej.datavisualization.Diagram.NodeConstraints.Resize } } });
Not applicable
Sets the height of the selected items Property:`selectedItems.height`

$("#diagramcontent").ejDiagram({ selectedItems: { height:100, width: 100, offsetX:100, offsetY: 100, rotateAngle: 90, } });
Property:`selectedItems.height`

var diagram = new ej.diagrams.Diagram({ selectedItems: { height:100, width: 100, offsetX:100, offsetY: 100, rotateAngle: 90 }, }); diagram.appendTo('#diagram');
Sets the angle to rotate the selected items Property:`selectedItems.tooltip`

$("#diagramcontent").ejDiagram({ selectedItems: { tooltip : { alignment:{ vertical:"top" } } } });
Not applicable
A collection of frequently used commands that will be added around the selector Property:`selectedItems.userHandles`

var userHandle= []; var cloneHandle = ej.datavisualization.Diagram.UserHandle(); userHandle.push(cloneHandle); $("#diagramcontent").ejDiagram({ selectedItems: { userHandles:userHandle } });
Property:`selectedItems.userHandles`

var handle = [{ name: 'handle1', pathData: 'M 60.3,18 H 27.5 c -3,0-5.5,2.4-5.5,5.5 v 38.2 h 5.5 V 23.5 h 32.7 V 18 z M 68.5,28.9 h -30 c -3,0-5.5,2.4-5.5,5.5 v 38.2 c 0,3,2.4,5.5,5.5,5.5 h 30 c 3,0,5.5-2.4,5.5-5.5 V 34.4 C 73.9,31.4,71.5,28.9,68.5,28.9 z M 68.5,72.5 h -30 V 34.4 h 30 V 72.5 z' , visible: true, backgroundColor: 'black', offset: 0, side: 'Bottom', margin: { top: 0, bottom: 0, left: 0, right: 0 }, pathColor: 'white' }]; var diagram = new ej.diagrams.Diagram({ selectedItems: { constraints: SelectorConstraints.UserHandles, userHandles: handle }, }); diagram.appendTo('#diagram');
Sets the horizontal alignment of the user handle Property:`selectedItems.userHandles.horizontalAlignment`

var userHandle = []; var cloneHandle = ej.datavisualization.Diagram.UserHandle(); cloneHandle = {name : "cloneHandle",

pathData : “M 4.6350084,4.8909971 L 4.6350084,9.3649971 9.5480137,9.3649971 9.5480137,4.8909971 z M 3.0000062,2.8189973 L 11.184016,2.8189973 11.184016,10.999997 3.0000062,10.999997 z M 0,0 L 7.3649998,0 7.3649998,1.4020001 1.4029988,1.4020001 1.4029988,8.0660002 0,8.0660002 0,1.4020001 0,0.70300276 z”,

visible : “true”,

backgroundColor : “#4D4D4D”,

offset : ej.datavisualization.Diagram.point(0, 0),

position :” middleleft”

margin : { left: 5 },

pathColor : “white”,

horizontalAlignment : ej.datavisualization.Diagram.HorizontalAlignment.Right, verticalAlignment : ej.datavisualization.Diagram.VerticalAlignment.Top,

borderColor : “red”, borderWidth : 3,

size : 20};

userHandle.push(cloneHandle);

$(“#diagramcontent”).ejDiagram({ selectedItems: { userHandles:userHandle } });

Property:`selectedItems.userHandles.horizontalAlignment`

var handle = [{ name: 'handle1', pathData: 'M 60.3,18 H 27.5 c -3,0-5.5,2.4-5.5,5.5 v 38.2 h 5.5 V 23.5 h 32.7 V 18 z M 68.5,28.9 h -30 c -3,0-5.5,2.4-5.5,5.5 v 38.2 c 0,3,2.4,5.5,5.5,5.5 h 30 c 3,0,5.5-2.4,5.5-5.5 V 34.4 C 73.9,31.4,71.5,28.9,68.5,28.9 z M 68.5,72.5 h -30 V 34.4 h 30 V 72.5 z', visible: true, backgroundColor: 'black', offset: 0, side: 'Bottom', margin: { top: 0, bottom: 0, left: 0, right: 0 }, pathColor: 'white', horizontalAlignment: 'Center', verticalAlignment: 'Center', borderColor: 'red', borderWidth: 3, size: 30 }]; var diagram = new ej.diagrams.Diagram({ selectedItems: { constraints: SelectorConstraints.UserHandles, userHandles: handle }, }); diagram.appendTo('#diagram');
Defines the interactive behaviors of the user handle Property:`selectedItems.userHandles.tool`

var CloneTool = (function(base) { ej.datavisualization.Diagram.extend(CloneTool, base);
function CloneTool(name) {
    base.call(this, name);
    this.singleAction = true;
    this.clonedNodes = [];
    this.cursor = "pointer";
}
CloneTool.prototype.mouseup = function(evt) {
    this.diagram.copy();
    this.diagram.paste();
}

} return CloneTool; }); (ej.datavisualization.Diagram.ToolBase); var userHandle = []; var cloneHandle = ej.datavisualization.Diagram.UserHandle(); cloneHandle.name = “cloneHandle”;

cloneHandle.pathData = “M 4.6350084,4.8909971 L 4.6350084,9.3649971 9.5480137,9.3649971 9.5480137,4.8909971 z M 3.0000062,2.8189973 L 11.184016,2.8189973 11.184016,10.999997 3.0000062,10.999997 z M 0,0 L 7.3649998,0 7.3649998,1.4020001 1.4029988,1.4020001 1.4029988,8.0660002 0,8.0660002 0,1.4020001 0,0.70300276 z”;

cloneHandle.tool = new CloneTool(cloneHandle.name);;

userHandle.push(cloneHandle);

$(“#diagramcontent”).ejDiagram({ selectedItems: { userHandles: userHandle } });

Not applicable
Defines whether the user handle should be added, when more than one element is selected Property:`selectedItems.userHandles.enableMultiSelection`

var userHandle = []; var cloneHandle = ej.datavisualization.Diagram.UserHandle(); cloneHandle.name = "cloneHandle"; cloneHandle.enableMultiSelection = true;

userHandle.push(cloneHandle);

$(“#diagramcontent”).ejDiagram({ selectedItems: { userHandles: userHandle } });

Not applicable
Sets the horizontal alignment of the user handle Not applicable Property:`selectedItems.userHandles.displacement`

var handle = [{ name: 'handle1', pathData: 'M 60.3,18 H 27.5 c -3,0-5.5,2.4-5.5,5.5 v 38.2 h 5.5 V 23.5 h 32.7 V 18 z M 68.5,28.9 h -30 c -3,0-5.5,2.4-5.5,5.5 v 38.2 c 0,3,2.4,5.5,5.5,5.5 h 30 c 3,0,5.5-2.4,5.5-5.5 V 34.4 C 73.9,31.4,71.5,28.9,68.5,28.9 z M 68.5,72.5 h -30 V 34.4 h 30 V 72.5 z', displacement: 30 }]; var diagram = new ej.diagrams.Diagram({ selectedItems: { constraints: SelectorConstraints.UserHandles, userHandles: handle }, }); diagram.appendTo('#diagram');

SerializationSettings

Behaviour API in Essential JS 1 API in Essential JS 2
Defines whether the default diagram properties can be serialized or not Property:`serializationSettings.preventDefaultValues`

$("#diagramcontent").ejDiagram({ serializationSettings: { preventDefaultValues: true } });
Not applicable

Tooltip

Behaviour API in Essential JS 1 API in Essential JS 2
An object that defines the description, appearance and alignments of tooltip Property:`tooltip`

$("#diagramcontent").ejDiagram({ tooltip: { templateId: "mouseovertooltip", relativeMode: ej.datavisualization.Diagram.RelativeMode.Mouse, }, nodes: [{ name: "elizabeth", width: 70, height: 40, offsetX: 100, offsetY: 100, Designation: "Managing Director" }] });
Property:`tooltip`

var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip, tooltip: { content: 'Diagram', position: 'TopLeft', relativeMode: 'Object', animation: { open: { effect: 'FadeZoomIn', delay: 0 }, close: { effect: 'FadeZoomOut', delay: 0 } } }, }); diagram.appendTo('#diagram');
Defines the alignment of tooltip Property:`tooltip.alignment`

$("#diagramcontent").ejDiagram({ tooltip: { templateId: "mouseovertooltip", alignment: { horizontal: "center", vertical: "bottom" }, relativeMode: ej.datavisualization.Diagram.RelativeMode.Mouse, }, nodes: [{ name: "elizabeth", width: 70, height: 40, offsetX: 100, offsetY: 100, Designation: "Managing Director" }] });
Not applicable
Sets the margin of the tooltip Property:`tooltip.margin`

$("#diagramcontent").ejDiagram({ tooltip: { templateId: "mouseovertooltip", alignment: { horizontal: "center", vertical: "bottom" }, relativeMode: ej.datavisualization.Diagram.RelativeMode.Mouse, margin : { left: 5, right: 5, top: 5, bottom: 5 } }, nodes: [{ name: "elizabeth", width: 70, height: 40, offsetX: 100, offsetY: 100, Designation: "Managing Director" }] });
Not applicable
Sets the svg/html template to be bound with tooltip Property:`tooltip.templateId`

$("#diagramcontent").ejDiagram({ tooltip: { templateId: "mouseovertooltip", alignment: { horizontal: "center", vertical: "bottom" }, relativeMode: ej.datavisualization.Diagram.RelativeMode.Mouse, margin : { left: 5, right: 5, top: 5, bottom: 5 } }, nodes: [{ name: "elizabeth", width: 70, height: 40, offsetX: 100, offsetY: 100, Designation: "Managing Director" }] });
Property:`tooltip.content`

var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip, tooltip: { content: 'Diagram', }, }); diagram.appendTo('#diagram');
Defines if the Tooltip has tip pointer or not Not applicable Property:`tooltip.showTipPointer`

var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip, tooltip: { content: 'Diagram', showTipPointer: true, }, }); diagram.appendTo('#diagram');
Defines the position of the Tooltip Not applicable Property:`tooltip.position`

var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip, tooltip: { content: 'Diagram', position: 'TopLeft', relativeMode: 'Object', }, }); diagram.appendTo('#diagram');
Allows to set the same or different animation option for the Tooltip, when it is opened or closed Not applicable Property:`tooltip.animation`

var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip, tooltip: { content: 'Diagram', position: 'TopLeft', relativeMode: 'Object', animation: { open: { effect: 'FadeZoomIn', delay: 0 }, close: { effect: 'FadeZoomOut', delay: 0 } } }, }); diagram.appendTo('#diagram');
Sets the width of the tooltip Not applicable Property:`tooltip.width`

var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip, tooltip: { width: 100, content: 'Diagram', position: 'TopLeft', relativeMode: 'Object' }, }); diagram.appendTo('#diagram');
Sets the height of the Tooltip Not applicable Property:`tooltip.height`

var diagram = new ej.diagrams.Diagram({ width: '100%', height: '600px', constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip, tooltip: { height: 100, content: 'Diagram', position: 'TopLeft', relativeMode: 'Object', }, }); diagram.appendTo('#diagram');