ejDiagram

16 Nov 201924 minutes to read

The diagram control provides 2D surface to visualize the data as shapes, lines, text and images. It can be configured to DOM element such as DIV.

Syntax

$(element).ejDiagram();

Example

HTML

<div id="diagram"></div>
<script>
//Create Diagram
$("#diagram").ejDiagram();
</script>

Requires

module:jquery.js
module:jquery.easing.min.js
module:jsrender.min.js
module:ej.core.js
module:ej.draggable.js
module:ej.scroller.js
module:ej.touch.js
module:ej.diagram.js
module:ej.diagramcommon.js
module:ej.diagraminteraction.js
module:ej.diagramsvg.js
module:ej.diagramtools.js
module:ej.diagramlayout.js
module:ej.matrix.js

Members

backgroundColor `string`

Defines the background color of diagram elements

Default Value:

“transparent”

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({ backgroundColor: "red"});
</script>

backgroundImage `string`

Defines the path of the background image of diagram elements

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({ backgroundImage: "Syncfusion.png" });
</script>

backgroundImage.alignment `enum`

Defines how to align the background image over the diagram area.

Name	Description
None	Scales the graphic content non-uniformly to the width and height of the diagram area
XMinYMin	Used to align the image at the top left of diagram area
XMinYMid	Used to align the image at the left center of diagram area
XMinYMax	Used to align the image at the bottom left of diagram area
XMidYMin	Used to align the image at the top center of diagram area
XMidYMid	Used to align the image at the center of diagram area
XMidYMax	Used to align the image at the bottom center of diagram area
XMaxYMin	Used to align the image at the top right of diagram area/node
XMaxYMid	Used to align the image at the right center of diagram area/node
XMaxYMax	Used to align the image at the bottom right of diagram area/node

Default Value:

ej.datavisualization.Diagram.ImageAlignment.XMidYMid

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({ backgroundImage:{alignment: ej.datavisualization.Diagram.ImageAlignment.XMidYMid }});
</script>

backgroundImage.scale `enum`

Defines how the background image should be scaled/stretched

Name	Description
None	Used to scale the image non-uniformly to the given width/height
Meet	Used to scale the image uniformly so that it fits the viewport
Slice	Used to scale the image uniformly to the maximum

Default Value:

ej.datavisualization.Diagram.ScaleConstraints.Meet

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({ backgroundImage:{scale:ej.datavisualization.Diagram.ScaleConstraints.Meet }});
</script>

backgroundImage.source `string`

Sets the source path of the background image

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({ backgroundImage:{ source:"Syncfusion.png" }});
</script>

bridgeDirection `enum`

Sets the direction of line bridges.

Name	Description
Left	Used to set the direction of line bridges as left
Right	Used to set the direction of line bridges as right
Top	Used to set the direction of line bridges as top
Bottom	Used to set the direction of line bridges as bottom

Default Value:

ej.datavisualization.Diagram.BridgeDirection.Top

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({ bridgeDirection:ej.datavisualization.Diagram.BridgeDirection.Bottom } });
</script>

commandManager `object`

Defines a set of custom commands and binds them with a set of desired key gestures.

commandManager.commands `object`

An object that maps a set of command names with the corresponding command objects

Default Value:

{}

Example

HTML

<div id="diagramcontent"></div>
<script>
	
$("#diagramcontent").ejDiagram( {
   commandManager:{
      commands: { 
		//Command Name
        "clone" : 
		//Command Definition
        { 
            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();
            } 
        } 
     }
   }
});

</script>

commandManager.commands.canExecute `function`

A method that defines whether the command is executable at the moment or not.

Example

HTML

<div id="diagramcontent"></div>
<script>

$("#diagramcontent").ejDiagram( {
   commandManager:{
      commands: { 
		//Command Name
        "clone" : 
		//Method to define whether the command is executable at the moment
        { 
            canExecute : function(args) {
                var diagram = $("#diagramcontent").ejDiagram("instance");
                return diagram.model.selectedItems.children.length;
            }
        } 
     }
   }
});
</script>

#### Returns:

boolean

commandManager.commands.execute `function`

A method that defines what to be executed when the key combination is recognized.

Example

HTML

<div id="diagramcontent"></div>
<script>

$("#diagramcontent").ejDiagram( {
   commandManager:{
      commands: { 
		//Command Name
        "clone" : 
		//Defines what to be executed when the key combination is recognized
        { 
            execute : function(args){
                var diagram = $("#diagramcontent").ejDiagram("instance");
                diagram.copy();
                diagram.paste();
            } 
        } 
     }
   }
});
</script>

commandManager.commands.gesture `object`

Defines a combination of keys and key modifiers, on recognition of which the command will be executed

commandManager.commands.gesture.key `enum`

Sets the key value, on recognition of which the command will be executed.

Name	Description
None	No key pressed.
A	The A key.
B	The B key.
C	The C key.
D	The D Key.
E	The E key.
F	The F key.
G	The G key.
H	The H Key.
I	The I key.
J	The J key.
K	The K key.
L	The L Key.
M	The M key.
N	The N key.
O	The O key.
P	The P Key.
Q	The Q key.
R	The R key.
S	The S key.
T	The T Key.
U	The U key.
V	The V key.
W	The W key.
X	The X key.
Y	The Y key.
Z	The Z key.
Number0	The 0 key.
Number1	The 1 key.
Number2	The 2 key.
Number3	The 3 key.
Number4	The 4 key.
Number5	The 5 key.
Number6	The 6 key.
Number7	The 7 key.
Number8	The 8 key.
Number9	The 9 key.
Left	The LEFT ARROW key.
Up	The UP ARROW key.
Right	The RIGHT ARROW key.
Down	The DOWN ARROW key.
Escape	The ESC key.
Delete	The DEL key.
Tab	The TAB key.
Enter	The ENTER key.

Default Value:

ej.datavisualization.Diagram.Keys.None

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram( {
   commandManager:{
      commands: { 
		//Command Name
        "clone" : 
		//Sets the key corresponding to the command
        { 
            gesture: { key:ej.datavisualization.Diagram.Keys.C, 
				keyModifiers: ej.datavisualization.Diagram.KeyModifiers.Shift }
        } 
     }
   }
});	
</script>

commandManager.commands.gesture.keyModifiers `enum`

Sets a combination of key modifiers, on recognition of which the command will be executed.

Name	Description
None	No modifiers are pressed.
Alt	The ALT key.
Control	The CTRL key.
Shift	The SHIFT key.

Default Value:

ej.datavisualization.Diagram.KeyModifiers.None

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram( {
   commandManager:{
      commands: { 
		//Command Name
        "clone" : 
		//Sets the key modifiers
        { 
            gesture: { key:ej.datavisualization.Diagram.Keys.C, 
				keyModifiers: ej.datavisualization.Diagram.KeyModifiers.Shift }
        } 
     }
   }
});	
</script>

commandManager.commands.parameter `object`

Defines any additional parameters that are required at runtime

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram( {
   commandManager:{
      commands: { 
        "clone" : 
        { 
            execute : function(args){
                var diagram = $("#diagramcontent").ejDiagram("instance");
				//Checks args.parameter
                if(diagram.getObjectType(diagram.model.selectedItems.children[0]) == args.parameter)
                {
                    diagram.copy();
                    diagram.paste();
                }
            },
			// any static value that is required when the command is executed
            parameter : "node" 
        } 
     }
   }
});
</script>

connectors `array`

A collection of JSON objects where each object represents a connector

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = {name:"connector1", sourcePoint:{ x:100, y:100 }, targetPoint:{ x:200,y:200 }};
$("#diagramcontent").ejDiagram({ connectors:[connector] });
</script>

connectors.addInfo `object`

To maintain additional information about connectors

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
var addInfo = { Description: "Bidirectional Flow" };
var connector = { name:"connector1", sourcePoint:{ x:100, y:100 }, targetPoint:{ x:200,y:200 }, addInfo:addInfo };
$("#diagramcontent").ejDiagram({ connectors:[connector] });
</script>

connectors.bridgeSpace `number`

Defines the width of the line bridges

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector1 = { name:"connector1", sourcePoint:{ x:100, y:100 }, targetPoint:{ x:200,y:200 }, 
	               //Set bridge space
	               bridgeSpace: 15 };
var connector2 = { name:"connector2", sourcePoint:{x:150, y:100}, targetPoint:{x:150, y:200}};
var DiagramConstraints = ej.datavisualization.Diagram.DiagramConstraints;
$("#diagramcontent").ejDiagram(
{ 
	connectors:[connector1, connector2],
	//Enable bridging
	constraints:DiagramConstraints.Default | DiagramConstraints.Bridging 
});
</script>

connectors.constraints `enum`

Enables or disables the behaviors of connectors.

Name	Description
None	Disable all connector Constraints
Select	Enables connector to be selected
Delete	Enables connector to be Deleted
Drag	Enables connector to be Dragged
DragSourceEnd	Enables connectors source end to be selected
DragTargetEnd	Enables connectors target end to be selected
DragSegmentThumb	Enables control point and end point of every segment in a connector for editing
Bridging	Enables bridging to the connector
DragLabel	Enables label of node to be Dragged
InheritBridging	Inherit the bridging option defined in the diagram constraints.
AllowDrop	Allows the object to drop over the connector.
InheritTooltip	Inherit the tooltip option defined in the diagram constraints.
PointerEvents	Enables user interaction to the connector
CrispEdges	Enables the contrast between clean edges of connector over rendering speed and geometric precision
InheritCrispEdges	Enables the contrast between clean edges of connector over rendering speed and geometric precision
DragLimit	Enables the contrast between clean edges of connector over rendering speed and geometric precision
BridgeObstacle	Enables or disables bridging over a connector, if bridging constraints disabled..
Interaction	Enables connector to be selected and dragged.
Routing	Enables the Routing for an connector
InheritRouting	Inherit the routing option defined in the diagram constraints.
Default	Enables all constraints

Default Value:

ej.datavisualization.Diagram.ConnectorConstraints.Default

Example

HTML

<div id="diagramcontent"></div>
<script>
var ConnectorConstraints = ej.datavisualization.Diagram.ConnectorConstraints;
var connector = { name:"connector1", sourcePoint:{ x:100, y:100 }, targetPoint:{ x:200,y:200 }, 
	              //Disable selection
                  constraints: ConnectorConstraints.Default & ~ConnectorConstraints.Select };
$("#diagramcontent").ejDiagram({ connectors:[connector] });
</script>

connectors.cornerRadius `number`

Defines the radius of the rounded corner

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{ x:100, y:100 }, targetPoint:{ x:200,y:200 }, 
	              //Set corner radius
                  cornerRadius: 10, segments:[{ type: "orthogonal"}] };
$("#diagramcontent").ejDiagram({ connectors:[connector] });
</script>

connectors.cssClass `string`

This property allows you to customize connectors appearance using user-defined CSS.

Default Value:

””

Example

HTML

<style>
    .hoverConnector:hover {
        stroke:blue
    }
</style>

<div id="diagramcontent"></div>
<script>
var connector = { name: "connector", 
	         cssClass: "hoverConnector", 
	         sourcePoint:{ x:100, y: 100 }, targetPoint: { x: 200, y: 200 } };			 
$("#diagramcontent").ejDiagram({ connectors:[ connector ] });
</script>

connectors.horizontalAlign `enum`

Sets the horizontal alignment of the connector. Applicable, if the parent of the connector is a container.

Name	Description
Left	Used to align text horizontally on left side of node/connector
Center	Used to align text horizontally on center of node/connector
Right	Used to align text horizontally on right side of node/connector

Default Value:

ej.datavisualization.Diagram.HorizontalAlignment.Left

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector1 = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:150, y:150}, 
	               //Set the horizontal alignment
	               horizontalAlign:ej.datavisualization.Diagram.HorizontalAlignment.Right }; 
				   
var group = { name :"group", children:[ connector1 ], 
              container: { type: "canvas" }, offsetX:200, offsetY:100, 
              minWidth:200, minHeight: 200, fillColor:"gray" };
			  
$("#diagramcontent").ejDiagram({nodes:[group]});
</script>

connectors.labels `array`

A collection of JSON objects where each object represents a label.

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
	              //Define the labels collection
                  labels:[{ text:"connector" }]}; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.labels.alignment `enum`

Defines how the label should be aligned with respect to the segment

Name	Description
Before	Used to align the label either top or left(before) of the connector segment
Center	Used to align the label at center of the connector segment
After	Used to align the label either bottom or right(after) of the connector segment

Default Value:

ej.datavisualization.Diagram.Alignment.Center

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
	              //Define the labels collection
                  labels:[{ text:"connector", alignment:"before" }]}; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.labels.bold `boolean`

Enables/disables the bold style

Default Value:

false

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
         labels:[{ text:"label", bold:true}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.borderColor `string`

Sets the border color of the label

Default Value:

“transparent”

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
         labels:[{ text:"label", borderColor:"red", borderWidth: 2}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.borderWidth `number`

Sets the border width of the label

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
         labels:[{ text:"label", borderColor:"red", borderWidth: 2}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.boundaryConstraints `boolean`

Defines whether the label should be aligned within the connector boundaries

Default Value:

true

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
         labels:[{ text:"label", boundaryConstraints: "false"}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.constraints `enum`

Enables or disables the default behaviors of the label.

Name	Description
None	Disable all label Constraints
Selectable	Enables label to be selected
Draggable	Enables label to be Dragged
Resizable	Enables label to be Resized
Rotatable	Enables label to be Rotated
All	Enables all label constraints

Default Value:

ej.datavisualization.Diagram.LabelConstraints.None

Example

HTML

<div id="diagramcontent"></div>
<script>
var LabelConstraints = ej.datavisualization.Diagram.LabelConstraints;
//Disable resize
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, 
         labels:[{ text:"Enter Your Text", constraints: LabelConstraints.All & ~LabelConstraints.Resizable}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.fillColor `string`

Sets the fill color of the text area

Default Value:

“transparent”

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
         labels:[{ text:"label", fillColor: "green"}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.fontColor `string`

Sets the font color of the text

Default Value:

“black”

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
         labels:[{ text:"label", fontColor: "green"}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.fontFamily `string`

Sets the font family of the text

Default Value:

“Arial”

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
         labels:[{ text:"label", fontColor: "green", fontFamily:"seugoe UI"}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.fontSize `number`

Defines the font size of the text

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
         labels:[{ text:"label", fontSize: 14}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});

</script>

connectors.labels.height `number`

Sets the height of the label(the maximum value of label height and the connector height will be considered as label height)

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, 
         labels:[{ text:"Label", height: 100}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.horizontalAlignment `enum`

Sets the horizontal alignment of the label.

Default Value:

ej.datavisualization.Diagram.HorizontalAlignment.Center

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
	     //Align the text at the left most position of connector
         labels:[{ text:"label", offset:{ x:0 }, horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Left}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.hyperlink `string`

Sets the hyperlink for the labels in the connectors.

Default Value:

none

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors =[
    {name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
    labels: [{ "hyperText": "https://www.syncfusion.com" }]
    }];
$("#diagramcontent").ejDiagram({connectors:connectors);
</script>

connectors.labels.italic `boolean`

Enables/disables the italic style

Default Value:

false

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
         labels:[{ text:"label", italic:true}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.mode `enum`

Gets whether the label is currently being edited or not.

Default Value:

ej.datavisualization.Diagram.LabelEditMode.Edit

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = diagram.selectionList[0];
console.log(connector.labels[0].mode);
</script>

connectors.labels.name `string`

Sets the unique identifier of the label

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
         labels:[{ text:"label", name:"label1"}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.offset `object`

Sets the fraction/ratio(relative to connector) that defines the position of the label

Default Value:

ej.datavisualization.Diagram.Point(0.5, 0.5)

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
         labels:[{ text:"label", offset:ej.datavisualization.Diagram.Point(0,0.5) }]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});

</script>

connectors.labels.margin `object`

Sets the fraction/ratio(relative to connector) that defines the position of the label

Default Value:

ej.datavisualization.Diagram.Point(0.5, 0.5)

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
         labels:[{ text:"label", offset:ej.datavisualization.Diagram.Point(0,0.5) }]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});

</script>

connectors.labels.margin.right `number`

To set the margin of the label in right direction

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
	     //Leaves 5px space between the left boundary of connector and label
         labels:[{ text:"label", offset:{ x:0 }, horizontalAlignment:"left", margin:{ right: 5 }}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.margin.left `number`

To set the margin of the label in left direction

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
	     //Leaves 5px space between the left boundary of connector and label
         labels:[{ text:"label", offset:{ x:0 }, horizontalAlignment:"left", margin:{ left: 5 }}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.margin.top `number`

To set the margin of the label in top direction

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
	     //Leaves 5px space between the left boundary of connector and label
         labels:[{ text:"label", offset:{ x:0 }, horizontalAlignment:"left", margin:{ top: 5 }}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.margin.bottom `number`

To set the margin of the label in bottom direction

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
	     //Leaves 5px space between the left boundary of connector and label
         labels:[{ text:"label", offset:{ x:0 }, horizontalAlignment:"left", margin:{ bottom: 5 }}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.padding `object`

Sets the padding for connector label.

Default Value:

ej.datavisualization.Diagram.Point(0.5, 0.5)

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
         labels:[{ text:"label", offset:ej.datavisualization.Diagram.Point(0,0.5),padding:{ right: 5 } }]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});

</script>

connectors.labels.dragLimit `object`

Sets the value which is used to drag the label within certain bounds.

Default Value:

null

connectors.labels.dragLimit.right `number`

To set the drag limit of the label in right direction

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
    var connectors;
    connectors = [{ 
        name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
            //Leaves 5px space between the left boundary of connector and label
        labels:[{ text:"label", offset:{ x:0 }, horizontalAlignment:"left", dragLimit:{ right: 5 }}]
    }];
    $("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.dragLimit.left `number`

To set the drag limit of the label in left direction

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
    var connectors;
    connectors = [{ 
        name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
            //Leaves 5px space between the left boundary of connector and label
        labels:[{ text:"label", offset:{ x:0 }, horizontalAlignment:"left", dragLimit:{ left: 5 }}]
    }];
    $("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.dragLimit.top `number`

To set the drag limit of the label in top direction

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
    var connectors;
    connectors = [{ 
        name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
            //Leaves 5px space between the left boundary of connector and label
        labels:[{ text:"label", offset:{ x:0 }, horizontalAlignment:"left", dragLimit:{ top: 10 }}]
    }];
    $("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.dragLimit.bottom `number`

To set the drag limit of the label in bottom direction

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
    var connectors;
    connectors = [{ 
        name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
            //Leaves 5px space between the left boundary of connector and label
        labels:[{ text:"label", offset:{ x:0 }, horizontalAlignment:"left", dragLimit:{ bottom: 10 }}]
    }];
    $("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.opacity `number`

Defines the transparency of labels

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
         labels:[{ text:"label", opacity: 0.7}
             ]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.readOnly `boolean`

Defines whether the label is editable or not

Default Value:

false

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
         labels:[{ text:"label", readOnly:true}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.relativeMode `enum`

Defines whether the label should be positioned whether relative to segments or connector boundaries

Name	Description
SegmentPath	Sets the relativeMode as SegmentPath
SegmentBounds	Sets the relativeMode as SegmentBounds

Default Value:

ej.datavisualization.Diagram.LabelRelativeMode.SegmentPath

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
         labels:[{ text:"label", relativeMode:"segmentPath"}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.rotateAngle `number`

Defines the angle to which the label needs to be rotated

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
         labels:[{ text:"label", rotateAngle: 90}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.segmentOffset `string`

Sets the position of the label with respect to the total segment length

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
         labels:[{ text:"Label", segmentOffset:0.7}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.text `string`

Defines the label text

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
         labels:[{ text:"Label"}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.textAlign `enum`

Defines how to align the text inside the label.

Default Value:

ej.datavisualization.Diagram.TextAlign.Center

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
         labels:[{ text:"node Label", textAlign:ej.datavisualization.Diagram.TextAlign.Left}]
      }];
$("#diagramcontent").ejDiagram({ connectors:connectors });
</script>

connectors.labels.textDecoration `enum`

Sets how to decorate the label text.

Default Value:

ej.datavisualization.Diagram.TextDecorations.None

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
	     //Decorate the text with an underline
         labels:[{ text:"Label", textDecoration: ej.datavisualization.Diagram.TextDecorations.Underline}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.verticalAlignment `enum`

Sets the vertical alignment of the label.

Default Value:

ej.datavisualization.Diagram.VerticalAlignment.Center

Example

HTML

<div id="diagramcontent"></div>
<script>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
	     //Aligns the text at the top most position of connector
         labels:[{ text:"label", offset:{ y:0 }, verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Top }]
      }];
$("#diagramcontent").ejDiagram({ connectors:connectors });
</script>

connectors.labels.visible `boolean`

Enables or disables the visibility of the label

Default Value:

true

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
         labels:[{ text:"Label", visible: false}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.width `number`

Sets the width of the label(the maximum value of label width and the connector width will be considered as label width)

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
         labels:[{ text:"Label", width: 100}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.labels.wrapping `enum`

Defines how the label text needs to be wrapped.

Default Value:

ej.datavisualization.Diagram.TextWrapping.WrapWithOverflow

Example

HTML

<div id="diagramcontent"></div>
<script>
var connectors;
connectors=[{ name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, 
         labels:[{ text:"Enter Your Text", wrapping:ej.datavisualization.Diagram.TextWrapping.NoWrap}]
      }];
$("#diagramcontent").ejDiagram({connectors:connectors});
</script>

connectors.lineColor `string`

Sets the stroke color of the connector

Default Value:

“black”

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
                  lineColor:"blue" }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.lineDashArray `string`

Sets the pattern of dashes and gaps used to stroke the path of the connector

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
                  lineColor:"blue", lineDashArray: "2,2" }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.lineHitPadding `number`

Defines the padding value to ease the interaction with connectors

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
                  lineHitPadding: 15 }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.lineWidth `number`

Sets the width of the line

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
                  lineWidth: 10 }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.marginBottom `number`

Defines the minimum space to be left between the bottom of parent bounds and the connector. Applicable, if the parent is a container.

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
	
var connector1 = { name:"connector1", sourcePoint:{x:100, y:100}, 
                   targetPoint:{x:150, y:150}, verticalAlign:"bottom", marginBottom: 10 }; 
var group = { name :"group", children:[ connector1 ], 
              container: { type: "canvas" }, offsetX:200, offsetY:100, 
              minWidth:200, minHeight: 200, fillColor:"gray" };
$("#diagramcontent").ejDiagram({nodes:[group]});

</script>

connectors.marginLeft `number`

Defines the minimum space to be left between the left of parent bounds and the connector. Applicable, if the parent is a container.

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector1 = { name:"connector1", sourcePoint:{x:100, y:100}, 
                   targetPoint:{x:150, y:150}, horizontalAlign:"left", marginLeft: 10 }; 
var group = { name :"group", children:[ connector1 ], 
              container: { type: "canvas" }, offsetX:200, offsetY:100, 
              minWidth:200, minHeight: 200, fillColor:"gray" };
$("#diagramcontent").ejDiagram({nodes:[group]});
</script>

connectors.marginRight `number`

Defines the minimum space to be left between the right of parent bounds and the connector. Applicable, if the parent is a container.

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector1 = { name:"connector1", sourcePoint:{x:100, y:100}, 
                   targetPoint:{x:150, y:150}, horizontalAlign:"right", marginRight: 10 }; 
var group = { name :"group", children:[ connector1 ], 
              container: { type: "canvas" }, offsetX:200, offsetY:100, 
              minWidth:200, minHeight: 200, fillColor:"gray" };
$("#diagramcontent").ejDiagram({nodes:[group]});
</script>

connectors.marginTop `number`

Defines the minimum space to be left between the top of parent bounds and the connector. Applicable, if the parent is a container.

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector1 = { name:"connector1", sourcePoint:{x:100, y:100}, 
                   targetPoint:{x:150, y:150}, verticalAlign:"top", marginTop: 10 }; 
var group = { name :"group", children:[ connector1 ], 
              container: { type: "canvas" }, offsetX:200, offsetY:100, 
              minWidth:200, minHeight: 200, fillColor:"gray" };
$("#diagramcontent").ejDiagram({nodes:[group]});
</script>

connectors.name `string`

Sets a unique name for the connector

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200} }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.opacity `number`

Defines the transparency of the connector

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, 
	              opacity: 0.5 }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.paletteItem `object`

Defines the size and preview size of the node to add that to symbol palette. To explore palette item, refer Palette Item

Default Value:

null

Example

HTML

<div id="symbolpalette"></div>
<script>
	
$("#symbolpalette").ejSymbolPalette({
	//Defines the palette collection 
	palettes: [{
		name: "Connectors", expanded: true,
		items: [
		{
			name: "connector", sourcePoint:{x: 0, y: 0}, targetPoint:{x:50, y: 50}, 
			segments:[{ type:"bezier" }],
			//Sets preview size
			paletteItem: {
                previewWidth: 100,
				previewHeight: 100
			}
		}]
	}]
});
</script>

connectors.parent `string`

Sets the parent name of the connector.

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, parent:"group"}; 
var group = { name :"group", children:["connector1"] };
$("#diagramcontent").ejDiagram({ nodes:[group], connectors : [connector]});
</script>

connectors.segments `array`

An array of JSON objects where each object represents a segment

Default Value:

[ { type:”straight” } ]

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, 
	              //Defines a collection of segments
                  segments: [{type:"straight", point: { x:75, y:150 }}] }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.segments.direction `string`

Sets the direction of orthogonal segment

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, 
                  segments: [{type:"orthogonal", direction:"bottom", length:50}] }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.segments.length `number`

Describes the length of orthogonal segment

Default Value:

undefined

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, 
                  segments: [{type:"orthogonal", direction:"bottom", length:50}] }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.segments.point `object`

Describes the end point of bezier/straight segment

Default Value:

Diagram.Point()

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, 
	              //Defines a collection of segments
                  segments: [{ type:"straight", point: { x:75, y:150 }}] }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.segments.point1 `object`

Defines the first control point of the bezier segment

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, 
                  segments: [{ type:"bezier", point1: { x:150, y:50} }] }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.segments.point2 `object`

Defines the second control point of bezier segment

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", 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]});
</script>

connectors.segments.type `enum`

Sets the type of the segment.

Name	Description
Straight	Used to specify the lines as Straight
Orthogonal	Used to specify the lines as Orthogonal
Bezier	Used to specify the lines as Bezier

Default Value:

ej.datavisualization.Diagram.Segments.Straight

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, 
                  segments: [{ type: ej.datavisualization.Diagram.Segments.Bezier }] }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.segments.vector1 `object`

Describes the length and angle between the first control point and the start point of bezier segment

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", 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]});
</script>

connectors.segments.vector2 `object`

Describes the length and angle between the second control point and end point of bezier segment

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", 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]});
</script>

connectors.shape `object`

Defines the role/meaning of the connector

Default Value:

null

connectors.shape.type `enum`

Sets the type of the connector

Name	Description
BPMN	Used to specify connector type as BPMN
UMLClassifier	Used to specify connector type as UMLClassifier
UMLActivity	Used to specify connector type as UMLActivity

Default Value:

ej.datavisualization.Diagram.ConnectorShapes.BPMN

Example

HTML

<div id="diagramcontent"></div>
<script>        
var connector = [{ name: "connector1", sourcePoint: { x: 50, y: 200 }, targetPoint: { x: 200, y: 200 }, 
     segments: [{ type: "straight" }], shape: { type: "bpmn"} }]

$("#diagramcontent").ejDiagram({connectors : connector});
</script>

connectors.shape.flow `enum`

Sets the type of the flow in a BPMN Process

Name	Description
Sequence	Used to specify the Sequence flow in a BPMN Process
Association	Used to specify the Association flow in a BPMN Process
Message	Used to specify the Message flow in a BPMN Process

Default Value:

ej.datavisualization.Diagram.BPMNFlows.Sequence

Example

HTML

<div id="diagramcontent"></div>
<script>        
var connector = [{ name: "connector1", sourcePoint: { x: 50, y: 200 }, targetPoint: { x: 200, y: 200 }, 
     segments: [{ type: "straight" }], shape: { type: "bpmn", flow: "message" } }],

$("#diagramcontent").ejDiagram({connectors : connector});
</script>

connectors.shape.association `enum`

Sets the type of the Association in a BPMN Process

Name	Description
Default	Used to notate default association in a BPMN Process
Directional	Used to notate directional association in a BPMN Process
BiDirectional	User to notate bi-directional association in a BPMN Process

Default Value:

ej.datavisualization.Diagram.AssociationFlows.Default

Example

HTML

<div id="diagramcontent"></div>
<script>        
var connector = [{ name: "connector1", sourcePoint: { x: 50, y: 300 }, targetPoint: { x: 200, y: 300 }, 
     segments: [{ type: "straight" }], shape: { type: "bpmn", flow: "association", association: "bidirectional" } }],

$("#diagramcontent").ejDiagram({connectors : connector});
</script>

connectors.shape.message `enum`

Sets the type of the message flow. Applicable, if the connector is of type “BPMN”

Name	Description
Default	Used to notate the default message flow in a BPMN Process
InitiatingMessage	Used to notate the instantiating message flow in a BPMN Process
NonInitiatingMessage	Used to notate the non-instantiating message flow in a BPMN Process

Default Value:

ej.datavisualization.Diagram.BPMNMessageFlows.Default

Example

HTML

<div id="diagramcontent"></div>
<script>        
var connector = [{ name: "connector1", sourcePoint: { x: 50, y: 600 }, targetPoint: { x: 200, y: 600 }, 
     segments: [{ type: "straight" }], shape: { type: "bpmn", flow: "message", message: "ej.datavisualization.Diagram.BPMNMessageFlows.NonInitiatingMessage" } }],

$("#diagramcontent").ejDiagram({connectors : connector});
</script>

connectors.shape.sequence `enum`

Sets the type of BPMN sequence flow

Name	Description
Normal	Used to notate the normal sequence flow in a BPMN Process
Conditional	Used to notate the conditional sequence flow in a BPMN Process
Default	Used to notate the default sequence flow in a BPMN Process

Default Value:

ej.datavisualization.Diagram.BPMNSequenceFlows.Normal

Example

HTML

<div id="diagramcontent"></div>
<script>        
var connector = [{ name: "connector1", sourcePoint: { x: 50, y: 600 }, targetPoint: { x: 200, y: 600 }, 
     segments: [{ type: "straight" }], shape: { type: "bpmn", flow: "sequence", sequence: "default" } }]

$("#diagramcontent").ejDiagram({connectors : connector});
</script>

connectors.shape.relationship `enum`

Defines the role of the connector in a UML Class Diagram. Applicable, if the type of the connector is “classifier”.

Name	Description
class	Used to define a Class
Interface	Used to define an Interface
Enumeration	Used to define an Enumeration
Association	Used to notate association in UML Class Diagram
Aggregation	Used to notate aggregation in a UML Class Diagram
Composition	Used to notate composition in a UML Class Diagram
Dependency	Used to notate dependency in a UML Class Diagram
Inheritance	Used to notate inheritance in a UML Class Diagram

Default Value:

ej.datavisualization.Diagram.ClassifierShapes.Association

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, 
                  shape: {type: "umlclassifier", relationship: ej.datavisualization.Diagram.ClassifierShapes.Aggregation,
                 } }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.shape.multiplicity `object`

Defines the multiplicity option of the connector

Default Value:

null

connectors.shape.multiplicity.type `enum`

Sets the type of the multiplicity. Applicable, if the connector is of type “classifier”

Name	Description
OneToOne	Each entity instance is related to a single instance of another entity
OneToMany	An entity instance can be related to multiple instances of the other entities
ManyToOne	Multiple instances of an entity can be related to a single instance of the other entity
ManyToMany	The entity instances can be related to multiple instances of each other

Default Value:

ej.datavisualization.Diagram.Multiplicity.OneToOne

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, 
                  shape: {type: "umlclassifier", relationship: ej.datavisualization.Diagram.ClassifierShapes.Dependency, multiplicity:{type: "onetomany"}
                 } }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.shape.multiplicity.source `object`

Defines the source label to connector. Applicable, if the connector is of type “UML”

connectors.shape.multiplicity.source.optional `boolean`

Defines the source label to connector. Applicable, if the connector is of type “UML”

Type	Source	Target
OneToOne	false	false
OneToMany	false	true
ManyToOne	true	false
ManyToMany	true	true

Default Value:

true

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, 
                  shape: {type: "umlclassifier", relationship: ej.datavisualization.Diagram.ClassifierShapes.Dependency, 
                      multiplicity:{
                          type: "onetomany", source: { optional: true, lowerBounds: 89, upperBounds: 67 }}
                 } }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.shape.multiplicity.source.lowerBounds `number`

Defines the source label to connector. Applicable, if the connector is of type “UML”

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, 
                  shape: {type: "umlclassifier", relationship: ej.datavisualization.Diagram.ClassifierShapes.Dependency, 
                      multiplicity:{
                          type: "onetomany", 
                          source: { optional: true, 
                              //
                              lowerBounds: 1, upperBounds: 10 }}
                 } }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.shape.multiplicity.source.upperBounds `number`

Defines the source label to connector. Applicable, if the connector is of type “UML”

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, 
                  shape: {type: "umlclassifier", relationship: ej.datavisualization.Diagram.ClassifierShapes.Dependency, 
                      multiplicity:{
                          type: "onetomany", 
                          source: { optional: true, lowerBounds: 1, upperBounds: 10 }}
                 } }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.shape.multiplicity.target `object`

Defines the target label to connector. Applicable, if the connector is of type “UML”

Default Value:

true

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, 
                  shape: {type: "umlclassifier", relationship: ej.datavisualization.Diagram.ClassifierShapes.Dependency, 
                      multiplicity:{type: "onetomany",
                          source: { optional: true, lowerBounds: 1, upperBounds: 10 },
                          target: { optional: true, lowerBounds: 1, upperBounds: 10 }}
                 } }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.shape.ActivityFlow `enum`

Defines the shape of UMLActivity to connector. Applicable, if the connector is of type UMLActivity

Name	Description
Object	Defines a activity flow as Object in UML Activity Diagram
Control	Defines a activity flow as Control in UML Activity Diagram
Exception	Defines a activity flow as Exception in UML Activity Diagram

Default Value:

ej.datavisualization.Diagram.UMLActivityFlow.Control

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, 
shape: { type: "umlactivity", activityFlow: ej.datavisualization.Diagram.UMLActivityFlow.Exception }
}; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.sourceDecorator `object`

Defines the source decorator of the connector

Default Value:

{ shape:”arrow”, width: 8, height:8, borderColor:”black”, fillColor:”black” }

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
                  sourceDecorator : { shape:"openarrow" } }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.sourceDecorator.borderColor `string`

Sets the border color of the source decorator

Default Value:

“black”

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, lineColor:"red",
                  sourceDecorator : { shape:"openarrow" , borderColor:"red"} }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.sourceDecorator.borderWidth `number`

Sets the border width of the decorator

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
                  sourceDecorator : { shape:"openarrow" , borderWidth: 5} }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.sourceDecorator.cssClass `string`

This property allows you to customize sourceDecorator appearance using user-defined CSS.

Default Value:

””

Example

HTML

<style>
    .hoverDecorator:hover {
         fill:blue;
    }
</style>

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, lineColor:"red",
                  sourceDecorator : { shape:"circle" , cssClass:"hoverDecorator"} }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.sourceDecorator.fillColor `string`

Sets the fill color of the source decorator

Default Value:

“black”

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, lineColor:"red",
                  sourceDecorator : { shape:"circle" , fillColor:"red"} }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.sourceDecorator.height `number`

Sets the height of the source decorator

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, lineColor:"red",
                  sourceDecorator : { width: 10, height:10 } }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.sourceDecorator.pathData `string`

Defines the custom shape of the source decorator

Default Value:

””

Example

HTML

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

connectors.sourceDecorator.shape `enum`

Defines the shape of the source decorator.

Name	Description
None	Used to set decorator shape as none
Arrow	Used to set decorator shape as Arrow
OpenArrow	Used to set decorator shape as Open Arrow
Circle	Used to set decorator shape as Circle
Diamond	Used to set decorator shape as Diamond
Path	Used to set decorator shape as path

Default Value:

ej.datavisualization.Diagram.DecoratorShapes.Arrow

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
                  sourceDecorator : { shape: ej.datavisualization.Diagram.DecoratorShapes.Circle } }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.sourceDecorator.width `number`

Defines the width of the source decorator

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, lineColor:"red",
                  sourceDecorator : { width: 10, height:10 } }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.sourceNode `string`

Sets the source node of the connector

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
	
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:"connector1", sourceNode:"source", targetNode:"target" }; 
$("#diagramcontent").ejDiagram({nodes:[ node1, node2 ],connectors : [connector]});

</script>

connectors.sourcePadding `number`

Defines the space to be left between the source node and the source point of a connector

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
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:"connector1", 
                  sourceNode:"source", targetNode:"target",
                  sourcePadding: 2, targetPadding: 2 }; 
$("#diagramcontent").ejDiagram({nodes:[ node1, node2 ],connectors : [connector]});
</script>

connectors.sourcePoint `object`

Describes the start point of the connector

Default Value:

ej.datavisualization.Diagram.Point()

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", 
				  sourcePoint:{x:100, y:100}, 
				  targetPoint:{x:200, y:200} }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.sourcePoint.x `number`

Defines the x-coordinate of a position

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var point = {x: 10};
</script>

connectors.sourcePoint.y `number`

Defines the y-coordinate of a position

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var point = {y: 10};
</script>

connectors.sourcePort `string`

Sets the source port of the connector

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
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:"port", offset: { x:0, y:0.5 } }] };
var connector = { name:"connector1", 
                  sourceNode:"source", targetNode:"target",
                  sourcePort: "port", targetPort:"port" }; 
$("#diagramcontent").ejDiagram({nodes:[ node1, node2 ],connectors : [connector]});
</script>

connectors.targetDecorator `object`

Defines the target decorator of the connector

Default Value:

{ shape:”arrow”, width: 8, height:8, borderColor:”black”, fillColor:”black” }

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
                  targetDecorator : { shape:"openarrow" } }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.targetDecorator.borderColor `string`

Sets the border color of the decorator

Default Value:

“black”

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, lineColor:"red",
                  sourceDecorator : { shape:"openarrow" , borderColor:"red"} }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.targetDecorator.cssClass `string`

This property allows you to customize targetDecorator appearance using user-defined CSS.

Default Value:

””

Example

HTML

<style>
    .hoverDecorator:hover {
         fill:blue;
    }
</style>

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, lineColor:"red",
                  targetDecorator : { shape:"circle" , cssClass:"hoverDecorator"} }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.targetDecorator.fillColor `string`

Sets the color with which the decorator will be filled

Default Value:

“black”

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, lineColor:"red",
                  targetDecorator : { shape:"circle" , fillColor:"red"} }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.targetDecorator.height `number`

Defines the height of the target decorator

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, lineColor:"red",
                  targetDecorator : { width: 10, height:10 } }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.targetDecorator.pathData `string`

Defines the custom shape of the target decorator

Default Value:

””

Example

HTML

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

connectors.targetDecorator.shape `enum`

Defines the shape of the target decorator.

Name	Description
None	Used to set decorator shape as none
Arrow	Used to set decorator shape as Arrow
OpenArrow	Used to set decorator shape as Open Arrow
Circle	Used to set decorator shape as Circle
Diamond	Used to set decorator shape as Diamond
Path	Used to set decorator shape as path

Default Value:

ej.datavisualization.Diagram.DecoratorShapes.Arrow

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200},
                  targetDecorator : { shape:ej.datavisualization.Diagram.DecoratorShapes.Circle } }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.targetDecorator.width `number`

Defines the width of the target decorator

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, lineColor:"red",
                  targetDecorator : { width: 10, height:10 } }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.targetNode `string`

Sets the target node of the connector

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
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:"connector1", sourceNode:"source", targetNode:"target" }; 
$("#diagramcontent").ejDiagram({nodes:[ node1, node2 ],connectors : [connector]});
</script>

connectors.targetPadding `number`

Defines the space to be left between the target node and the target point of the connector

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
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:"connector1", 
                  sourceNode:"source", targetNode:"target",
                  sourcePadding: 2, targetPadding: 2 }; 
$("#diagramcontent").ejDiagram({nodes:[ node1, node2 ],connectors : [connector]});
</script>

connectors.targetPoint `object`

Describes the end point of the connector

Default Value:

ej.datavisualization.Diagram.Point()

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", 
				  sourcePoint:{x:100, y:100}, 
				  targetPoint:{x:200, y:200} }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.targetPort `string`

Sets the targetPort of the connector

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
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:"port", offset: { x:0, y:0.5 } }] };
var connector = { name:"connector1", 
                  sourceNode:"source", targetNode:"target",
                  sourcePort: "port", targetPort:"port" }; 
$("#diagramcontent").ejDiagram({nodes:[ node1, node2 ],connectors : [connector]});
</script>

connectors.tooltip `object`

Defines the tooltip that should be shown when the mouse hovers over connector. For tooltip properties, refer Tooltip

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>

<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>

<script>
var tooltip = {
		templateId: "mouseovertooltip",
		alignment: {
			horizontal: "center",
			vertical: "bottom"
		}
	};
var ConnectorConstraints = ej.datavisualization.Diagram.ConnectorConstraints;
$("#diagramcontent").ejDiagram({	
//Defines connectors
	connectors: [{
		name: "flow1",sourcePoint: { x:100, y: 100 }, targetPoint :{ x:200, y:200 },
		//Define tooltip
        constraints: ConnectorConstraints.Default & ~ConnectorConstraints.InheritTooltip, 
        tooltip:tooltip
	}]
});
</script>

connectors.verticalAlign `enum`

To set the vertical alignment of connector (Applicable,if the parent is group).

Name	Description
Top	Used to align text Vertically on left side of node/connector
Center	Used to align text Vertically on center of node/connector
Bottom	Used to align text Vertically on bottom of node/connector

Default Value:

ej.datavisualization.Diagram.VerticalAlignment.Top

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector1 = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:150, y:150}, 
	               //Set the horizontal alignment
	               verticalAlign:ej.datavisualization.Diagram.VerticalAlignment.Bottom }; 
				   
var group = { name :"group", children:[ connector1 ], 
              container: { type: "canvas" }, offsetX:200, offsetY:100, 
              minWidth:200, minHeight: 200, fillColor:"gray" };
			  
$("#diagramcontent").ejDiagram({nodes:[group]});
</script>

connectors.visible `boolean`

Enables or disables the visibility of connector

Default Value:

true

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector1", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, 
                  visible: false }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectors.zOrder `number`

Sets the z-index of the connector

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var connector = { name:"connector", sourcePoint:{x:100, y:100}, targetPoint:{x:200, y:200}, 
                  zOrder: 1000 }; 
$("#diagramcontent").ejDiagram({connectors : [connector]});
</script>

connectorTemplate `object`

Binds the custom JSON data with connector properties

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
   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 },
	   //Sets the method name to connector template 
	   connectorTemplate :"connectorTemplate"
   });
   
   //Sets the default styles and binds custom data with connector
    function connectorTemplate(diagram, connector) {
         if(connector.sourceNode && connector.targetNode){
			 connector.linecolor = "green";
		 }
     }
</script>

constraints `enum`

Enables/Disables the default behaviors of the diagram.

Name	Description
None	Disables all DiagramConstraints
APIUpdate	Enables/Disables interaction done with the help of API methods
UserInteraction	Enables/Disables UserInteraction
PageEditable	Enables/Disables PageEditing
Bridging	Enables/Disables Bridging
Zoomable	Enables/Disables Zooming
PannableX	Enables/Disables panning on horizontal axis
PannableY	Enables/Disables panning on vertical axis
Pannable	Enables/Disables Panning
Undoable	Enables/Disables undo actions
CrispEdges	Enables/Disables the sharp edges
Resizable	Enables/Disables the Diagram size updation on the window resize function
ZoomTextEditor	Enables/Disables the Zooming of labels text editor
FloatElements	Enables/Disables the drag and drop of element from one diagram to the other
Routing	Enables the routing for an connector in diagram
Default	Enables all Constraints

Default Value:

ej.datavisualization.Diagram.DiagramConstraints.All

Example

HTML

<div id="diagramcontent"></div>
<script>
var DiagramConstraints = ej.datavisualization.Diagram.DiagramConstraints;
//Enables line bridging
$("#diagramcontent").ejDiagram({
	constraints: DiagramConstraints.Default | DiagramConstraints.Bridging });
</script>

contextMenu `object`

An object to customize the context menu of diagram

contextMenu.items `array`

Defines the collection of context menu items

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
//Collection of items
var menuitems = [{ "name": "hyperLink", "text": "Hyperlink", "image": "", "style": "" }];
var contextMenu = { items: menuitems};
$("#diagramcontent").ejDiagram({contextMenu: contextMenu});
</script>

contextMenu.items.text `string`

Defines the text for the collection of context menu item

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
//Collection of items
var menuitems = [{ "text": "ZoomIn" }];
var contextMenu = { items: menuitems};
$("#diagramcontent").ejDiagram({contextMenu: contextMenu});
</script>

contextMenu.items.name `string`

Defines the name for the collection of context menu items

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
//Collection of items
var menuitems = [{ "name": "zoomin"}];
var contextMenu = { items: menuitems};
$("#diagramcontent").ejDiagram({contextMenu: contextMenu});
</script>

contextMenu.items.imageUrl `string`

Defines the image url for the collection of context menu items

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
//Collection of items
var menuitems = [{ "name": "zoomin", "text": "ZoomIn","imageUrl": "Images/zoomin.png", "style": "" }];
var contextMenu = { items: menuitems};
$("#diagramcontent").ejDiagram({contextMenu: contextMenu});
</script>

contextMenu.items.cssClass `string`

Defines the CssClass for the collection of context menu items

Default Value:

null

Example

HTML

<style>
    .menuplace{
            background-size:14px 14px;
            }
</style>

<div id="diagramcontent"></div>
<script>
//Collection of items
var menuitems = [{ "name": "zoomin", "text": "ZoomIn","imageUrl": "Images/zoomin.png", "cssClass":"menuplace", "style": "" }];
var contextMenu = { items: menuitems};
$("#diagramcontent").ejDiagram({contextMenu: contextMenu});
</script>

contextMenu.items.subItems `Array`

Defines the collection of sub items for the context menu items

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
    contextMenu: {
            // Defines the custom context menu items
            items: [{
                name: "zoom",
                // Text to be displayed
                text: "Zoom",
                // Defines the sub items
                subItems: [{name: "zoomIn", text: "ZoomIn"}, {name: "zoomOut",text: "ZoomOut"}]
            }]
        }});
</script>

contextMenu.showCustomMenuItemsOnly `boolean`

To set whether to display the default context menu items or not

Default Value:

false

Example

HTML

<div id="diagramcontent"></div>
<script>
var contextMenu = { showCustomMenuItemsOnly: true };
$("#diagramcontent").ejDiagram({contextMenu: contextMenu});
</script>

dataSourceSettings `object`

Configures the data source that is to be bound with diagram

dataSourceSettings.dataSource `object`

Defines the data source either as a collection of objects or as an instance of ej.DataManager

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
	
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 }
   });
   
</script>

dataSourceSettings.id `string`

Sets the unique id of the data source items

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
   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 }
   });
</script>

dataSourceSettings.parent `string`

Defines the parent id of the data source item

Default Value:

’’

Example

HTML

<div id="diagramcontent"></div>
<script>
   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 }
   });
</script>

dataSourceSettings.query `string`

Describes query to retrieve a set of data from the specified datasource

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
   $("#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" }
   });
</script>

dataSourceSettings.root `string`

Sets the unique id of the root data source item

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
   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 }
   });
</script>

dataSourceSettings.tableName `string`

Describes the name of the table on which the specified query has to be executed

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
   $("#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" }
   });
</script>

dataSourceSettings.crudAction `object`

Specifies the method name which is used to get the updated data from client side to the server side

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
   $("#diagramcontent").ejDiagram({
       dataSourceSettings:
                {
                    id: "Name",
                    crudAction:
                    {
                        read: http://js.syncfusion.com/demos/ejservices/api/Diagram/GetNodes
                        }
                }
   });
</script>

dataSourceSettings.crudAction.create `string`

Specifies the create method which is used to get the nodes to be added from client side to the server side

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
   $("#diagramcontent").ejDiagram({
	 dataSourceSettings:
                {
                    id: "Name",
                    crudAction:
                    {
                        create: "http://js.syncfusion.com/demos/ejservices/api/Diagram/AddNodes",
                       }
                }
            });
</script>

dataSourceSettings.crudAction.update `string`

Specifies the update method which is used to get the updated data from client side to the server side

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
   $("#diagramcontent").ejDiagram({
	 dataSourceSettings:
                {
                    id: "Name",
                    crudAction:
                    { update: "http://js.syncfusion.com/demos/ejservices/api/Diagram/UpdateNodes",
                    }
                }
            });
</script>

dataSourceSettings.crudAction.destroy `string`

Specifies the destroy method which is used to get the deleted items data from client side to the server side

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
   $("#diagramcontent").ejDiagram({
	   dataSourceSettings:
                {
                    id: "Name",
                    crudAction:
                    {
                        destroy: "http://js.syncfusion.com/demos/ejservices/api/Diagram/DeleteNodes"
                        }
                }
            });
</script>

dataSourceSettings.crudAction.read `string`

Specifies the read method to get the created nodes from client side to the server side

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
   $("#diagramcontent").ejDiagram({
	dataSourceSettings:
                {
                    id: "Name",
                    crudAction:
                    {
                        read: "http://js.syncfusion.com/demos/ejservices/api/Diagram/GetNodes
                      }
                }
            });
</script>

dataSourceSettings.customFields `array`

Specifies the custom fields to get the updated data from client side to the server side

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
   $("#diagramcontent").ejDiagram({
	     dataSourceSettings:
                {
                    id: "Name",
                    customFields: [
                        "Description",
                        "Color"
                    ]}
              });
</script>

dataSourceSettings.connectionDataSource `object`

Defines the data source either as a collection of objects or as an instance of ej.DataManager

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
   $("#diagramcontent").ejDiagram({
	dataSourceSettings:
                {
                    id: "Name",
                    connectionDataSource:
                    {
                        id: "Name"
                    }
                } 
            });
</script>

dataSourceSettings.connectionDataSource.dataSource `string`

Sets the datasource for the connection datasource settings items.

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
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
                    }
                } 
            });});
</script>

dataSourceSettings.connectionDataSource.id `string`

Sets the unique id of the connection data source item

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
   $("#diagramcontent").ejDiagram({
	 	dataSourceSettings:
                {
                    id: "Name",
                    connectionDataSource:
                    {
                        id: "Name"
                    }
                } 
            });
</script>

dataSourceSettings.connectionDataSource.sourceNode `string`

Sets the source node of the connection data source item

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
   $("#diagramcontent").ejDiagram({
	 	dataSourceSettings:
                {
                    id: "Name",
                    connectionDataSource:
                    {
                        id: "Name",
                        sourceNode: "SourceNode",
                    }
                } 
            });
</script>

dataSourceSettings.connectionDataSource.targetNode `string`

Sets the target node of the connection data source item

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
   $("#diagramcontent").ejDiagram({
	 	dataSourceSettings:
                {
                    id: "Name",
                    connectionDataSource:
                    {
                        id: "Name",
                        targetNode: "TargetNode"
                    }
                } 
            });
</script>

dataSourceSettings.connectionDataSource.sourcePointX `string`

Sets the sourcePointX value of the connection data source item

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
   $("#diagramcontent").ejDiagram({
	   	  	dataSourceSettings:
                {
                    id: "Name",
                    connectionDataSource:
                    {
                        id: "Name",
                        sourcePointX:200
                      }
                } 
            });
</script>

dataSourceSettings.connectionDataSource.sourcePointY `string`

Sets the sourcePointY value of the connection data source item

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
   $("#diagramcontent").ejDiagram({
	 	  	dataSourceSettings:
                {
                    id: "Name",
                    connectionDataSource:
                    {
                        id: "Name",
                        sourcePointY:200
                      }
                } 
            });
</script>

dataSourceSettings.connectionDataSource.targetPointX `string`

Sets the targetPoint-x value of the connection data source item

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
   $("#diagramcontent").ejDiagram({
	  	dataSourceSettings:
                {
                    id: "Name",
                    connectionDataSource:
                    {
                        id: "Name",
                        targetPointX:200
                      }
                } 
            });
</script>

dataSourceSettings.connectionDataSource.targetPointY `string`

Sets the targetPoint-y value of the connection data source item

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
   $("#diagramcontent").ejDiagram({
	  	  	dataSourceSettings:
                {
                    id: "Name",
                    connectionDataSource:
                    {
                        id: "Name",
                        targetPointY:200
                      }
                } 
            });
</script>

dataSourceSettings.connectionDataSource.crudAction `object`

Specifies the method name which is used to get updated connectors from client side to the server side

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
   $("#diagramcontent").ejDiagram({
		dataSourceSettings:
                {
                    id: "Name",
                    connectionDataSource:
                    {
                        id: "Name",
                        sourceNode: "SourceNode",
                        targetNode: "TargetNode",
                        crudAction: {
                        read: http://js.syncfusion.com/demos/ejservices/api/Diagram/GetConnectors"
                        }
                    }
                } 
            });
</script>

dataSourceSettings.connectionDataSource.crudAction.create `string`

Specifies the create method which is used to get the connectors to be added from client side to the server side

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
   $("#diagramcontent").ejDiagram({
	  	dataSourceSettings:
                {
                    id: "Name",
                    connectionDataSource:
                    {
                        id: "Name",
                        sourceNode: "SourceNode",
                        targetNode: "TargetNode",
                        crudAction: {
                            create: http://js.syncfusion.com/demos/ejservices/api/Diagram/AddConnectors",
                            }
                        }
                    } 
                });
</script>

dataSourceSettings.connectionDataSource.crudAction.update `string`

Specifies the update method which is used to get the updated connectors from client side to the server side

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
   $("#diagramcontent").ejDiagram({
	 	dataSourceSettings:
                {
                    id: "Name",
                    connectionDataSource:
                    {
                        id: "Name",
                        crudAction: {
                            update: http://js.syncfusion.com/demos/ejservices/api/Diagram/UpdateConnectors",
                            }
                        }
                    } 
                });
</script>

dataSourceSettings.connectionDataSource.crudAction.destroy `string`

Specifies the destroy method which is used to get the deleted items data from client side to the server side

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
   $("#diagramcontent").ejDiagram({
	 	dataSourceSettings:
                {
                    id: "Name",
                    connectionDataSource:
                    {
                        id: "Name",
                        crudAction: {
                            destroy: http://js.syncfusion.com/demos/ejservices/api/Diagram/DeleteConnectors"
                            }
                        }
                    }
                });
</script>

dataSourceSettings.connectionDataSource.crudAction.read `string`

Specifies the read method which is used to get the data from client side to the server side

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
   $("#diagramcontent").ejDiagram({
	dataSourceSettings:
                {
                    id: "Name",
                    connectionDataSource:
                    {
                        id: "Name",
                        crudAction: {
                        read: http://js.syncfusion.com/demos/ejservices/api/Diagram/GetConnectors,
                        }
                    }
                } 
            });
</script>

dataSourceSettings.connectionDataSource.customFields `array`

Specifies the custom fields to get the updated data from client side to the server side

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
   $("#diagramcontent").ejDiagram({
	 	dataSourceSettings:
                {
                    id: "Name",
                    connectionDataSource:
                    {
                        id: "Name",
                        customFields: [ "Description", "Color"]
                    }
                } 
            });
</script>

defaultSettings `object`

Initializes the default values for nodes and connectors

Default Value:

{}

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
    defaultSettings: { node: { fillColor:"red"} }
});
</script>

defaultSettings.connector `object`

Initializes the default connector properties

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
	//Apply default styles to all connectors
    defaultSettings: { connector: { lineColor:"red", lineWidth:4, lineDashArray:"2,2" } }
});
</script>

defaultSettings.group `object`

Initializes the default properties of groups

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
var NodeConstraints = ej.datavisualization.Diagram.NodeConstraints;
$("#diagramcontent").ejDiagram({
	//Disable dragging all groups
    defaultSettings: { group: {constraints: NodeConstraints.Default & ~NodeConstraints.Drag } }
});
</script>

defaultSettings.node `object`

Initializes the default properties for nodes

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
	//Apply same style to all nodes
    defaultSettings: { node: { fillColor:"red", borderColor:"black" } }
});
</script>

drawType `object`

Sets the type of JSON object to be drawn through drawing tool

Default Value:

{}

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({drawType:{type:"node"}});
</script>

enableAutoScroll `boolean`

Enables or disables auto scroll in diagram

Default Value:

true

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({ enableAutoScroll: false });
</script>

enableContextMenu `boolean`

Enables or disables diagram context menu

Default Value:

true

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({ enableContextMenu: false });
</script>

height `string`

Specifies the height of the diagram

Default Value

null

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({ height:"500" });
</script>

historyManager `object`

Customizes the undo redo functionality

historyManager.canPop `function`

A method that takes a history entry as argument and returns whether the specific entry can be popped or not

Example

HTML

<div id="diagramcontent"></div>
<script>

//Add a change to history manager
var diagram = $("#diagramcontent").ejDiagram("instance");
var entry = { object: node, prevState: node.empInfo };
diagram.model.historyManager.push(entry);
var newValue = { role: "New role" };
node.empInfo = newValue;

//Pop if the change doesn't need to be tracked
if(diagram.model.historyManager.canPop(entry))
	diagram.model.historyManager.pop();
	
</script>

#### Returns:

boolean

historyManager.closeGroupAction `function`

A method that ends grouping the changes

Example

HTML

<div id="diagramcontent"></div>
<script>
var group = diagram.model.selectedItems

// Start to group the changes
diagram.model.historyManager.startGroupAction();

//Makes the changes
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);
}

//Ends grouping the changes
diagram.model.historyManager.closeGroupAction();
</script>

historyManager.pop `function`

A method that removes the history of a recent change made in diagram

Example

HTML

<div id="diagramcontent"></div>
<script>

var diagram = $("#diagramcontent").ejDiagram("instance");
//Pop the last change
diagram.model.historyManager.pop();	
</script>

historyManager.push `function`

A method that allows to track the custom changes made in diagram

Example

HTML

<div id="diagramcontent"></div>
<script>

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

//Creates a custom entry and adds that to history manager
var entry = { object: node, prevState: node.empInfo };
diagram.model.historyManager.push(entry);

//Updates the new information
var newValue = { role: "New role" };
node.empInfo = newValue;

</script>

historyManager.redo `function`

Defines what should be happened while trying to restore a custom change

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
	historyManager: {
		//Called to revert a custom action
		undo: customUndoRedo,
		//Called to restore the reverted custom action
		redo: customUndoRedo
	}
});

//Method to handle the custom action
function customUndoRedo(args) {
	var diagram = $("#diagramcontent").ejDiagram("instance");
	var node = args.object;
	var currentState = node.empInfo;

	//Resets the state
	node.empInfo = args.prevState;

	//Saves the previous state
	args.prevState = currentState;
}	
</script>

historyManager.redoStack `array`

The redoStack property is used to get the number of redo actions to be stored on the history manager. Its an read-only property and the collection should not be modified.

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
    
var diagram = $("#diagramcontent").ejDiagram("instance");
diagram.model.historyManager.redoStack();

</script>

historyManager.stackLimit `number`

The stackLimit property used to restrict the undo and redo actions to a certain limit.

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
    
var diagram = $("#diagramcontent").ejDiagram("instance");
diagram.model.historyManager.stackLimit();
    
</script>

historyManager.startGroupAction `function`

A method that starts to group the changes to revert/restore them in a single undo or redo

Example

HTML

<div id="diagramcontent"></div>
<script>
var group = diagram.model.selectedItems

// Start to group the changes
diagram.model.historyManager.startGroupAction();

//Makes the changes
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);
}

//Ends grouping the changes
diagram.model.historyManager.closeGroupAction();
</script>

historyManager.undo `function`

Defines what should be happened while trying to revert a custom change

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
	historyManager: {
		//Called to revert a custom action
		undo: customUndoRedo,
		//Called to restore the reverted custom action
		redo: customUndoRedo
	}
});

//Method to handle the custom action
function customUndoRedo(args) {
	var diagram = $("#diagramcontent").ejDiagram("instance");
	var node = args.object;
	var currentState = node.empInfo;

	//Resets the state
	node.empInfo = args.prevState;

	//Saves the previous state
	args.prevState = currentState;
}	
</script>

historyManager.undoStack `array`

The undoStack property is used to get the number of undo actions to be stored on the history manager. Its an read-only property and the collection should not be modified.

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
    
var diagram = $("#diagramcontent").ejDiagram("instance");
diagram.model.historyManager.undoStack();

</script>

labelRenderingMode `enum`

Defines the type of the rendering mode of label.

Name	Description
HTML	Sets the labelRenderingMode as HTML
SVG	Sets the labelRenderingMode as SVG

Default Value:

HTML

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({ labelRenderingMode: "svg" });
</script>

layout `object`

Automatically arranges the nodes and connectors in a predefined manner.

layout.bounds `object`

Specifies the custom bounds to arrange/align the layout

Default Value:

ej.datavisualization.Diagram.Rectangle()

Example

HTML

<div id="diagramcontent"></div>
<script>
// bounds of the layout
$("#diagramcontent").ejDiagram({layout: { bounds:{ x: 0, y: 0, width: 1000, height: 1000} }});
</script>

layout.fixedNode `string`

Defines the fixed node with reference to which, the layout will be arranged and fixed node will not be repositioned

Default Value:

””

Example

HTML

//fixedNode of the layout
$("#diagramcontent").ejDiagram({ layout: { fixedNode: "nodeName"}});

layout.getLayoutInfo `object`

Customizes the orientation of trees/sub trees. For orientations, see Chart Orientations. For chart types, see Chart Types

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
function getLayoutInfo(diagram, node, options) { options.orientation = "vertical"; options.type = "left"; offset = 10;};
$("#diagramcontent").ejDiagram({layout: { getLayoutInfo:getLayoutInfo } });
</script>

layout.getConnectorSegments `object`

Defines a method to customize the segments based on source and target nodes.

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
function getConnectorSegment(diagram, node, options) { };
$("#diagramcontent").ejDiagram({layout: { getConnectorSegments:getConnectorSegment } });
</script>

layout.horizontalSpacing `number`

Sets the space to be horizontally left between nodes

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
//horizontalSpacing of the layout
$("#diagramcontent").ejDiagram({layout: { horizontalSpacing: 50 }});
</script>

layout.margin `object`

Defines the space to be left between layout bounds and layout.

Default Value:

ej.datavisualization.Diagram.Margin()

Example

HTML

<div id="diagramcontent"></div>
<script>
// margin of the layout
$("#diagramcontent").ejDiagram({layout: { margin:{ left: 10, right: 10, top: 10, bottom: 10} }});
</script>

layout.horizontalAlignment `enum`

Defines how to horizontally align the layout within the layout bounds

Name	Description
Left	Used to align layout horizontally on left side of layout bounds
Center	Used to align layout horizontally on center of layout bounds
Right	Used to align layout horizontally on right side of layout bounds

Default Value:

ej.datavisualization.Diagram.HorizontalAlignment.Center

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({layout: { horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Center }});
</script>

layout.verticalAlignment `enum`

Defines how to vertically align the layout within the layout bounds

Name	Description
Top	Used to align layout vertically on top of layout bounds
Center	Used to align layout vertically on center of layout bounds
Bottom	Used to align layout vertically on bottom of layout bounds

Default Value:

ej.datavisualization.Diagram.VerticalAlignment.Center

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({layout: { verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Center }});
</script>

layout.orientation `enum`

Sets the orientation/direction to arrange the diagram elements.

Name	Description
TopToBottom	Used to set LayoutOrientation from top to bottom
BottomToTop	Used to set LayoutOrientation from bottom to top
LeftToRight	Used to set LayoutOrientation from left to right
RightToLeft	Used to set LayoutOrientation from right to left

Default Value:

ej.datavisualization.Diagram.LayoutOrientations.TopToBottom

Example

HTML

<div id="diagramcontent"></div>
<script>
//orientation of the layout
$("#diagramcontent").ejDiagram({layout: { orientation: ej.datavisualization.Diagram.LayoutOrientations.LeftToRight }});
</script>

layout.type `enum`

Sets the type of the layout based on which the elements will be arranged.

Name	Description
None	Used not to set any specific layout
HierarchicalTree	Used to set layout type as hierarchical layout
OrganizationalChart	Used to set layout type as organnizational chart
RadialTree	Used to set layout type as radial tree
SymmetricLayout	Used to set layout type as symmetric layout

Default Value:

ej.datavisualization.Diagram.LayoutTypes.None

Example

HTML

<div id="diagramcontent"></div>
<script>
//type of the layout
$("#diagramcontent").ejDiagram({ layout: { type: ej.datavisualization.Diagram.LayoutTypes.HierarchicalTree } });
</script>

layout.verticalSpacing `number`

Sets the space to be vertically left between nodes

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
//verticalSpacing of the layout
$("#diagramcontent").ejDiagram({layout: { verticalSpacing: 50 }});
</script>

layout.root `string`

Sets the value is used to define the root node of the layout.

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
    //verticalSpacing of the layout
    $("#diagramcontent").ejDiagram({layout: { root: 'rootNode' }});
</script>

layout.springLength `number`

Defines how long edges should be, ideally. This will be the resting length for the springs.

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
    //verticalSpacing of the layout
    $("#diagramcontent").ejDiagram({layout: { springLength: 100 }});
</script>

layout.springFactor `number`

Defines how long edges should be, ideally. This will be the resting length for the springs.

Default Value:

0.442

Example

HTML

<div id="diagramcontent"></div>
<script>
    //verticalSpacing of the layout
    $("#diagramcontent").ejDiagram({layout: { springFactor: 0.442 }});
</script>

layout.maxIteration `number`

Defines how long edges should be, ideally. This will be the resting length for the springs.

Default Value:

1000

Example

HTML

<div id="diagramcontent"></div>
<script>
    //verticalSpacing of the layout
    $("#diagramcontent").ejDiagram({layout: { maxIteration: 1000 }});
</script>

layout.avoidSegmentOverlapping `boolean`

Enable or disable connector’s segment overlapping with each other when executing the layout with multiple parents.

Default Value:

false

Example

HTML

<div id="diagramcontent"></div>
<script>
    //verticalSpacing of the layout
    $("#diagramContent").ejDiagram({layout: { avoidSegmentOverlapping: true }});
</script>

locale `string`

Defines the current culture of diagram

Default Value:

“en-US”

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({ locale: "en-US" });
</script>

nodes `array`

Array of JSON objects where each object represents a node

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [{ name: "node1", width: 175, height: 60, offsetX:100, offsetY:100}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
</script>

nodes.activity `enum`

Defines the type of BPMN Activity. Applicable, if the node is a BPMN activity.

Name	Description
None	Used to set BPMN Activity as None
Task	Used to set BPMN Activity as Task
SubProcess	Used to set BPMN Activity as SubProcess

Default Value:

ej.datavisualization.Diagram.BPMNActivity.Task

Example

HTML

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

nodes.addInfo `object`

To maintain additional information about nodes

Default Value:

{}

Example

HTML

<div id="diagramcontent"></div>
<script>
var addInfo = { TooltipData: "Shares the information with the customer" };
//Add Info for nodes
var node1 = { name: "node1", addInfo: addInfo, offsetX:100, offsetY:100, width:50, height:50 };

//Define add Info for swimlane
var node2 = { type: "swimlane", name: "swimlane", addInfo: addInfo };
$("#diagramcontent").ejDiagram({nodes:[node1, node2]});
</script>

nodes.annotation `object`

Defines the additional information of a process. It is not directly related to the message flows or sequence flows of the process.

Default Value:

ej.datavisualization.Diagram.BPMNTextAnnotation()

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
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});
</script>

nodes.annotation.angle `number`

Sets the angle between the BPMN shape and the annotation

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
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});
</script>

nodes.annotation.direction `enum`

Sets the direction of the text annotation

Name	Description
Left	Used to set the direction of BPMN Annotation as left
Right	Used to set the direction of BPMN Annotation as right
Top	Used to set the direction of BPMN Annotation as top
Bottom	Used to set the direction of BPMN Annotation as bottom

Default Value:

ej.datavisualization.Diagram.BPMNAnnotationDirections.Left

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
		type:"bpmn", shape: "activity",
        annotation: { text: "This is a BPMN Activity shape", 
            direction:"right", length: 130, angle: -45, 
            width: 100, height: 50 } }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.annotation.height `number`

Sets the height of the text annotation

Default Value:

HTML

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

nodes.annotation.length `number`

Sets the distance between the BPMN shape and the annotation

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
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});
</script>

nodes.annotation.text `string`

Defines the additional information about the flow object in a BPMN Process

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
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
            } }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.annotation.width `number`

Sets the width of the text annotation

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
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
            } }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.borderColor `string`

Sets the border color of node

Default Value:

“black”

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, borderColor: "red" }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.borderDashArray `string`

Sets the pattern of dashes and gaps to stroke the border

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>

<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, borderColor: "red" , borderDashArray: "4,2"}];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.borderWidth `number`

Sets the border width of the node

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, borderColor: "red" , borderDashArray: "2,2", borderWidth:2}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
</script>

nodes.canUngroup `boolean`

Defines whether the group can be ungrouped or not

Default Value:

true

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
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]});
</script>

nodes.children `array`

Array of JSON objects where each object represents a child node/connector

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
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"};
//A group node with two child nodes
var group = { name :"group", children:[node1, node2]};
$("#diagramcontent").ejDiagram({ nodes:[group] });
</script>

nodes.classifier `enum`

Sets the type of UML classifier. Applicable, if the node is a UML Class Diagram shape.

Default Value:

ej.datavisualization.Diagram.ClassifierShapes.Class

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
nodes=[{ name: "Patient",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Class}];
$("#DiagramContent").ejDiagram({ nodes:nodes });
</script>

nodes.class `object`

Defines the name, attributes and methods of a Class. Applicable, if the node is a Class.

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
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 });
</script>

nodes.class.name `string`

Sets the name of class.

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
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 });
</script>

nodes.class.attributes `array`

Defines the collection of attributes

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
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 });

</script>

nodes.class.attributes.name `string`

Sets the name of the attribute

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
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 });

</script>

nodes.class.attributes.type `string`

Sets the data type of attribute

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
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 });

</script>

nodes.class.attributes.scope `string`

Defines the visibility of the attribute

Default Value:

ej.datavisualization.Diagram.ScopeValueDefaults.Public

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
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 });

</script>

nodes.class.methods `array`

Defines the collection of methods of a Class.

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
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 });

</script>

nodes.class.methods.name `string`

Sets the name of the method.

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
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 });

</script>

nodes.class.methods.arguments `array`

Defines the arguments of the method.

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
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 });

</script>

nodes.class.methods.arguments.name `string`

Sets the name of the argument

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
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 });

</script>

nodes.class.methods.arguments.type `string`

Sets the type of the argument

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
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 });

</script>

nodes.class.methods.type `string`

Sets the return type of the method

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
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 });

</script>

nodes.class.methods.scope `string`

Sets the visibility of the method.

Default Value:

ej.datavisualization.Diagram.ScopeValueDefaults.Public

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
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 });

</script>

nodes.collapseIcon `object`

Defines the state of the node is collapsed.

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 75, height:55, offsetX:50, offsetY:50, collapseIcon:{ shape:"arrowdown", width:10, height:10 } }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.collapseIcon.borderColor `string`

Sets the border color for collapse icon of node

Default Value:

“black”

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 75, height:55, offsetX:50, offsetY:50, collapseIcon:{ shape:"arrowdown", width:10, height:10,borderColor: "red"} }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.collapseIcon.borderWidth `number`

Sets the border width for collapse icon of node

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 75, height:55, offsetX:50, offsetY:50, 
    collapseIcon:{ shape:"arrowdown", width:10, height:10, borderWidth: "2"} }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.collapseIcon.fillColor `string`

Sets the fill color for collapse icon of node

Default Value:

“white”

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 75, height:55, offsetX:50, offsetY:50, collapseIcon:{ shape:"arrowdown", width:10, height:10,fillColor: "green"} }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.collapseIcon.height `number`

Defines the height for collapse icon of node

Default Value:

“15”

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 75, height:55, offsetX:50, offsetY:50, collapseIcon:{ shape:"arrowdown", width:10, height:10} }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.collapseIcon.horizontalAlignment `enum`

Sets the horizontal alignment of the icon.

Name	Description
Left	Used to align the icon horizontally on left side of node
Center	Used to align the icon horizontally on center of node
Right	Used to align the icon horizontally on right side of node

Default Value:

ej.datavisualization.Diagram.HorizontalAlignment.Center

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 75, height:55, offsetX:50, offsetY:50, 
collapseIcon:{ shape:"arrowdown", width:10, height:10, 
horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Left }}]
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.collapseIcon.margin `object`

To set the margin for the collapse icon of node

Default Value:

ej.datavisualization.Diagram.Margin()

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 75, height:55, offsetX:50, offsetY:50, 
    collapseIcon:{ shape:"arrowdown", width:10, height:10, margin:{ left: 5 }}}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.collapseIcon.offset `object`

Sets the fraction/ratio(relative to node) that defines the position of the icon

Default Value:

ej.datavisualization.Diagram.Point(0.5, 1)

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 75, height:55, offsetX:50, offsetY:50, 
    collapseIcon:{ shape:"arrowdown", width:10, height:10, offset:ej.datavisualization.Diagram.Point(0,0.5) }]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});

</script>

nodes.collapseIcon.shape `enum`

Defines the shape of the collapsed state of the node.

Name	Description
None	Used to set collapse icon shape as none
Arrow	Used to set collapse icon shape as Arrow(Up/Down)
Plus	Used to set collapse icon shape as Plus
Minus	Used to set collapse icon shape as Minus
Path	Used to set collapse icon shape as path
Template	Used to set icon shape as template
Image	Used to set icon shape as image

Default Value:

ej.datavisualization.Diagram.IconShapes.None

Example

HTML

<div id="diagramcontent"></div>
<script>
nodes=[{ name: "node1", width: 75, height:55, offsetX:50, offsetY:50, 
collapseIcon:{ shape:"arrowdown", width:10, height:10}
}];
$("#diagramcontent").ejDiagram({nodes : nodes});
</script>

nodes.collapseIcon.verticalAlignment `enum`

Sets the vertical alignment of the icon.

Name	Description
Top	Set vertical alignment as top
Middle	Set vertical alignment as middle
Bottom	Set vertical alignment as bottom

Default Value:

ej.datavisualization.Diagram.VerticalAlignment.Center

Example

HTML

<div id="diagramcontent"></div>
<script>
<script>
var nodes;
nodes=[{ name: "node1", width: 75, height:55, offsetX:50, offsetY:50, 
collapseIcon:{ shape:"arrowdown", width:10, height:10, 
    verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Top }}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
</script>

nodes.connectorPadding `number`

Defines the distance to be left between a node and its connections(In coming and out going connections).

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, connectorPadding: 5}];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.constraints `enum`

Enables or disables the default behaviors of the node.

Name	Description
None	Disable all node Constraints
Select	Enables node to be selected
Delete	Enables node to be Deleted
Drag	Enables node to be Dragged
Rotate	Enables node to be Rotated
Connect	Enables node to be connected
ResizeNorthEast	Enables node to be resize north east
ResizeEast	Enables node to be resize east
ResizeSouthEast	Enables node to be resize south east
ResizeSouth	Enables node to be resize south
ResizeSouthWest	Enables node to be resize south west
ResizeWest	Enables node to be resize west
ResizeNorthWest	Enables node to be resize north west
ResizeNorth	Enables node to be resize north
Resize	Enables node to be Resized
Shadow	Enables shadow
DragLabel	Enables label of node to be Dragged
AllowPan	Enables panning should be done while node dragging
AspectRatio	Enables Proportional resize for node
PointerEvents	Enables the user interaction with the node
CrispEdges	Enables contrast between clean edges for the node over rendering speed and geometric precision
Default	Enables default node interactions such as select,delete,drag,rotate,resize,connect,inheritCrispEdges and inheritTooltip

Default Value:

ej.datavisualization.Diagram.NodeConstraints.Default

Example

HTML

<div id="diagramcontent"></div>
<script>
var NodeConstraints = ej.datavisualization.Diagram.NodeConstraints;
//Disable selection
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
	constraints: NodeConstraints.Default & ~NodeConstraints.Select}];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.container `object`

Defines how the child objects need to be arranged(Either in any predefined manner or automatically). Applicable, if the node is a group.

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
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]});
</script>

nodes.container.orientation `string`

Defines the orientation of the container. Applicable, if the group is a container.

Default Value:

“vertical”

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
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]});
</script>

nodes.container.type `enum`

Sets the type of the container. Applicable if the group is a container.

Name	Description
Canvas	Sets the container type as Canvas
Stack	Sets the container type as Stack

Default Value:

ej.datavisualization.Diagram.ContainerType.Canvas

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
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"};
//Define a stack type container
var group = {name :"group", children:[node1, node2], container: { 
	type: ej.datavisualization.Diagram.ContainerType.Stack }, 
	offsetX:200, offsetY:100 };
$("#diagramcontent").ejDiagram({nodes:[group]});
</script>

nodes.cornerRadius `number`

Defines the corner radius of rectangular shapes.

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
	type:"basic", shape:"rectangle", cornerRadius:5}];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.cssClass `string`

This property allows you to customize nodes appearance using user-defined CSS.

Default Value:

””

Example

HTML

<style>
    .hoverNode:hover {
        fill:blue
    }
</style>

<div id="diagramcontent"></div>
<script>
var node = { name: "node", 
	         cssClass: "hoverNode", 
	         width: 50, height: 50, offsetX: 100, offsetY: 100 };
			 
$("#diagramcontent").ejDiagram({ nodes:[node] });
</script>

nodes.data `object`

Defines the BPMN data object

nodes.data.type `enum`

Sets the type of the BPMN Data object

Name	Description
Input	Used to notate the Input type BPMN data object
Output	Used to notate the Output type BPMN data object
None	Used to set BPMN data object type as None

Default Value:

ej.datavisualization.Diagram.BPMNDataObjects.None

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
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}];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.data.collection `boolean`

Defines whether the BPMN data object is a collection or not

Default Value:

false

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
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}];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.enumeration `object`

Defines an Enumeration in a UML Class Diagram

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
nodes=[{ name: "Enums",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: "umlclassifier",classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration, 
      enumeration:{ name: "AccountType", }}];
$("#DiagramContent").ejDiagram({ nodes:nodes });

</script>

nodes.enumeration.name `string`

Sets the name of the Enumeration

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
nodes=[{ name: "Enums",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: "umlclassifier",classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration, 
      enumeration:{ name: "AccountType", }}];
$("#DiagramContent").ejDiagram({ nodes:nodes });

</script>

nodes.enumeration.members `array`

Defines the collection of enumeration members

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
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"}]}}];
$("#DiagramContent").ejDiagram({ nodes:nodes });

</script>

nodes.enumeration.members.name `string`

Sets the name of the enumeration member

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
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"}]}}];
$("#DiagramContent").ejDiagram({ nodes:nodes });

</script>

nodes.event `enum`

Sets the type of the BPMN Events. Applicable, if the node is a BPMN event.

Name	Description
Start	Used to set BPMN Event as Start
Intermediate	Used to set BPMN Event as Intermediate
End	Used to set BPMN Event as End
NonInterruptingStart	Used to set BPMN Event as NonInterruptingStart
NonInterruptingIntermediate	Used to set BPMN Event as NonInterruptingIntermediate
ThrowingIntermediate	Used to set BPMN Event as ThrowingIntermediate

Default Value:

ej.datavisualization.Diagram.BPMNEvents.Start

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
nodes=[{ type: "bpmn", shape: "event" , 
	     event: ej.datavisualization.Diagram.BPMNEvents.Intermediate, width:50, height:50}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
</script>

nodes.excludeFromLayout `boolean`

Defines whether the node can be automatically arranged using layout or not

Default Value:

false

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;

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

//Automatically arranged
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"}
});

</script>

nodes.expandIcon `object`

Defines the state of the node is expanded or collapsed.

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 75, height:55, offsetX:50, offsetY:50, expandIcon:{ shape:"arrowdown", width:10, height:10 } }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.expandIcon.borderColor `string`

Sets the border color for expand icon of node

Default Value:

“black”

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 75, height:55, offsetX:50, offsetY:50, expandIcon:{ shape:"arrowdown", width:10, height:10,borderColor: "red"} }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.expandIcon.borderWidth `number`

Sets the border width for expand icon of node

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 75, height:55, offsetX:50, offsetY:50, 
    expandIcon:{ shape:"arrowdown", width:10, height:10, borderWidth: "2"} }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.expandIcon.fillColor `string`

Sets the fill color for expand icon of node

Default Value:

“white”

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 75, height:55, offsetX:50, offsetY:50, expandIcon:{ shape:"arrowdown", width:10, height:10,fillColor: "green"} }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.expandIcon.height `number`

Defines the height for expand icon of node

Default Value:

“15”

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 75, height:55, offsetX:50, offsetY:50, expandIcon:{ shape:"arrowdown", width:10, height:10} }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.expandIcon.horizontalAlignment `enum`

Sets the horizontal alignment of the icon.

Name	Description
Left	Used to align the icon horizontally on left side of node
Center	Used to align the icon horizontally on center of node
Right	Used to align the icon horizontally on right side of node

Default Value:

ej.datavisualization.Diagram.HorizontalAlignment.Center

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 75, height:55, offsetX:50, offsetY:50, 
expandIcon:{ shape:"arrowdown", width:10, height:10, 
horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Left }}]
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.expandIcon.margin `object`

To set the margin for the expand icon of node

Default Value:

ej.datavisualization.Diagram.Margin()

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 75, height:55, offsetX:50, offsetY:50, 
    expandIcon:{ shape:"arrowdown", width:10, height:10, margin:{ left: 5 }}}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.expandIcon.offset `object`

Sets the fraction/ratio(relative to node) that defines the position of the icon

Default Value:

ej.datavisualization.Diagram.Point(0.5, 1)

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 75, height:55, offsetX:50, offsetY:50, 
    expandIcon:{ shape:"arrowdown", width:10, height:10, offset:ej.datavisualization.Diagram.Point(0,0.5) }]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});

</script>

nodes.expandIcon.shape `enum`

Defines the shape of the expanded state of the node.

Name	Description
None	Used to set expand icon shape as none
Arrow	Used to set expand icon shape as Arrow(Up/Down)
Plus	Used to set expand icon shape as plus
Minus	Used to set expand icon shape as minus
Path	Used to set expand icon shape as path
Template	Used to set icon shape as template
Image	Used to set icon shape as image

Default Value:

ej.datavisualization.Diagram.IconShapes.None

Example

HTML

<div id="diagramcontent"></div>
<script>
nodes=[{ name: "node1", width: 75, height:55, offsetX:50, offsetY:50, 
expandIcon:{ shape:"arrowdown", width:10, height:10}
}];
$("#diagramcontent").ejDiagram({nodes : nodes});
</script>

nodes.expandIcon.verticalAlignment `enum`

Sets the vertical alignment of the icon.

Name	Description
Top	Set vertical alignment as top
Middle	Set vertical alignment as middle
Bottom	Set vertical alignment as bottom

Default Value:

ej.datavisualization.Diagram.VerticalAlignment.Center

Example

HTML

<div id="diagramcontent"></div>
<script>
<script>
var nodes;
nodes=[{ name: "node1", width: 75, height:55, offsetX:50, offsetY:50, 
expandIcon:{ shape:"arrowdown", width:10, height:10, 
    verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Top }}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
</script>

nodes.fillColor `string`

Defines the fill color of the node

Default Value:

“white”

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, fillColor:"red" }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.gateway `enum`

Sets the type of the BPMN Gateway. Applicable, if the node is a BPMN gateway.

Name	Description
None	Used to set BPMN Gateway as None
Exclusive	Used to set BPMN Gateway as Exclusive
Inclusive	Used to set BPMN Gateway as Inclusive
Parallel	Used to set BPMN Gateway as Parallel
Complex	Used to set BPMN Gateway as Complex
EventBased	Used to set BPMN Gateway as EventBased
ExclusiveEventBased	Used to set BPMN Gateway as ExclusiveEventBased
ParallelEventBased	Used to set BPMN Gateway as ParallelEventBased

Default Value:

ej.datavisualization.Diagram.BPMNGateways.None

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
nodes=[{ type: "bpmn", shape: "gateway" , gateway: ej.datavisualization.Diagram.BPMNGateways.Exclusive, width:50, height:50 }];
$("#diagramcontent").ejDiagram({ nodes:nodes });
</script>

nodes.gradient `object`

Paints the node with a smooth transition from one color to another color

nodes.gradient.LinearGradient `object`

Paints the node with linear color transitions

nodes.gradient.LinearGradient.stops `array`

Defines the different colors and the region of color transitions

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
 var gradient = {
     type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [
     { color: "white", offset: 0}, { color: "red", offset: 50}]
};
var nodes = [{name: "Node1", width: 100, height: 100, gradient : gradient}];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.gradient.LinearGradient.type `string`

Defines the type of gradient

Default Value:

“linear”

Example

HTML

<div id="diagramcontent"></div>
<script>
// Apply the gradient from the left most position of node
 var gradient = {
     type: "linear", x1: 0, x2: 100, y1: 0, y2: 100, stops: [
     { color: "white", offset: 0}, { color: "red", offset: 100 }]
};
var nodes = [{name: "node1", width: 100, height: 100, gradient : gradient}];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.gradient.LinearGradient.x1 `number`

Defines the left most position(relative to node) of the rectangular region that needs to be painted

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
// Apply the gradient from the left most position of node
 var gradient = {
     type: "linear", x1: 0, x2: 100, y1: 0, y2: 100, stops: [
     { color: "white", offset: 0}, { color: "red", offset: 100 }]
};
var nodes = [{name: "node1", width: 100, height: 100, gradient : gradient}];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.gradient.LinearGradient.x2 `number`

Defines the right most position(relative to node) of the rectangular region that needs to be painted

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
// Apply the gradient till the right most position of node
 var gradient = {
     type: "linear", x1: 0, x2: 100, y1: 0, y2: 100, stops: [
     { color: "white", offset: 0}, { color: "red", offset: 100 }]
};
var nodes = [{name: "node1", width: 100, height: 100, gradient : gradient}];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.gradient.LinearGradient.y1 `number`

Defines the top most position(relative to node) of the rectangular region that needs to be painted

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
// Apply the gradient from the top most position of node
 var gradient = {
     type: "linear", x1: 0, x2: 100, y1: 0, y2: 100, stops: [
     { color: "white", offset: 0}, { color: "red", offset: 100 }]
};
var nodes = [{name: "node1", width: 100, height: 100, gradient : gradient}];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.gradient.LinearGradient.y2 `number`

Defines the bottom most position(relative to node) of the rectangular region that needs to be painted

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
// Apply the gradient till the bottom most position of node
 var gradient = {
     type: "linear", x1: 0, x2: 100, y1: 0, y2: 100, stops: [
     { color: "white", offset: 0}, { color: "red", offset: 100 }]
};
var nodes = [{name: "node1", width: 100, height: 100, gradient : gradient}];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.gradient.RadialGradient `object`

Paints the node with radial color transitions. A focal point defines the beginning of the gradient, and a circle defines the end point of the gradient.

nodes.gradient.RadialGradient.type `string`

Defines the type of gradient

Default Value:

“radial”

Example

HTML

<div id="diagramcontent"></div>
<script>
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:[node] });
</script>

nodes.gradient.RadialGradient.cx `number`

Defines the position of the outermost circle

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
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:[node] });
</script>

nodes.gradient.RadialGradient.cy `number`

Defines the outer most circle of the radial gradient

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
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:[node] });
</script>

nodes.gradient.RadialGradient.fx `number`

Defines the innermost circle of the radial gradient

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
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:[node] });
</script>

nodes.gradient.RadialGradient.fy `number`

Defines the innermost circle of the radial gradient

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
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:[node] });
</script>

nodes.gradient.RadialGradient.stops `array`

Defines the different colors and the region of color transitions.

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
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:[node] });
</script>

nodes.gradient.Stop `object`

Defines the color and a position where the previous color transition ends and a new color transition starts

nodes.gradient.Stop.color `string`

Sets the color to be filled over the specified region

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
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:[node] });
</script>

nodes.gradient.Stop.offset `number`

Sets the position where the previous color transition ends and a new color transition starts

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
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:[node] });
</script>

nodes.gradient.Stop.opacity `number`

Describes the transparency level of the region

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var node = { name: "node", width: 50, height: 50, offsetX: 100, offsetY:100,
			 gradient:{ type:"radial", 
			    fx:50, fy:50, cx:50, cy:70,
				stops:[
				{color:"white", offset:0 }, 
				//Sets the opacity
				{color:"red", offset:100, opacity: 0.5}] } 
			};
</script>

nodes.borderGradient `object`

defines the node border with a smooth transition from one color to another color.

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
var gradient = {
    type: "linear", x1: 0, x2: 100, y1: 0, y2: 100,
    stops: [
        { color: "white", offset: 0}, 
        { color: "red", offset: 100}
    ]
};
var node = {
    name: "node", width: 50, height: 50, offsetX: 100, offsetY: 100,
    borderGradient: gradient, borderWidth: 2
};
</script>

nodes.header `object`

Defines the header of a swimlane/lane

Default Value:

{ text: “Title”, fontSize: 11 }

Example

HTML

<div id="diagramcontent"></div>
<script>
var swimlane = { type: "swimlane", name: "swimlane", header: { text: "Swimlane", fontSize: 12, bold: true } };
$("#diagramcontent").ejDiagram({nodes:[swimlane]});
</script>

nodes.height `number`

Defines the height of the node

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
// Set the height as 150
nodes = [{ name: "node1", width: 50, height:150, offsetX:50, offsetY:50 }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.horizontalAlign `enum`

Sets the horizontal alignment of the node. Applicable, if the parent of the node is a container.

Name	Description
Left	Used to align text horizontally on left side of node/connector
Center	Used to align text horizontally on center of node/connector
Right	Used to align text horizontally on right side of node/connector

Default Value:

ej.datavisualization.Diagram.HorizontalAlignment.Left

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
var node1 = { name: "node1", width: 50, height:50};
//Align the node at the right most position of the canvas
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:"gray" };
$("#diagramcontent").ejDiagram({nodes:[group]});
</script>

nodes.inEdges `array`

A read only collection of the incoming connectors/edges of the node

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
//Read the incoming connections to the selected node
var node = diagram.selectionList[0];
for(var i = 0; i < node.inEdges.length; i++){
    console.log(node.inEdges[i]);
}
</script>

nodes.interface `object`

Defines an interface in a UML Class Diagram

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
nodes=[{ name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,}];
$("#DiagramContent").ejDiagram({ nodes:nodes });
</script>

nodes.interface.name `string`

Sets the name of the interface

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
nodes=[{ name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
          "interface": {name: "BankAccount",} }];
$("#DiagramContent").ejDiagram({ nodes:nodes });
</script>

nodes.interface.attributes `array`

Defines a collection of attributes of the interface

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
nodes=[{ name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
          "interface": {name: "BankAccount", attributes: [{ name: "ownar"}], },}];
$("#DiagramContent").ejDiagram({ nodes:nodes });

</script>

nodes.interface.attributes.name `string`

Sets the name of the attribute

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
nodes=[{ name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
          "interface": {name: "BankAccount", attributes: [{ name: "ownar"}], },}];
$("#DiagramContent").ejDiagram({ nodes:nodes });

</script>

nodes.interface.attributes.type `string`

Sets the type of the attribute

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
nodes=[{ name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
          "interface": {name: "BankAccount", attributes: [{ name: "ownar",  type: "String[*]" ,  }], },}];
$("#DiagramContent").ejDiagram({ nodes:nodes });

</script>

nodes.interface.attributes.scope `string`

Sets the visibility of the attribute

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
nodes=[{ name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
          "interface": {name: "BankAccount", attributes: [{ name: "ownar",  type: "String[*]",scope:"protected" }], },}];
$("#DiagramContent").ejDiagram({ nodes:nodes });
</script>

nodes.interface.methods `array`

Defines the collection of public methods of an interface

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
nodes=[{ name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
          "interface": {name: "BankAccount",methods: [{ name: "deposit", }]  },}];
$("#DiagramContent").ejDiagram({ nodes:nodes });

</script>

nodes.interfaces.methods.name `string`

Sets the name of the method.

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
nodes=[{ name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
          "interface": {name: "BankAccount",methods: [{ name: "deposit", }]  },}];
$("#DiagramContent").ejDiagram({ nodes:nodes });

</script>

nodes.interface.methods.arguments `array`

Defines the collection of arguments of a method

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
nodes=[{ name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
          "interface": {name: "BankAccount",methods: [{ name: "deposit", arguments: [{name:"amount", }],  }]  },}];
$("#DiagramContent").ejDiagram({ nodes:nodes });


</script>

nodes.interface.methods.arguments.name `string`

Sets the name of the argument

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
nodes=[{ name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
          "interface": {name: "BankAccount",methods: [{ name: "deposit", arguments: [{name:"amount", }],  }]  },}];
$("#DiagramContent").ejDiagram({ nodes:nodes });

</script>

nodes.interface.methods.arguments.type `string`

Sets the type of the argument

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
nodes=[{ name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
          "interface": {name: "BankAccount",methods: [{ name: "deposit", arguments: [{name:"amount", type:"Dollars"  }],  }]  },}];
$("#DiagramContent").ejDiagram({ nodes:nodes });

</script>

nodes.interface.methods.type `string`

Sets the return type of the method

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
nodes=[{ name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
          "interface": {name: "BankAccount",methods: [{ name: "deposit", arguments: [{name:"amount", type:"Dollars"  }],  type:"account"}]  },}];
$("#DiagramContent").ejDiagram({ nodes:nodes });

</script>

nodes.interface.methods.scope `string`

Sets the visibility of the method

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
nodes=[{ name: "Bank",offsetX: 100,offsetY: 100,borderWidth: 2,borderColor: "black",type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Interface,
          "interface": {name: "BankAccount",methods: [{ name: "deposit", arguments: [{name:"amount", type:"Dollars"  }],  type:"account",scope:"private"}]  },}];
$("#DiagramContent").ejDiagram({ nodes:nodes });

</script>

nodes.isExpanded `boolean`

Defines whether the sub tree of the node is expanded or collapsed

Default Value

true

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
//Collapse its subtree
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"}
});
</script>

nodes.isSwimlane `boolean`

Sets the node as a swimlane

Default Value:

false

Example

HTML

<div id="diagramcontent"></div>
<script>
var swimlane = {type: "swimlane",name: "swimlane", isSwimlane:true, header: {text: "Swimlane", fontSize: 12, bold: true} };
$("#diagramcontent").ejDiagram({nodes:[swimlane]});
</script>

nodes.labels `array`

A collection of objects where each object represents a label

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
var label = [];
label = { "text": "Node1", "fontColor": "Red"};
nodes=[{labels:label}];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.labels.bold `boolean`

Enables/disables the bold style

Default Value:

false

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
         labels:[{ text:"label", bold:true}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.labels.borderColor `string`

Sets the border color of the label

Default Value:

“transparent”

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
         labels:[{ text:"label", borderColor:"red", borderWidth: 2}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.labels.borderWidth `number`

Sets the border width of the label

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
         labels:[{ text:"label", borderColor:"red", borderWidth: 2}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.labels.cssClass `string`

This property allows you to customize labels appearance using user-defined CSS.

Default Value:

””

Example

HTML

<style>
    .hoverText:hover {
        font-weight: bold;
    }
</style>

<div id="diagramcontent"></div>
<script>
var node = { name: "node", width:50,height:50,offsetX:50,offsetY:50,
	         labels:[{text:"label",cssClass:"hoverText"}] };
			 
$("#diagramcontent").ejDiagram({ nodes:[node] });
</script>

nodes.labels.constraints `enum`

Enables or disables the default behaviors of the label.

Default Value:

ej.datavisualization.Diagram.LabelConstraints.None

Example

HTML

<div id="diagramcontent"></div>
<script>
var LabelConstraints = ej.datavisualization.Diagram.LabelConstraints;
//Disable resize
var nodes;
nodes=[{ name:"node1", width: 50, height:50, offsetX:50, offsetY:50, 
         labels:[{ text:"Enter Your Text", constraints: LabelConstraints.All & ~LabelConstraints.Resizable}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});

</script>

nodes.labels.fillColor `string`

Sets the fill color of the text area

Default Value:

“transparent”

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
         labels:[{ text:"label", fillColor: "green"}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.labels.fontColor `string`

Sets the font color of the text

Default Value:

“black”

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
         labels:[{ text:"label", fontColor: "green"}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.labels.fontFamily `string`

Sets the font family of the text

Default Value:

“Arial”

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
         labels:[{ text:"label", fontColor: "green", fontFamily:"seugoe UI"}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.labels.fontSize `number`

Defines the font size of the text

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
         labels:[{ text:"label", fontSize: 14}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});

</script>

nodes.labels.height `number`

Sets the height of the label(the maximum value of label height and the node height will be considered as label height)

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
         labels:[{ text:"Label", height: 100}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.labels.horizontalAlignment `enum`

Sets the horizontal alignment of the label.

Name	Description
Left	Used to align text horizontally on left side of node/connector
Center	Used to align text horizontally on center of node/connector
Right	Used to align text horizontally on right side of node/connector

Default Value:

ej.datavisualization.Diagram.HorizontalAlignment.Center

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
	     //Align the text at the left most position of node
         labels:[{ text:"label", offset:{ x:0 }, horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Left}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.labels.italic `boolean`

Enables/disables the italic style

Default Value:

false

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
         labels:[{ text:"label", italic:true}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.labels.margin `object`

To set the margin of the label

Default Value:

ej.datavisualization.Diagram.Margin()

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
	     //Leaves 5px space between the left boundary of node and label
         labels:[{ text:"label", offset:{ x:0 }, horizontalAlignment:"left", margin:{ left: 5 }}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.labels.mode `enum`

Gets whether the label is currently being edited or not.

Name	Description
Edit	Used to set label edit mode as edit
View	Used to set label edit mode as view

Default Value:

ej.datavisualization.Diagram.LabelEditMode.Edit

Example

HTML

<div id="diagramcontent"></div>
<script>
var node = diagram.selectionList[0];
console.log(node.labels[0].mode);
</script>

nodes.labels.name `string`

Sets the unique identifier of the label

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
         labels:[{ text:"label", name:"label1"}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.labels.offset `object`

Sets the fraction/ratio(relative to node) that defines the position of the label

Default Value:

ej.datavisualization.Diagram.Point(0.5, 0.5)

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
         labels:[{ text:"label", offset:ej.datavisualization.Diagram.Point(0,0.5) }]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});

</script>

nodes.labels.opacity `number`

Defines the transparency of the labels

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
         labels:[{ text:"label", opacity: 0.7}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.labels.overflowType `enum`

Sets the overflowType of the labels

Name	Description
Ellipsis	Set overflow Type as ellipsis
Clip	Set overflow Type as Clip

Default Value:

ej.datavisualization.Diagram.OverflowType.Ellipsis

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
         labels:[{ text:"label1",fontColor:"red",textOverflow:true,
         overflowType: ej.datavisualization.Diagram.OverflowType.Ellipsis}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.labels.padding `object`

To set the padding of the node label

Default Value:

ej.datavisualization.Diagram.Padding()

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
	     //Leaves 5px space between the left boundary of node and label
         labels:[{ text:"label", offset:{ x:0 }, horizontalAlignment:"left", padding:{ left: 5 }}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.labels.readOnly `boolean`

Defines whether the label is editable or not

Default Value:

false

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
         labels:[{ text:"label", readOnly:true}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.labels.rotateAngle `number`

Defines the angle to which the label needs to be rotated

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
         labels:[{ text:"label", rotateAngle: 90}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.labels.templateId `string`

Sets the id of svg/html templates. Applicable, if the node’s label is HTML or native.

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>

<script id="SvgEllipse" type="text/x-jsrender">
        <svg xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink">
            <circle cx="10" cy="6" r="5" 
                     style="stroke:#006600; fill:#00cc00" />
        </svg>
    </script>
	
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
         labels:[{ templateId:"SvgEllipse"}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});

</script>

nodes.labels.text `string`

Defines the label text

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
         labels:[{ text:"Label"}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.labels.textAlign `enum`

Defines how to align the text inside the label.

Name	Description
Left	Used to align text on left side of node/connector
Center	Used to align text on center of node/connector
Right	Used to align text on Right side of node/connector

Default Value:

ej.datavisualization.Diagram.TextAlign.Center

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
         labels:[{ text:"node Label", textAlign:ej.datavisualization.Diagram.TextAlign.Left}]
      }];
$("#diagramcontent").ejDiagram({ nodes:nodes });
</script>

nodes.labels.textDecoration `enum`

Sets how to decorate the label text.

Name	Description
Underline	Used to set text decoration of the label as Underline
Overline	Used to set text decoration of the label as Overline
LineThrough	Used to set text decoration of the label as LineThrough
None	Used to set text decoration of the label as None

Default Value:

ej.datavisualization.Diagram.TextDecorations.None

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
	     //Decorate the text with an underline
         labels:[{ text:"Label", textDecoration: ej.datavisualization.Diagram.TextDecorations.Underline}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.labels.textOverflow `boolean`

Defines the overflowed content is displayed or not.

Default Value:

false

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
         labels:[{ text:"label1",fontColor:"red",textOverflow:true,
         overflowType: ej.datavisualization.Diagram.OverflowType.Ellipsis}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.labels.verticalAlignment `enum`

Sets the vertical alignment of the label.

Name	Description
Top	Set vertical alignment as top
Middle	Set vertical alignment as middle
Bottom	Set vertical alignment as bottom

Default Value:

ej.datavisualization.Diagram.VerticalAlignment.Center

Example

HTML

<div id="diagramcontent"></div>
<script>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
	     //Aligns the text at the top most position of node
         labels:[{ text:"label", offset:{ y:0 }, verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Top }]
      }];
$("#diagramcontent").ejDiagram({ nodes:nodes });
</script>

nodes.labels.visible `boolean`

Enables or disables the visibility of the label

Default Value:

true

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
         labels:[{ text:"Label", visible: false}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.labels.width `number`

Sets the width of the label(the maximum value of label width and the node width will be considered as label width)

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
         labels:[{ text:"Label", width: 100}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.labels.wrapping `enum`

Defines how the label text needs to be wrapped.

Name	Description
NoWrap	Disables wrapping
Wrap	Enables Line-break at normal word break points
WrapWithOverflow	Enables Line-break at normal word break points with longer word overflows

Default Value:

ej.datavisualization.Diagram.TextWrapping.WrapWithOverflow

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
         labels:[{ text:"Enter Your Text", wrapping:ej.datavisualization.Diagram.TextWrapping.NoWrap}]
      }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.lanes `array`

An array of objects where each object represents a lane. Applicable, if the node is a swimlane.

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
var swimlane = { type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
//Define the collection of lanes
				 lanes:[{name:"lane1", width:200 },
				 {name:"lane2", width:100}] };
$("#diagramcontent").ejDiagram({nodes:[swimlane]});
</script>

nodes.lanes.cssClass `string`

This property allows you to customize lanes appearance using user-defined CSS.

Default Value:

””

Example

HTML

<style>
    .hoverLane:hover {
         fill:red; 
    }
</style>

<div id="diagramcontent"></div>
<script>
var addInfo = { Description:"Describe the functionality" };
var swimlane = {type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{ name:"lane1", cssClass:"hoverLane", addInfo: addInfo }] };
$("#diagramcontent").ejDiagram({nodes:[swimlane]});
</script>

nodes.lanes.width `number`

Defines the width of lane

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var addInfo = { Description:"Describe the functionality" };
var swimlane = {type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{ name:"lane1", width:200, addInfo: addInfo }] };
$("#diagramcontent").ejDiagram({nodes:[swimlane]});
</script>

nodes.lanes.height `number`

Defines the height of lane

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var addInfo = { Description:"Describe the functionality" };
var swimlane = {type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{ name:"lane1", width:200, height:100, addInfo: addInfo }] };
$("#diagramcontent").ejDiagram({nodes:[swimlane]});
</script>

nodes.lanes.zorder `number`

Defines the z-index of the lane

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var addInfo = { Description:"Describe the functionality" };
var swimlane = {type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{ name:"lane1", width:200,height:100,zOrder:10, addInfo: addInfo }] };
$("#diagramcontent").ejDiagram({nodes:[swimlane]});
</script>

nodes.lanes.addInfo `object`

Allows to maintain additional information about lane

Default Value:

{}

Example

HTML

<div id="diagramcontent"></div>
<script>
var addInfo = { Description:"Describe the functionality" };
var swimlane = {type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{ name:"lane1", width:200, addInfo: addInfo }] };
$("#diagramcontent").ejDiagram({nodes:[swimlane]});
</script>

nodes.lanes.children `array`

An array of objects where each object represents a child node of the lane

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
var swimlane = {type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{name:"lane1", width:200 , 
	  //Defines the collection of child objects
      children:[{name:"process1", width: 50, height: 50 }]
 }]}
$("#diagramcontent").ejDiagram({nodes:[swimlane]});
</script>

nodes.lanes.fillColor `string`

Defines the fill color of the lane

Default Value:

“white”

Example

HTML

<div id="diagramcontent"></div>
<script>
var swimlane = {type: "swimlane",name: "swimlane", offsetX:300, offsetY:100,
lanes:[{name:"lane1", width:200 ,fillColor:"lightgray" }]}
$("#diagramcontent").ejDiagram({nodes:[swimlane]});
</script>

nodes.lanes.header `object`

Defines the header of the lane

Default Value:

{ text: “Function”, fontSize: 11 }

Example

HTML

<div id="diagramcontent"></div>
<script>
var swimlane = {type: "swimlane",name: "swimlane", offsetX:300, offsetY:100,
lanes:[{name:"lane1", width:200, 
	//Defines the lane header
	header:{fillColor:"blue", fontColor:"white", text:"Function 1"} }]}
$("#diagramcontent").ejDiagram({nodes:[swimlane]});
</script>

nodes.lanes.isLane `boolean`

Defines the object as a lane

Default Value:

false

Example

HTML

<div id="diagramcontent"></div>
<script>
var swimlane = {type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{name:"lane1", width:200 , isLane:true }]}
$("#diagramcontent").ejDiagram({nodes:[swimlane]});
</script>

nodes.lanes.name `string`

Sets the unique identifier of the lane

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var swimlane = {type: "swimlane",name: "swimlane", offsetX:300, offsetY:100,
lanes:[{ name:"function1", width:200 }]}
$("#diagramcontent").ejDiagram({nodes:[swimlane]});
</script>

nodes.lanes.orientation `string`

Sets the orientation of the lane.

Default Value:

“vertical”

Example

HTML

<div id="diagramcontent"></div>
<script>
var swimlane = { type: "swimlane",name: "swimlane", offsetX:300, offsetY:100, orientation:"horizontal",
lanes:[{ name:"function1", width:200 , orientation:"vertical" }]}
$("#diagramcontent").ejDiagram({nodes:[swimlane]});
</script>

nodes.marginBottom `number`

Defines the minimum space to be left between the bottom of parent bounds and the node. Applicable, if the parent is a container.

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var swimlane = {type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{name:"lane1", width:200 , 
      children:[{name:"process1", width: 50, height: 50, marginBottom: 50 }]
 }]}
$("#diagramcontent").ejDiagram({nodes:[swimlane]});
</script>

nodes.marginLeft `number`

Defines the minimum space to be left between the left of parent bounds and the node. Applicable, if the parent is a container.

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var swimlane = {type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{name:"lane1", width:200 , 
      children:[{name:"process1", width: 50, height: 50, marginLeft: 10 }]
 }]}
$("#diagramcontent").ejDiagram({nodes:[swimlane]});
</script>

nodes.marginRight `number`

Defines the minimum space to be left between the right of the parent bounds and the node. Applicable, if the parent is a container.

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var swimlane = {type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{name:"lane1", width:200 , 
      children:[{name:"process1", width: 50, height: 50, marginRight: 10 }]
 }]}
$("#diagramcontent").ejDiagram({nodes:[swimlane]});
</script>

nodes.marginTop `number`

Defines the minimum space to be left between the top of parent bounds and the node. Applicable, if the parent is a container.

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var swimlane = {type: "swimlane",name: "swimlane", offsetX:300, offsetY:200,
lanes:[{name:"lane1", width:200 , 
      children:[{name:"process1", width: 50, height: 50, marginTop: 10 }]
 }]}
$("#diagramcontent").ejDiagram({nodes:[swimlane]});
</script>

nodes.maxHeight `number`

Defines the maximum height limit of the node

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, maxHeight: 100}];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.maxWidth `number`

Defines the maximum width limit of the node

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, maxWidth: 100}];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.minHeight `number`

Defines the minimum height limit of the node

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, minHeight: 10 }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.minWidth `number`

Defines the minimum width limit of the node

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, minWidth: 10 }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.name `string`

Sets the unique identifier of the node

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50 }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.offsetX `number`

Defines the position of the node on X-Axis

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50 }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.offsetY `number`

Defines the position of the node on Y-Axis

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50 }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.opacity `number`

Defines the opaque of the node

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, opacity:0.7 }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.orientation `string`

Defines the orientation of nodes. Applicable, if the node is a swimlane.

Default Value:

“vertical”

Example

HTML

<div id="diagramcontent"></div>
<script>
var swimlane = { type: "swimlane",name: "swimlane", offsetX:300, offsetY:100, orientation:"horizontal" };
$("#diagramcontent").ejDiagram({nodes:[swimlane]});
</script>

nodes.outEdges `array`

A read only collection of outgoing connectors/edges of the node

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
//Read the outgoing connectors of the selected node
var node = diagram.selectionList[0];
for(var i = 0; i<node.outEdges.length; i++){
    console.log(node.outEdges[i]);
}
</script>

nodes.paddingBottom `number`

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.

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
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
            };
$("#diagramcontent").ejDiagram({nodes:[group]});
</script>

nodes.paddingLeft `number`

Defines the minimum padding value to be left between the left most position of a group and its children. Applicable, if the group is a container.

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
var node1 = { name: "node1", width: 50, height:50};
var node2 = { name: "node2", width: 50, height:50, horizontalAlign: "right"};
var group = { name :"group", children:[ node1, node2 ], 
              container: { type: "canvas" }, offsetX:200, offsetY:100, 
              fillColor:"gray", minWidth:200, minHeight:200,
              paddingLeft:10
            };
$("#diagramcontent").ejDiagram({nodes:[group]});
</script>

nodes.paddingRight `number`

Defines the minimum padding value to be left between the right most position of a group and its children. Applicable, if the group is a container.

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
var node1 = { name: "node1", width: 50, height:50};
var node2 = { name: "node2", width: 50, height:50, horizontalAlign: "right"};
var group = { name :"group", children:[ node1, node2 ], 
              container: { type: "canvas" }, offsetX:200, offsetY:100, 
              fillColor:"gray", minWidth:200, minHeight:200,
              paddingRight:10
            };
$("#diagramcontent").ejDiagram({nodes:[group]});
</script>

nodes.paddingTop `number`

Defines the minimum padding value to be left between the top most position of a group and its children. Applicable, if the group is a container.

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
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,
              paddingTop:10
            };
$("#diagramcontent").ejDiagram({nodes:[group]});
</script>

nodes.paletteItem `object`

Defines the size and preview size of the node to add that to symbol palette

Default Value:

null

Example

HTML

<div id="symbolpalette"></div>
<script>
	
$("#symbolpalette").ejSymbolPalette({
	//Defines the palette collection 
	palettes: [{
		name: "Basic Shapes", expanded: true,
		items: [
		{
			name: "Rectangle", height: 40, width: 80,
			//Sets preview size
			paletteItem: {			
                previewWidth: 100,
				previewHeight: 100
			}
		}]
	}]
});

</script>

nodes.paletteItem.enableScale `boolean`

Defines whether the symbol should be drawn at its actual size regardless of precedence factors or not

Default Value:

true

Example

HTML

<div id="symbolpalette"></div>
<script>
$("#symbolpalette").ejSymbolPalette({
	//Defines the palette collection 
	palettes: [{
		name: "Nodes", expanded: true,
		items: [
		{
			name: "Rectangle", width:50, height:50,
			//Draw symbol of size(50,50)
			paletteItem: {
                width: 100,
                height: 100,
                enableScale:false
			}
		}]
	}]
});
</script>

nodes.paletteItem.height `number`

Defines the height of the symbol

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#symbolpalette").ejSymbolPalette({
	//Defines the palette collection 
	palettes: [{
		name: "Nodes", expanded: true,
		items: [
		{
			name: "Rectangle", 
			//Sets the size of the symbol
			paletteItem: {
                width: 200,
                height: 200,
				enableScale: false
			}
		}]
	}]
});
</script>

nodes.paletteItem.label `string`

To display a name for nodes in the symbol palette

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#symbolpalette").ejSymbolPalette({
	//Defines the palette collection 
	palettes: [{
		name: "Nodes", expanded: true,
		items: [
		{
			name: "Rectangle", 
			//Sets the name for node in the symbol palette
			paletteItem: {
				label: "label"
			}
		}]
	}]
});
</script>

nodes.paletteItem.margin `object`

Defines the margin of the symbol item

Default Value:

{ left: 4, right: 4, top: 4, bottom: 4 }

Example

HTML

<div id="symbolpalette"></div>
<script>
$("#symbolpalette").ejSymbolPalette({
	//Defines the palette collection 
	palettes: [{
		name: "Nodes", expanded: true,
		items: [
		{
			name: "Rectangle", width:50, height:50,
			//Sets symbol margin
			paletteItem: {
                margin: { left: 30 }
			}
		}]
	}]
});
</script>

nodes.paletteItem.previewHeight `number`

Defines the preview height of the symbol

Default Value:

undefined

Example

HTML

<div id="symbolpalette"></div>
<script>
	$("#symbolpalette").ejSymbolPalette({
	//Defines the palette collection 
	palettes: [{
		name: "Nodes", expanded: true,
		items: [
		{
			name: "Rectangle", width:50, height:50,
			//Sets preview size
			paletteItem: {
                previewWidth: 100,
				previewHeight: 100
			}
		}]
	}]
});
</script>

nodes.paletteItem.previewWidth `number`

Defines the preview width of the symbol

Default Value:

undefined

Example

HTML

<div id="symbolpalette"></div>
<script>
$("#symbolpalette").ejSymbolPalette({
	//Defines the palette collection 
	palettes: [{
		name: "Nodes", expanded: true,
		items: [
		{
			name: "Rectangle", width:50, height:50,
			//Sets preview size
			paletteItem: {
                previewWidth: 100,
				previewHeight: 100
			}
		}]
	}]
});
</script>

nodes.paletteItem.width `number`

Defines the width of the symbol

Default Value:

Example

HTML

<div id="symbolpalette"></div>
<script>
$("#symbolpalette").ejSymbolPalette({
	//Defines the palette collection 
	palettes: [{
		name: "Nodes", expanded: true,
		items: [
		{
			name: "Rectangle", width:50, height:50,
			//Sets the size of the symbol
			paletteItem: {
                width: 200,
                height: 200,
                enableScale : false
			}
		}]
	}]
});
</script>

nodes.parent `string`

Sets the name of the parent group

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
//Sets the group name as 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]});
</script>

nodes.pathData `string`

Sets the path geometry that defines the shape of a path node

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
      type:"basic", shape:"path", pathData: "M370.9702,194.9961L359.5112,159.7291L389.5112,137.9341L419.5112,159.7291L408.0522,194.9961L370.9702,194.9961z" }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.phases `array`

An array of objects, where each object represents a smaller region(phase) of a swimlane.

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
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]});
</script>

nodes.phases.label `object`

Defines the header of the smaller regions

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
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]});

</script>

nodes.phases.lineColor `string`

Defines the line color of the splitter that splits adjacent phases.

Default Value:

“#606060”

Example

HTML

<div id="diagramcontent"></div>
<script>
var swimlane = { type: "swimlane",name: "swimlane", offsetX:300, offsetY:100, 
width: 300, orientation:"horizontal",
phases:[{ name:"phase1", offset:150, label:{text:"Phase1"}, lineColor:"green"},    
       { name:"phase2", label:{ text:"Phase2"} }]};
$("#diagramcontent").ejDiagram({nodes:[swimlane]});
</script>

nodes.phases.lineDashArray `string`

Sets the dash array that used to stroke the phase splitter

Default Value:

“3,3”

Example

HTML

<div id="diagramcontent"></div>
<script>
var swimlane = { type: "swimlane",name: "swimlane", offsetX:300, offsetY:100, 
width: 300, orientation:"horizontal",
phases:[{ name:"phase1", offset:150, label:{text:"Phase1"}, lineDashArray:"2,2"},    
       { name:"phase2", label:{ text:"Phase2"} }]};
$("#diagramcontent").ejDiagram({nodes:[swimlane]});
</script>

nodes.phases.lineWidth `number`

Sets the lineWidth of the phase

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var swimlane = { type: "swimlane",name: "swimlane", offsetX:300, offsetY:100, 
width: 300, orientation:"horizontal",
phases:[{ name:"phase1", offset:150, label:{text:"Phase1"}, lineWidth:3 },    
       { name:"phase2", label:{ text:"Phase2"} }]};
$("#diagramcontent").ejDiagram({nodes:[swimlane]});
</script>

nodes.phases.name `string`

Sets the unique identifier of the phase

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var swimlane = { type: "swimlane",name: "swimlane", offsetX:300, offsetY:100, 
width: 300, orientation:"horizontal",
phases:[{ name:"phase1", label:{text:"Phase1"}, lineWidth:3 } ]};
$("#diagramcontent").ejDiagram({nodes:[swimlane]});
</script>

nodes.phases.offset `number`

Sets the length of the smaller region(phase) of a swimlane

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({nodes:{type: "swimlane",name: "swimlane", phases:[{offset: 200}]}});
</script>

nodes.phases.orientation `string`

Sets the orientation of the phase

Default Value:

“horizontal”

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram = $("#diagramcontent").ejDiagram("instance");
diagram.addPhase(diagram.selectionList[0].name, 
	{ 
		name: "verticalPhase", 
	    type: "phase", offset: 200, orientation: "vertical", 
		label: { text: "New Phase" } 
	} );
</script>

nodes.phases.type `string`

Sets the type of the object as phase

Default Value:

“phase”

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram = $("#diagramcontent").ejDiagram("instance");
diagram.addPhase(diagram.selectionList[0].name, 
	{ 
		name: "verticalPhase", 
		type: "phase", offset: 200, label: { text: "New Phase" } 
	});	
</script>

nodes.phaseSize `number`

Sets the height of the phase headers

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
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]});
</script>

nodes.pivot `object`

Sets the ratio/ fractional value relative to node, based on which the node will be transformed(positioning, scaling and rotation)

Default Value:

ej.datavisualization.Diagram.Points(0.5,0.5)

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
//The node will be transformed with respect to its top left corner
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, pivot: {x:0, y:0}}];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.points `array`

Defines a collection of points to draw a polygon. Applicable, if the shape is a polygon.

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
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});
</script>

nodes.ports `array`

An array of objects where each object represents a port

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
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});
</script>

nodes.ports.borderColor `string`

Sets the border color of the port

Default Value:

“#1a1a1a”

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
      ports:[{name:"port1", offset:{ x:0.5, y:0.5 }, borderColor:"yellow" }] }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.ports.borderWidth `number`

Sets the stroke width of the port

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
      ports:[{name:"port1", offset:{ x:0.5, y:0.5 }, borderColor:"yellow", borderWidth: 3 }] }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.ports.connectorPadding `number`

Defines the space to be left between the port bounds and its incoming and outgoing connections.

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
      ports:[{name:"port1", offset:{ x:0.5, y:0.5 }, connectorPadding:10 }] }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.ports.constraints `enum`

Defines whether connections can be created with the port

Name	Description
None	Disable all constraints
Connect	Enables connections with connector
ConnectOnDrag	Enables to create the connection when mouse hover on the port.

Default Value:

ej.datavisualization.Diagram.PortConstraints.Connect

Example

HTML

<div id="diagramcontent"></div>
<script>
var PortConstraints = ej.datavisualization.Diagram.PortConstraints;
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
	  //Disable creating connections with the port
      ports:[{name:"port1", offset:{ x:0.5, y:0.5 }, constraints: PortConstraints.Default &~ PortConstraints.Connect }] }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.ports.cssClass `string`

This property allows you to customize ports appearance using user-defined CSS.

Default Value:

””

Example

HTML

<style>
    .hoverPort:hover {
         fill:blue;
    }
</style>

<div id="diagramcontent"></div>
<script>
var node = { name: "node", width:50,height:50,offsetX:50,offsetY:50
	         ports:[{name:"port1", offset:{ x:0.5, y:0.5 }, cssClass:"hoverPort" }] }];
			 
$("#diagramcontent").ejDiagram({ nodes:[node] });
</script>

nodes.ports.fillColor `string`

Sets the fill color of the port

Default Value:

“white”

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
      ports:[{name:"port1", offset:{ x:0.5, y:0.5 }, fillColor:"red" }] }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.ports.name `string`

Sets the unique identifier of the port

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
      ports:[{ name:"port1", offset:{ x:0.5, y:0.5 } }] }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.ports.offset `object`

Defines the position of the port as fraction/ ratio relative to node

Default Value:

ej.datavisualization.Diagram.Point(0, 0)

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
	  //Add port at the center of the node
      ports:[{name:"port1", offset:{ x:0.5, y:0.5 } }] }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.ports.pathData `string`

Defines the path data to draw the port. Applicable, if the port shape is path.

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
      ports:[{name:"port1", offset:{ x:0.5, y:0.5 }, 
      //Define the shape of the port
      shape:"path", pathData: "M5,0 L10,10 L0,10 z"}] }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.ports.shape `enum`

Defines the shape of the port.

Name	Description
X	Used to set port shape as X
Circle	Used to set port shape as Circle
Square	Used to set port shape as Square
Path	Used to set port shape as Path

Default Value:

ej.datavisualization.Diagram.PortShapes.Square

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
      ports:[{name:"port1", offset:{ x:0.5, y:0.5 }, 
      shape:ej.datavisualization.Diagram.PortShapes.Circle}] }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.ports.size `number`

Defines the size of the port

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
      ports:[{name:"port1", offset:{ x:0.5, y:0.5 }, size: 10}] }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.ports.visibility `enum`

Defines when the port should be visible.

Name	Description
Visible	Set the port visibility as Visible
Hidden	Set the port visibility as Hidden
Hover	Port get visible when hover connector on node
Connect	Port gets visible when connect connector to node
Default	Specifies the port visibility as default

Default Value:

ej.datavisualization.Diagram.PortVisibility.Default

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
      ports:[{name:"port1", offset:{ x:0.5, y:0.5 }, 
      visibility:ej.datavisualization.Diagram.PortVisibility.Visible }] }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.ports.parent `string`

Sets the name of the node which contains this port.

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
      ports:[{ name:"port1", offset:{ x:0.5, y:0.5 } }] }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.rotateAngle `number`

Sets the angle to which the node should be rotated

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, rotateAngle: 45 }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.scale `enum`

Defines how the node should be scaled/stretched

Name	Description
None	Set the scale as none
Meet	Used to scale the node uniformly so that it fits the node bounds
Slice	Used to scale the node uniformly to the maximum
Stretch	Used to scale the node non-uniformly to be stretched

Default Value:

ej.datavisualization.Diagram.ScaleConstraints.Meet

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({ node:{scale:ej.datavisualization.Diagram.ScaleConstraints.Slice }});
</script>

nodes.shadow `object`

Defines the opacity and the position of shadow

Default Value:

ej.datavisualization.Diagram.Shadow()

Example

HTML

<div id="diagramcontent"></div>
<script>
var NodeConstraints = ej.datavisualization.Diagram.NodeConstraints;
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
      constraints: NodeConstraints.Default | NodeConstraints.Shadow,
      shadow: {opacity: 0.5, distance: 10, angle: 45} }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.shadow.angle `number`

Defines the angle of the shadow relative to node

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var NodeConstraints = ej.datavisualization.Diagram.NodeConstraints;
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
      constraints: NodeConstraints.Default | NodeConstraints.Shadow,
      shadow: { angle: 135} }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.shadow.distance `number`

Sets the distance to move the shadow relative to node

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var NodeConstraints = ej.datavisualization.Diagram.NodeConstraints;
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
      constraints: NodeConstraints.Default | NodeConstraints.Shadow,
      shadow: { distance: 10 } }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.shadow.opacity `number`

Defines the opaque of the shadow

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var NodeConstraints = ej.datavisualization.Diagram.NodeConstraints;
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50,
      constraints: NodeConstraints.Default | NodeConstraints.Shadow,
      shadow: {opacity: 0.9 } }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.shape `enum|string`

Sets the shape of the node. It depends upon the type of node.

The following table illustrates the list of Basic shapes.

Name	Description
Rectangle	Used to specify node Shape as Rectangle
Ellipse	Used to specify node Shape as Ellipse
Path	Used to specify node Shape as Path
Polygon	Used to specify node Shape as Polygon
Triangle	Used to specify node Shape as Triangle
Plus	Used to specify node Shape as Plus
Star	Used to specify node Shape as Star
Pentagon	Used to specify node Shape as Pentagon
Heptagon	Used to specify node Shape as Heptagon
Octagon	Used to specify node Shape as Octagon
Trapezoid	Used to specify node Shape as Trapezoid
Decagon	Used to specify node Shape as Decagon
RightTriangle	Used to specify node Shape as RightTriangle
Cylinder	Used to specify node Shape as Cylinder

The following table illustrates the list of Flow shapes.

Name	Description
Process	Used to specify node Shape as Process
Decision	Used to specify node Shape as Decision
Document	Used to specify node Shape as Document
PreDefinedProcess	Used to specify node Shape as PreDefinedProcess
Terminator	Used to specify node Shape as Terminator
PaperTap	Used to specify node Shape as PaperTap
DirectData	Used to specify node Shape as DirectData
SequentialData	Used to specify node Shape as SequentialData
Sort	Used to specify node Shape as Sort
MultiDocument	Used to specify node Shape as MultiDocument
Collate	Used to specify node Shape as Collate
SummingJunction	Used to specify node Shape as SummingJunction
Or	Used to specify node Shape as Or
InternalStorage	Used to specify node Shape as InternalStorage
Extract	Used to specify node Shape as Extract
ManualOperation	Used to specify node Shape as ManualOperation
Merge	Used to specify node Shape as Merge
OffPageReference	Used to specify node Shape as OffPageReference
SequentialAccessStorage	Used to specify node Shape as SequentialAccessStorage
Annotation1	Used to specify node Shape as Annotation1
Annotation2	Used to specify node Shape as Annotation2
Data	Used to specify node Shape as Data
Card	Used to specify node Shape as Card

The following table illustrates the list of BPMN shapes.

Name	Description
Event	Used to specify node Shape as Event
Gateway	Used to specify node Shape as Gateway
Message	Used to specify node Shape as Message
DataObject	Used to specify node Shape as DataObject
DataSource	Used to specify node Shape as DataSource
Activity	Used to specify node Shape as Activity
Group	Used to specify node Shape as Group

The following table illustrates the list of UMLActivity shapes.

Name	Description
Action	Used to set UML ActivityShapes as Action
Decision	Used to set UML ActivityShapes as Decision
MergeNode	Used to set UML ActivityShapes as MergeNode
InitialNode	Used to set UML ActivityShapes as InitialNode
FinalNode	Used to set UML ActivityShapes as FinalNode
ForkNode	Used to set UML ActivityShapes as ForkNode
JoinNode	Used to set UML ActivityShapes as JoinNode
TimeEvent	Used to set UML ActivityShapes as TimeEvent
AcceptingEvent	Used to set UML ActivityShapes as AcceptingEvent
SendSignal	Used to set UML ActivityShapes as SendSignal
ReceiveSignal	Used to set UML ActivityShapes as ReceiveSignal
StructuredNode	Used to set UML ActivityShapes as StructuredNode
Note	Used to set UML ActivityShapes as Note

Default Value:

ej.datavisualization.Diagram.BasicShapes.Rectangle

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
	  // Sets the shape as ellipse
      type:"basic", shape:ej.datavisualization.Diagram.BasicShapes.Ellipse }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.source `string`

Sets the source path of the image. Applicable, if the type of the node is image.

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
type:"image", source: "Clayton.png" }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.subProcess `object`

Defines the sub process of a BPMN Activity. Applicable, if the type of the BPMN activity is sub process.

Default Value:

ej.datavisualization.Diagram.BPMNSubProcess()

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
		type:"bpmn", shape:"activity", activity:"subprocess", 
		subProcess:{ loop: ej.datavisualization.Diagram.BPMNLoops.Standard } }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.subProcess.adhoc `boolean`

Defines whether the BPMN sub process is without any prescribed order or not

Default Value:

false

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
type:"bpmn", shape:"activity", activity:"subprocess", 
subProcess:{ adhoc: true } }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.subProcess.boundary `enum`

Sets the boundary of the BPMN process

Name	Description
Default	Used to set BPMN SubProcess's Boundary as Default
Call	Used to set BPMN SubProcess's Boundary as Call
Event	Used to set BPMN SubProcess's Boundary as Event

Default Value:

ej.datavisualization.Diagram.BPMNBoundary.Default

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
		type:"bpmn", shape:"activity", activity:"subprocess", 
		subProcess:{ boundary: ej.datavisualization.Diagram.BPMNBoundary.Call } }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.subProcess.compensation `boolean`

Sets whether the BPMN subprocess is triggered as a compensation of a specific activity

Default Value:

false

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
		type:"bpmn", shape:"activity", activity:"subprocess", 
		subProcess:{ compensation: true } }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.subProcess.collapsed `boolean`

Sets whether the BPMN subprocess is triggered as a collapsed of a specific activity

Default Value:

true

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
		type:"bpmn", shape:"activity", activity:"subprocess", 
		subProcess:{ collapsed: false } }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.subProcess.event `enum`

Sets the type of the event by which the sub-process will be triggered

Default Value:

ej.datavisualization.Diagram.BPMNEvents.Start

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
		type:"bpmn", shape:"activity", activity:"subprocess", 
        subProcess: { type: "event", event: "start" }
         }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.subProcess.events `array`

Defines the collection of events that need to be appended with BPMN Sub-Process

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
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 } },
            { event: "intermediate", trigger: "error", offset: { x: 0.75, y: 1 } }]}
            }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.subProcess.events.event `enum`

Sets the type of the event by which the sub-process will be triggered

Default Value:

ej.datavisualization.Diagram.BPMNEvents.Start

Example

HTML

<div id="diagramcontent"></div>
<script>
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",event: "start", offset: { x: 0.25, y: 1 } },
            { event: "intermediate", event: "start",trigger: "error", offset: { x: 0.75, y: 1 } }]}
            }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.subProcess.events.offset `object`

Sets the fraction/ratio(relative to parent) that defines the position of the event shape

Default Value:

ej.datavisualization.Diagram.Point(0.5, 0.5)

Example

HTML

<div id="diagramcontent"></div>
<script>
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 } },
            { event: "intermediate", trigger: "error", offset: { x: 0.75, y: 1 } }]}
            }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.subProcess.events.name `string`

Sets the name of the BPMN event shape.

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
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 } },
            { name:"intermediate1", event: "intermediate", trigger: "error", offset: { x: 0.75, y: 1 } }]}
            }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.subProcess.events.trigger `enum`

Defines the type of the event trigger

Default Value:

ej.datavisualization.Diagram.BPMNTriggers.Message

Example

HTML

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

nodes.subProcess.events.ports `array`

An array of objects where each object represents a port

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
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});
</script>

nodes.subProcess.events.labels `array`

A collection of objects where each object represents a label

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
var label = [];
label = { "text": "Node1", "fontColor": "Red"};
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});
</script>

nodes.subProcess.loop `enum`

Defines the loop type of a sub process.

Name	Description
None	Used to set BPMN Activity's Loop as None
Standard	Used to set BPMN Activity's Loop as Standard
ParallelMultiInstance	Used to set BPMN Activity's Loop as ParallelMultiInstance
SequenceMultiInstance	Used to set BPMN Activity's Loop as SequenceMultiInstance

Default Value:

ej.datavisualization.Diagram.BPMNLoops.None

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
type:"bpmn", shape:"activity", activity:"subprocess", 
subProcess:{ loop: ej.datavisualization.Diagram.BPMNLoops.ParallelMultiInstance} }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.subProcess.Processes `array`

Defines the children for BPMN’s SubProcess

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
		type:"bpmn", shape:"activity", activity:"subprocess", 
            subProcess: { type: "event",  trigger: "conditional", offset: { x: 0.75, y: 1 } }
            }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.subProcess.trigger `enum`

Defines the type of the event trigger

Default Value:

ej.datavisualization.Diagram.BPMNTriggers.Message

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
		type:"bpmn", shape:"activity", activity:"subprocess", 
            subProcess: { type: "event",  trigger: "conditional", offset: { x: 0.75, y: 1 } }
            }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.subProcess.type `enum`

Defines the type of a sub process

Name	Description
None	Used to set BPMN SubProcess type as None
Transaction	Used to set BPMN SubProcess type as Transaction
Event	Used to set BPMN SubProcess type as Event

Default Value:

ej.datavisualization.Diagram.BPMNSubProcessTypes.None

Example

HTML

<div id="diagramcontent"></div>
<script>
 var nodes;
        nodes = [{
            name: "node1", width: 100, height: 100, offsetX: 50, offsetY: 50,
            type: "bpmn", shape: "activity", activity: "subprocess",
            subProcess: { type: event }
        }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.task `object`

Defines the task of the BPMN activity. Applicable, if the type of activity is set as task.

Default Value:

ej.datavisualization.Diagram.BPMNTask()

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
		type:"bpmn", shape:"activity", activity:"task", 
		task:{ compensation: true } }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.task.call `boolean`

To set whether the task is a global task or not

Default Value:

false

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
		type:"bpmn", shape:"activity", activity:"task", 
		task:{ call: true } }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.task.compensation `boolean`

Sets whether the task is triggered as a compensation of another specific activity

Default Value:

false

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
		type:"bpmn", shape:"activity", activity:"task", 
		task:{ compensation: true } }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.task.loop `enum`

Sets the loop type of a BPMN task.

Name	Description
X	Used to set port shape as X
Circle	Used to set port shape as Circle
Square	Used to set port shape as Square
Path	Used to set port shape as Path

Default Value:

ej.datavisualization.Diagram.BPMNLoops.None

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
		type:"bpmn", shape:"activity", activity:"task", 
		task:{ loop: ej.datavisualization.Diagram.BPMNLoops.Standard } }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.task.type `enum`

Sets the type of the BPMN task.

Name	Description
None	Used to set BPMN Task Type as None
Service	Used to set BPMN Task Type as Service
Receive	Used to set BPMN Task Type as Receive
Send	Used to set BPMN Task Type as Send
InstantiatingReceive	Used to set BPMN Task Type as InstantiatingReceive
Manual	Used to set BPMN Task Type as Manual
BusinessRule	Used to set BPMN Task Type as BusinessRule
User	Used to set BPMN Task Type as User
Script	Used to set BPMN Task Type as Script
Parallel	Used to set BPMN Task Type as Parallel

Default Value:

ej.datavisualization.Diagram.BPMNTasks.None

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
		type:"bpmn", shape:"activity", activity:"task", 
		task:{ type: ej.datavisualization.Diagram.BPMNTasks.Service } }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.task.events `array`

Defines the collection of events that need to be appended with BPMN tasks

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes = [{name: "node1", width: 100, height: 100, offsetX: 50, offsetY: 50,
    type: "bpmn", shape: "activity", activity: "task",
    task: {
        type: "send",
        events: [
            { event: "intermediate", offset: { x: 0.25, y: 1 }},
            { event: "intermediate", trigger: "error", offset: { x: 0.75, y: 1 }] }]}
            }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.templateId `string`

Sets the id of svg/html templates. Applicable, if the node is HTML or native.

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>

<script id="svgTemplate" type="text/x-jsrender">
    <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="70px" height="30px">
        <g visibility="visible">
            <image width="70px" height="35px" opacity="1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href=""></image>
            <text x="25" y="20" font-size="11" style="height:30px">
                <tspan></tspan>
            </text>
        </g>
    </svg>
</script>
	
<script>
var nodes;
nodes=[{ name: "Clayton", width: 100, height:50, offsetX:50, offsetY:50, 
		addInfo:{source:"Clayton.png"},
		type:"native", templateId:"svgTemplate" }];
$("#diagramcontent").ejDiagram({nodes:nodes});

</script>

nodes.textBlock `object`

Defines the textBlock of a text node

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
		type:"text", textBlock:{ text: "Text Node", fontColor:"red" } }];
$("#diagramcontent").ejDiagram({nodes:nodes});

</script>

nodes.tooltip `object`

Defines the tooltip that should be shown when the mouse hovers over node. For tooltip properties, refer Tooltip

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>

<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>

<script>
var tooltip = {
		templateId: "mouseovertooltip",
		alignment: {
			horizontal: "center",
			vertical: "bottom"
		}
	};
var NodeConstraints = ej.datavisualization.Diagram.NodeConstraints;
$("#diagramcontent").ejDiagram({	
//Defines nodes
	nodes: [{
		name:"Rectangle", width:50, height: 50, offsetX: 100, offsetY: 100,
        constraints: NodeConstraints.Default & ~NodeConstraints.InheritTooltip, 
        tooltip:tooltip
	}]
});
</script>

nodes.trigger `enum`

Sets the type of BPMN Event Triggers.

Name	Description
None	Used to set Event Trigger as None
Message	Used to set Event Trigger as Message
Timer	Used to set Event Trigger as Timer
Escalation	Used to set Event Trigger as Escalation
Link	Used to set Event Trigger as Link
Error	Used to set Event Trigger as Error
Compensation	Used to set Event Trigger as Compensation
Signal	Used to set Event Trigger as Signal
Multiple	Used to set Event Trigger as Multiple
Parallel	Used to set Event Trigger as Parallel
Conditional	Used to set Event Trigger as Conditional
Terminate	Used to set Event Trigger as Terminate
Cancel	Used to set Event Trigger as Cancel

Default Value:

ej.datavisualization.Diagram.BPMNTriggers.None

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes = [];
nodes=[{type: "bpmn", shape: ej.datavisualization.Diagram.BPMNShapes.Event, trigger: ej.datavisualization.Diagram.BPMNTriggers.None}];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.type `enum`

Defines the type of the node.

Name	Description
Text	Used to specify node type as Text
Image	Used to specify node type as Image
Html	Used to specify node type as HTML
Native	Used to specify node type as Native
Basic	Used to specify node type as Basic
Flow	Used to specify node type as Flow
BPMN	Used to specify node type as BPMN
UMLClassifier	Used to specify node type as UMLClassifier
UMLActivity	Used to specify node type as UMLActivity

Default Value:

ej.datavisualization.Diagram.Shapes.Basic

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, 
		type: ej.datavisualization.Diagram.Shapes.BPMN }];
$("#diagramcontent").ejDiagram({nodes:nodes})
</script>

nodes.verticalAlign `enum`

Sets the vertical alignment of a node. Applicable, if the parent of a node is a container.

Name	Description
Top	Set vertical alignment as top
Middle	Set vertical alignment as middle
Bottom	Set vertical alignment as bottom

Default Value:

ej.datavisualization.Diagram.VerticalAlignment.Top

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
var node1 = { name: "node1", width: 50, height:50};
var node2 = { name: "node2", width: 50, height:50, verticalAlign: ej.datavisualization.Diagram.VerticalAlignment.Bottom };
var group = { name :"group", children:[ node1, node2 ], 
              container: { type: "canvas" }, offsetX:200, offsetY:100, 
              fillColor:"gray", minWidth:200, minHeight:200
            };
$("#diagramcontent").ejDiagram({nodes:[group]});
</script>

nodes.visible `boolean`

Defines the visibility of the node

Default Value:

true

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, visible:false }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.width `number`

Defines the width of the node

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 100, height:50, offsetX:50, offsetY:50 }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

nodes.zOrder `number`

Defines the z-index of the node

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
var nodes;
nodes=[{ name: "node1", width: 100, height:100, offsetX:50, offsetY:50, zOrder: 10 }];
$("#diagramcontent").ejDiagram({nodes:nodes});
</script>

layers `array`

A collection of JSON objects where each object represents a layer. Layer is a named category of diagram shapes.

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
var layer = { name: "layer1", active: true, objects: ["textNode"] };
$("#diagram").ejDiagram({
    layers: [layer]
});
</script>

layers.name `string`

To specify the name of the diagram layer. Layer name should be unique.

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var layer = { name: "layer1", active: true, objects: ["textNode"] };
$("#diagram").ejDiagram({
    layers: [layer]
});
</script>

layers.active `boolean`

Enable or disable diagram objects to be added to the specific layer.

Default Value:

false

Example

HTML

<div id="diagramcontent"></div>
<script>
var layer = { name: "layer1", active: true, objects: ["textNode"] };
$("#diagram").ejDiagram({
    layers: [layer]
});
</script>

layers.visible `boolean`

Enable or disable the specific layer objects to be visible.

Default Value:

true

Example

HTML

<div id="diagramcontent"></div>
<script>
var layer = { name: "layer1", visible: true, objects: ["textNode"] };
$("#diagram").ejDiagram({
    layers: [layer]
});
</script>

layers.print `boolean`

Enable or disable the specific layer objects to be visible on printing or exporting.

Default Value:

true

Example

HTML

<div id="diagramcontent"></div>
<script>
var layer = { name: "layer1", print: true, objects: ["textNode"] };
$("#diagram").ejDiagram({
    layers: [layer]
});
</script>

layers.lock `boolean`

Enable or disable the interaction of the specific diagram objects.

Default Value:

false

Example

HTML

<div id="diagramcontent"></div>
<script>
var layer = { name: "layer1", lock: true, objects: ["textNode"] };
$("#diagram").ejDiagram({
    layers: [layer]
});
</script>

layers.objects `array`

To Specify the collection of the object names belongs to the layer.

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
var layer = { name: "layer1", lock: true, objects: ["textNode"] };
$("#diagram").ejDiagram({
    layers: [layer]
});
</script>

nodeTemplate `object`

Binds the custom JSON data with node properties

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
   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 },
	   //Sets the method name to node template 
	   nodeTemplate :"nodeTemplate"
   });
   
   //Binds the custom properties with node properties and sets the styles
    function nodeTemplate(diagram, node) {
         node.labels[0].text = node.Name;
     }
   
</script>

pageSettings `object`

Defines the size and appearance of diagram page

pageSettings.autoScrollBorder `object`

Defines the maximum distance to be left between the object and the scroll bar to trigger auto scrolling

Default Value:

{ left: 15, top: 15, right: 15, bottom: 15 }

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
    pageSettings:{ autoScrollBorder: { left: 50, top: 50, right: 50, bottom: 50 } }
});
</script>

pageSettings.multiplePage `boolean`

Sets whether multiple pages can be created to fit all nodes and connectors

Default Value:

false

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
    pageSettings:{multiplePage:false}
});
</script>

pageSettings.pageBackgroundColor `string`

Defines the background color of diagram pages

Default Value:

“#ffffff”

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
    pageSettings:{ pageBackgroundColor:"lightgray"}
});
</script>

pageSettings.pageBorderColor `string`

Defines the page border color

Default Value:

“#565656”

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
    pageSettings:{ pageBorderColor:"black", pageBorderWidth: 2}
});
</script>

pageSettings.pageBorderWidth `number`

Sets the border width of diagram pages

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
    pageSettings:{ pageBorderColor:"black", pageBorderWidth: 2}
});
</script>

pageSettings.pageHeight `number`

Defines the height of a page

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
    pageSettings:{ pageWidth: 500, pageHeight: 500 }
});
</script>

pageSettings.pageMargin `number`

Defines the page margin

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
    pageSettings:{ pageMargin : 20 }
});
</script>

pageSettings.pageOrientation `enum`

Sets the orientation of the page.

Name	Description
Landscape	Used to set orientation as Landscape
Portrait	Used to set orientation as portrait

Default Value:

ej.datavisualization.Diagram.PageOrientations.Portrait

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
    pageSettings:{ pageWidth: 800, pageHeight: 500, 
	pageOrientation:ej.datavisualization.Diagram.PageOrientations.Landscape }
});
</script>

pageSettings.pageWidth `number`

Defines the height of a diagram page

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
    pageSettings:{ pageWidth: 500, pageHeight: 500 }
});
</script>

pageSettings.scrollableArea `object`

Defines the scrollable area of diagram. Applicable, if the scroll limit is “limited”.

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
    pageSettings:{ scrollLimit: "limited",
    scrollableArea: {x:0, y:0, width:1000, height:1000} }
});
</script>

pageSettings.scrollLimit `enum`

Defines the scrollable region of diagram.

Name	Description
Infinite	Used to set scrollLimit as Infinite
Diagram	Used to set scrollLimit as Diagram
Limited	Used to set scrollLimit as Limited

Default Value:

ej.datavisualization.Diagram.ScrollLimit.Infinite

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
    pageSettings:{ scrollLimit: ej.datavisualization.Diagram.ScrollLimit.Diagram }
});
</script>

pageSettings.boundaryConstraints `enum`

Defines the draggable region of diagram elements.

Name	Description
Infinite	Used to set boundaryConstraints as Infinite
Diagram	Used to set boundaryConstraints as Diagram
Page	Used to set boundaryConstraints as Page

Default Value:

ej.datavisualization.Diagram.BoundaryConstraints.Infinite

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
    pageSettings:{ boundaryConstraints: ej.datavisualization.Diagram.BoundaryConstraints.Diagram }
});
</script>

pageSettings.showPageBreak `boolean`

Enables or disables the page breaks

Default Value:

false

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
    pageSettings:{ showPageBreak: true }
});
</script>

scrollSettings `object`

Defines the zoom value, zoom factor, scroll status and view port size of the diagram

scrollSettings.currentZoom `number`

Allows to read the zoom value of diagram

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>	
var diagram = $("#diagramcontent").ejDiagram("instance");
console.log(diagram.model.scrollSettings.currentZoom);
</script>

scrollSettings.horizontalOffset `number`

Sets the horizontal scroll offset

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
	scrollSettings:{ horizontalOffset: 50 }
})
</script>

scrollSettings.padding `object`

Allows to extend the scrollable region that is based on the scroll limit

Default Value:

{left: 0, right: 0, top:0, bottom: 0}

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
	//Sets the region to be extended
    scrollSettings: { padding: { left: 25, right: 25, top: 25, bottom: 25} }
});
</script>

scrollSettings.verticalOffset `number`

Sets the vertical scroll offset

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
	scrollSettings:{ verticalOffset: 50 }
})
</script>

scrollSettings.viewPortHeight `number`

Allows to read the view port height of the diagram

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
	
var diagram = $("#diagramcontent").ejDiagram("instance");
console.log(diagram.model.scrollSettings.viewPortHeight);

</script>

scrollSettings.viewPortWidth `number`

Allows to read the view port width of the diagram

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
	
var diagram = $("#diagramcontent").ejDiagram("instance");
console.log(diagram.model.scrollSettings.viewPortWidth);

</script>

selectedItems `object`

Defines the size and position of selected items and defines the appearance of selector

selectedItems.children `array`

A read only collection of the selected items

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram = $("#diagramcontent").ejDiagram("instance");
//Read the selected items 
for(var i =0; i< diagram.model.selectedItems.children; i++){
    //Do your actions here
}
</script>

selectedItems.constraints `enum`

Controls the visibility of selector.

Name	Description
None	Hides the selector
Rotator	Sets the visibility of rotation handle as visible
Resizer	Sets the visibility of resize handles as visible
UserHandles	Sets the visibility of user handles as visible
Tooltip	Enables the default tooltip of the diagram control.
DragOnEmptySpace	Enables dragging while selecting the multiple nodes and click on the empty region of the selection rectangle.
AutoHideThumbs	Show/Hide the selection handles when it is overlapped with each other's.
All	Sets the visibility of all selection handles as visible

Default Value:

ej.datavisualization.Diagram.SelectorConstraints.All

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
     selectedItems: { constraints: ej.datavisualization.Diagram.SelectorConstraints.UserHandles } 
});
</script>

selectedItems.getConstraints `object`

Defines a method that dynamically enables/ disables the interaction with multiple selection.

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
selectedItems: { 
	getConstraints: function() {
		//Allows to drag the multiple selected elements even when the selected elements are not movable 
		return ej.datavisualization.Diagram.NodeConstraints.Drag | ej.datavisualization.Diagram.NodeConstraints.Resize
    } }
});
</script>

selectedItems.height `number`

Sets the height of the selected items

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
//Sets the height of the selector as 100
$("#diagramcontent").ejDiagram({
     selectedItems: { height:100, width: 100 }
});
</script>

selectedItems.offsetX `number`

Sets the x position of the selector

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
     selectedItems: { offsetX:100, offsetY: 100 }
});;
</script>

selectedItems.offsetY `number`

Sets the y position of the selector

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
     selectedItems: { offsetX:100, offsetY: 100 }
});
</script>

selectedItems.rotateAngle `number`

Sets the angle to rotate the selected items

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
     selectedItems: { rotateAngle: 90 }
});
</script>

selectedItems.tooltip `object`

Sets the angle to rotate the selected items. For tooltip properties, refer Tooltip

Default Value:

ej.datavisualization.Diagram.Tooltip()

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
     selectedItems: { tooltip : { alignment:{ vertical:"top" } } }
});
</script>

selectedItems.userHandles `array`

A collection of frequently used commands that will be added around the selector

Default Value:

[]

Example

HTML

<div id="diagramcontent"></div>
<script>
var userHandle= [];
var cloneHandle = ej.datavisualization.Diagram.UserHandle();
userHandle.push(cloneHandle);
$("#diagramcontent").ejDiagram({selectedItems:{userHandles:userHandle}});
</script>

selectedItems.userHandles.horizontalAlignment `enum`

Sets the horizontal alignment of the user handle

Default Value:

ej.datavisualization.Diagram.HorizontalAlignment.Center

Example

HTML

<div id="diagramcontent"></div>
<script>
var userHandle = [];
        var cloneHandle = ej.datavisualization.Diagram.UserHandle();
        cloneHandle.name = "cloneHandle";
        cloneHandle.horizontalAlignment = ej.datavisualization.Diagram.HorizontalAlignment.Right;
        userHandle.push(cloneHandle);
$("#diagramcontent").ejDiagram({selectedItems:{userHandles:userHandle}});
</script>

selectedItems.userHandles.margin `object`

To set the margin of the user handle

Default Value:

ej.datavisualization.Diagram.Margin()

Example

HTML

<div id="diagramcontent"></div>
<script>
 var userHandle = [];
        var cloneHandle = ej.datavisualization.Diagram.UserHandle();
        cloneHandle.name = "cloneHandle";
        cloneHandle.margin = { left: 5 };
        userHandle.push(cloneHandle);
$("#diagramcontent").ejDiagram({selectedItems:{userHandles:userHandle}});
</script>

selectedItems.userHandles.name `string`

Defines the name of the user handle

####Default Value:

””

####Example

HTML

<div id="diagramcontent"></div>
<script>
 var userHandle = [];
        var cloneHandle = ej.datavisualization.Diagram.UserHandle();
        cloneHandle.name = "cloneHandle";
        userHandle.push(cloneHandle);
$("#diagramcontent").ejDiagram({selectedItems:{userHandles:userHandle}});
</script>

selectedItems.userHandles.backgroundColor `string`

Defines the background color of the user handle

####Default Value:

“#2382c3”

####Example

HTML

<div id="diagramcontent"></div>
<script>
 var userHandle = [];
        var cloneHandle = ej.datavisualization.Diagram.UserHandle();
        cloneHandle.name = "cloneHandle";
        cloneHandle.backgroundColor = "#4D4D4D";
        userHandle.push(cloneHandle);
$("#diagramcontent").ejDiagram({selectedItems:{userHandles:userHandle}});
</script>

selectedItems.userHandles.borderColor `string`

Sets the border color of the user handle

Default Value:

“transparent”

Example

HTML

<div id="diagramcontent"></div>
<script>
 var userHandle = [];
        var cloneHandle = ej.datavisualization.Diagram.UserHandle();
        cloneHandle.name = "cloneHandle";
        cloneHandle.borderColor = "red";
        userHandle.push(cloneHandle);
$("#diagramcontent").ejDiagram({selectedItems:{userHandles:userHandle}});
</script>

selectedItems.userHandles.enableMultiSelection `boolean`

Defines whether the user handle should be added, when more than one element is selected

Default Value:

false

Example

HTML

<div id="diagramcontent"></div>
<script>
 var userHandle = [];
        var cloneHandle = ej.datavisualization.Diagram.UserHandle();
        cloneHandle.name = "cloneHandle";
        cloneHandle.enableMultiSelection = true;
        userHandle.push(cloneHandle);
$("#diagramcontent").ejDiagram({selectedItems:{userHandles:userHandle}});
</script>

selectedItems.userHandles.offset `object`

Sets the fraction/ratio(relative to node) that defines the position of the user handle

Default Value:

ej.datavisualization.Diagram.point(0.5, 1)

Example

HTML

<div id="diagramcontent"></div>
<script>
 var userHandle = [];
        var cloneHandle = ej.datavisualization.Diagram.UserHandle();
        cloneHandle.name = "cloneHandle";
        cloneHandle.offset = ej.datavisualization.Diagram.point(0, 0)
        userHandle.push(cloneHandle);
$("#diagramcontent").ejDiagram({selectedItems:{userHandles:userHandle}});
</script>

selectedItems.userHandles.pathColor `string`

Sets the stroke color of the user handle

####Default Value:

transparent

####Example

HTML

<div id="diagramcontent"></div>
<script>
 var userHandle = [];
        var cloneHandle = ej.datavisualization.Diagram.UserHandle();
        cloneHandle.name = "cloneHandle"; 
        cloneHandle.pathData = "M4.6350084,4.8909971 L4.6350084,9.3649971 9.5480137,9.3649971 9.5480137,4.8909971 z M3.0000062,2.8189973 L11.184016,2.8189973 11.184016,10.999997 3.0000062,10.999997 z M0,0 L7.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);
        cloneHandle.pathColor = "white";
        userHandle.push(cloneHandle);
        $("#diagramcontent").ejDiagram({selectedItems:{userHandles:userHandle}});
</script>

selectedItems.userHandles.pathData `string`

Defines the custom shape of the user handle

####Default Value:

””

####Example

HTML

<div id="diagramcontent"></div>
<script>
 var userHandle = [];
        var cloneHandle = ej.datavisualization.Diagram.UserHandle();
        cloneHandle.name = "cloneHandle";
        cloneHandle.pathData = "M4.6350084,4.8909971 L4.6350084,9.3649971 9.5480137,9.3649971 9.5480137,4.8909971 z M3.0000062,2.8189973 L11.184016,2.8189973 11.184016,10.999997 3.0000062,10.999997 z M0,0 L7.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}});
</script>

selectedItems.userHandles.position `enum`

Defines the position of the user handle

Name	Description
TopLeft	Set the position of the userhandle as topleft
TopCenter	Set the position of the userhandle as topcenter
TopRight	Set the position of the userhandle as topright
MiddleLeft	Set the position of the userhandle as middleleft
MiddleRight	Set the position of the userhandle as middleright
BottomLeft	Set the position of the userhandle as bottomleft
BottomCenter	Set the position of the userhandle as bottomcenter
BottomRight	Set the position of the userhandle as bottom right

Default Value:

ej.datavisualization.Diagram.UserHandlePositions.BottomCenter

Example

HTML

<div id="diagramcontent"></div>
<script>
 var userHandle = [];
        var cloneHandle = ej.datavisualization.Diagram.UserHandle();
        cloneHandle.name = "cloneHandle";
        cloneHandle.position =" middleleft";
        userHandle.push(cloneHandle);
$("#diagramcontent").ejDiagram({selectedItems:{userHandles:userHandle}});
</script>

selectedItems.userHandles.size `number`

Defines the size of the user handle

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
 var userHandle = [];
        var cloneHandle = ej.datavisualization.Diagram.UserHandle();
        cloneHandle.name = "cloneHandle";
        cloneHandle.size = 20;
        userHandle.push(cloneHandle);
$("#diagramcontent").ejDiagram({selectedItems:{userHandles:userHandle}});
</script>

selectedItems.userHandles.tool `object`

Defines the interactive behaviors of the user handle

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script> 
  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 = "M4.6350084,4.8909971 L4.6350084,9.3649971 9.5480137,9.3649971 9.5480137,4.8909971 z M3.0000062,2.8189973 L11.184016,2.8189973 11.184016,10.999997 3.0000062,10.999997 z M0,0 L7.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}});
</script>

selectedItems.userHandles.verticalAlignment `enum`

Sets the vertical alignment of the user handle

Default Value:

ej.datavisualization.Diagram.VerticalAlignment.Center

Example

HTML

<div id="diagramcontent"></div>
<script>
var userHandle = [];
        var cloneHandle = ej.datavisualization.Diagram.UserHandle();
        cloneHandle.name = "cloneHandle";
        cloneHandle.verticalAlignment = ej.datavisualization.Diagram.VerticalAlignment.Top;
        userHandle.push(cloneHandle);
$("#diagramcontent").ejDiagram({selectedItems:{userHandles:userHandle}});
</script>

selectedItems.userHandles.visible `boolean`

Defines the visibility of the user handle

Default Value:

true

Example

HTML

<div id="diagramcontent"></div>
<script>
 var userHandle = [];
        var cloneHandle = ej.datavisualization.Diagram.UserHandle();
        cloneHandle.name = "cloneHandle";
        cloneHandle.visible = "true";
        userHandle.push(cloneHandle);
$("#diagramcontent").ejDiagram({selectedItems:{userHandles:userHandle}});
</script>

selectedItems.width `number`

Sets the width of the selected items

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
	
//Sets the width of the selector as 100
$("#diagramcontent").ejDiagram({
     selectedItems: { height:100, width: 100 }
});
</script>

showTooltip `boolean`

Enables or disables tooltip of diagram

Default Value:

true

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({showTooltip: true});
</script>

serializationSettings `object`

Defines diagram serialization properties that would defines how the serialization content would be.

serializationSettings.preventDefaultValues `boolean`

defines whether the default diagram properties can be serialized or not.

Default Value:

false

Example

HTML

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

rulerSettings `object`

Defines the properties of the both the horizontal and vertical gauge to measure the diagram area.

rulerSettings.showRulers `boolean`

Enables or disables both the horizontal and vertical ruler.

Default Value:

false

Example

HTML

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

rulerSettings.horizontalRuler `object`

Defines the appearance of horizontal ruler

rulerSettings.horizontalRuler.interval `number`

Defines the number of intervals to be present on the each segment of the horizontal ruler.

Default Value:

Example

HTML

$("#diagramcontent").ejDiagram({rulerSettings: {horizontalRuler:{interval: 10  } }});

rulerSettings.horizontalRuler.segmentWidth `number`

Defines the textual description of the ruler segment, and the appearance of the ruler ticks of the horizontal ruler.

Default Value:

Example

HTML

$("#diagramcontent").ejDiagram({rulerSettings: {horizontalRuler:{segmentWidth: 50  } }});

rulerSettings.horizontalRuler.arrangeTick `object`

Defines the method which used to position and arrange the tick elements of the horizontal ruler.

Default Value:

null

Example

HTML

$("#diagramcontent").ejDiagram({rulerSettings: {horizontalRuler:{arrangeTick: function alignTick(args){ }  } }});

rulerSettings.horizontalRuler.tickAlignment`enum`

Defines and sets the tick alignment of the ruler scale.

Name	Description
LeftOrTop	Align the ruler scale either left or top position of the ruler.
RightOrBottom	Align the ruler scale either right or bottom position of the ruler.

Default Value:

ej.datavisualization.Diagram.TickAlignment.RightOrBottom

Example

HTML

$("#diagramcontent").ejDiagram({rulerSettings: {horizontalRuler:{tickAlignment: ej.datavisualization.Diagram.TickAlignment.LeftOrTop  } }});

rulerSettings.horizontalRuler.markerColor `string`

Defines the color of the horizontal marker brush.

Default Value:

“red”

Example

HTML

$("#diagramcontent").ejDiagram({rulerSettings: {horizontalRuler:{markerColor: "pink"  } }});

rulerSettings.horizontalRuler.length `number`

Defines the width of the horizontal ruler.

Default Value:

null

Example

HTML

$("#diagramcontent").ejDiagram({rulerSettings: {horizontalRuler:{length: 1000  } }});

rulerSettings.horizontalRuler.thickness `number`

Defines the height of the horizontal ruler.

Default Value:

Example

HTML

$("#diagramcontent").ejDiagram({rulerSettings: {horizontalRuler:{thickness: 50  } }});

rulerSettings.verticalRuler `object`

Defines the appearance of vertical ruler

rulerSettings.verticalRuler.interval `number`

Defines the number of intervals to be present on the each segment of the vertical ruler.

Default Value:

Example

HTML

$("#diagramcontent").ejDiagram({rulerSettings: { verticalRuler:{interval: 10  } }});

rulerSettings.verticalRuler.segmentWidth `number`

Defines the textual description of the ruler segment, and the appearance of the ruler ticks of the vertical ruler.

Default Value:

Example

HTML

$("#diagramcontent").ejDiagram({rulerSettings: { verticalRuler:{segmentWidth: 50  } }});

rulerSettings.verticalRuler.arrangeTick `object`

Defines the method which used to position and arrange the tick elements of the vertical ruler.

Default Value:

null

Example

HTML

$("#diagramcontent").ejDiagram({rulerSettings: { verticalRuler:{arrangeTick: function alignTick(args){ }  } }});

rulerSettings. verticalRuler.tickAlignment`enum`

Defines and sets the tick alignment of the ruler scale.

Name	Description
LeftOrTop	Align the ruler scale either left or top position of the ruler.
RightOrBottom	Align the ruler scale either right or bottom position of the ruler.

Default Value:

ej.datavisualization.Diagram.TickAlignment.RightOrBottom

Example

HTML

$("#diagramcontent").ejDiagram({rulerSettings: { verticalRuler:{tickAlignment: ej.datavisualization.Diagram.TickAlignment.LeftOrTop  } }});

rulerSettings.verticalRuler.markerColor `string`

Defines the color of the vertical marker brush.

Default Value:

“red”

Example

HTML

$("#diagramcontent").ejDiagram({rulerSettings: { verticalRuler:{markerColor: "pink"  } }});

rulerSettings.verticalRuler.length `number`

Defines the height of the vertical ruler.

Default Value:

null

Example

HTML

$("#diagramcontent").ejDiagram({rulerSettings: { verticalRuler:{length: 1000  } }});

rulerSettings.verticalRuler.thickness `number`

Defines the width of the vertical ruler.

Default Value:

Example

HTML

$("#diagramcontent").ejDiagram({rulerSettings: { verticalRuler:{thickness: 50  } }});

snapSettings `object`

Defines the gridlines and defines how and when the objects have to be snapped

snapSettings.enableSnapToObject `boolean`

Enables or disables snapping nodes/connectors to objects

Default Value:

true

Example

HTML

$("#diagramcontent").ejDiagram({ snapSettings:{ enableSnapToObject: false } });

snapSettings.horizontalGridLines `object`

Defines the appearance of horizontal gridlines

snapSettings.horizontalGridLines.lineColor `string`

Defines the line color of horizontal grid lines

Default Value:

“lightgray”

Example

HTML

<div id="diagramcontent"></div>
<script>
var gridline = { lineColor :"blue" };
$("#diagramcontent").ejDiagram({ snapSettings: { horizontalGridLines: gridline} });
</script>

snapSettings.horizontalGridLines.lineDashArray `string`

Specifies the pattern of dashes and gaps used to stroke horizontal grid lines

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var gridline = { lineColor :"blue", lineDashArray:"2,2" };
$("#diagramcontent").ejDiagram({snapSettings: { horizontalGridLines: gridline} });
</script>

snapSettings.horizontalGridLines.linesInterval `array`

A pattern of lines and gaps that defines a set of horizontal gridlines

Default Value:

[1.25, 18.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75]

Example

HTML

<div id="diagramcontent"></div>
<script>
var gridline = { linesInterval: [1, 14, 0.5, 14.5 ] };
$("#diagramcontent").ejDiagram({snapSettings: { horizontalGridLines: gridline} });
}});
</script>

snapSettings.horizontalGridLines.snapInterval `array`

Specifies a set of intervals to snap the objects

Default Value:

[20]

Example

HTML

<div id="diagramcontent"></div>
<script>
//Snap objects to every 5th pixel
var gridline = { snapInterval : [5] };
$("#diagramcontent").ejDiagram({snapSettings: { horizontalGridLines: gridline} });
</script>

snapSettings.snapAngle `number`

Defines the angle by which the object needs to be snapped

Default Value:

Example

HTML

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

snapSettings.snapConstraints `enum`

Defines and sets the snapConstraints

Name	Description
None	Enables node to be snapped to horizontal gridlines
SnapToHorizontalLines	Enables node to be snapped to vertical gridlines
SnapToVerticalLines	Enables node to be snapped to horizontal gridlines
SnapToLines	Enables node to be snapped to gridlines
ShowHorizontalLines	Enable horizontal lines
ShowVerticalLines	Enable vertical lines
ShowLines	Enable both horizontal and vertical lines
All	Enable all the constraints

Default Value:

ej.datavisualization.Diagram.SnapConstraints.ShowLines

Example

HTML

var snapConstraints = ej.datavisualization.Diagram.SnapConstraints.ShowLines
$("#diagramcontent").ejDiagram({snapConstraints:snapConstraints});

snapSettings.snapObjectDistance `number`

Defines the minimum distance between the selected object and the nearest object

Default Value:

Example

HTML

var snap = {"snapObjectDistance":5};
//snapObjectDistance
$("#diagramcontent").ejDiagram({snapSettings: snap});

snapSettings.verticalGridLines `object`

Defines the appearance of horizontal gridlines

snapSettings.verticalGridLines.lineColor `string`

Defines the line color of horizontal grid lines

Default Value:

“lightgray”

Example

HTML

<div id="diagramcontent"></div>
<script>
var gridline = { lineColor :"blue" };
$("#diagramcontent").ejDiagram({snapSettings: { verticalGridLines: gridline} });
</script>

snapSettings.verticalGridLines.lineDashArray `string`

Specifies the pattern of dashes and gaps used to stroke horizontal grid lines

Default Value:

””

Example

HTML

<div id="diagramcontent"></div>
<script>
var gridline = { lineColor :"blue", lineDashArray:"2,2" };
$("#diagramcontent").ejDiagram({snapSettings: { verticalGridLines: gridline} });
</script>

snapSettings.verticalGridLines.linesInterval `array`

A pattern of lines and gaps that defines a set of horizontal gridlines

Default Value:

[1.25, 18.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75]

Example

HTML

<div id="diagramcontent"></div>
<script>
var gridline = { linesInterval: [1, 14, 0.5, 14.5 ] };
$("#diagramcontent").ejDiagram({snapSettings: { verticalGridLines: gridline} });
</script>

snapSettings.verticalGridLines.snapInterval `array`

Specifies a set of intervals to snap the objects

Default Value:

[20]

Example

HTML

<div id="diagramcontent"></div>
<script>
//Snap objects to every 5th pixel
var gridline = { snapInterval : [5] };
$("#diagramcontent").ejDiagram({snapSettings: { verticalGridLines: gridline} });
</script>

tool `enum`

Enables/Disables the interactive behaviors of diagram.

Name	Description
None	Disables all Tools
SingleSelect	Enables/Disables SingleSelect tool
MultipleSelect	Enables/Disables MultiSelect tool
ZoomPan	Enables/Disables ZoomPan tool
DrawOnce	Enables/Disables DrawOnce tool
ContinuesDraw	Enables/Disables ContinuousDraw tool

Default Value:

ej.datavisualization.Diagram.Tool.All

Example

HTML

<div id="diagramcontent"></div>
<script>
//Prevents editing and allows only to zoom/pan
$("#diagramcontent").ejDiagram({tool: ej.datavisualization.Diagram.Tool.ZoomPan});
</script>

tooltip `object`

An object that defines the description, appearance and alignments of tooltips

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<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>

<script>
$("#diagramcontent").ejDiagram({
	//Defines mouse over tooltip
	tooltip: {
		templateId: "mouseovertooltip",
		alignment: {
			horizontal: "center",
			vertical: "bottom"
		}
	},
	//Defines nodes
	nodes: [{
		name: "elizabeth",width: 70,height: 40,	offsetX: 100,offsetY: 100,
		Designation: "Managing Director"
	}]
});
</script>

tooltip.alignment `object`

Aligns the tooltip around nodes/connectors

tooltip.alignment.horizontal `enum`

Defines the horizontal alignment of tooltip.

Name	Description
Left	Used to align text horizontally on left side of node/connector
Center	Used to align text horizontally on center of node/connector
Right	Used to align text horizontally on right side of node/connector

Default Value:

ej.datavisualization.Diagram.HorizontalAlignment.Center

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
	tooltip: {
		alignment: {
			horizontal: ej.datavisualization.Diagram.HorizontalAlignment.Center
		}
	}
});
</script>

tooltip.alignment.vertical `enum`

Defines the vertical alignment of tooltip.

Name	Description
Top	Used to align text Vertically on left side of node/connector
Center	Used to align text Vertically on center of node/connector
Bottom	Used to align text Vertically on bottom of node/connector

Default Value:

ej.datavisualization.Diagram.VerticalAlignment.Bottom

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
	tooltip: {
		alignment: {
			vertical: ej.datavisualization.Diagram.VerticalAlignment.Bottom
		}
	}
});
</script>

tooltip.margin `object`

Sets the margin of the tooltip

Default Value:

{ left: 5, right: 5, top: 5, bottom: 5 }

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
	tooltip: {
		margin : { top:10 }
	}
});
</script>

tooltip.relativeMode `enum`

Defines whether the tooltip should be shown at the mouse position or around node.

Name	Description
object	Shows tooltip around the node
Mouse	Shows tooltip at the mouse position

Default Value:

ej.datavisualization.Diagram.RelativeMode.Object

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({
	tooltip: {
		//Shows tooltip at the mouse position
		relativeMode: ej.datavisualization.Diagram.RelativeMode.Mouse
	}
});
</script>

tooltip.templateId `string`

Sets the svg/html template to be bound with tooltip

Default Value:

””

Example

HTML

<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>

<script>	
$("#diagramcontent").ejDiagram({
	//Defines mouse over tooltip
	tooltip: {
		templateId: "mouseovertooltip"
	} });	
</script>

width `string`

Specifies the width of the diagram

Default Value:

null

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({ width:"1000" });
</script>

zoomFactor `number`

Sets the factor by which we can zoom in or zoom out

Default Value:

Example

HTML

<div id="diagramcontent"></div>
<script>
$("#diagramcontent").ejDiagram({zoomFactor: 1});
</script>

Methods

add(node)

Add nodes and connectors to diagram at runtime

Name	Type	Description
node	object	a JSON to define a node/connector or an array of nodes and connector

Returns:

boolean

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram = $("#diagramcontent").ejDiagram("instance");
//add a single node to diagram
var BasicShapes = ej.datavisualization.Diagram.BasicShapes;
var node = { name: "rectangle1", width: 100, height: 100, offsetX: 100, offsetY: 100, type: "node", shape: BasicShapes.Rectangle };
diagram.add(node);
// add multiple nodes to diagram
var nodes = [
{ name: "rectangle2", width: 100, height: 100, offsetX: 200, offsetY: 100, type: "node", shape: BasicShapes.Rectangle },
{ name: "ellipse1", width: 100, height: 100, offsetX: 300, offsetY: 100, type: "node", shape: BasicShapes.Ellipse },
]
diagram.add(nodes);
</script>

addLabel(nodeName, newLabel)

Add a label to a node at runtime

Name	Type	Description
nodeName	string	name of the node to which label will be added
newLabel	object	JSON for the new label to be added

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
var node=diagram.selectionList[0];
diagram.addLabel(node.name, {fontColor:"red", text:"newLabel"});
</script>

addLane(lane,index)

Add dynamic Lanes to swimlane at runtime

Name	Type	Description
lane	object	JSON for the new lane to be added
index	number	Index value to add the lane in swimlane

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram = $("#diagramcontent").ejDiagram("instance");
//add a lane node to swimlane
    var lane = { name: "lane" + ej.datavisualization.Diagram.Util.randomId(), fillColor: "#f5f5f5", offsetX: 500, offsetY: 200, 
                width: 400, orientation: 'horizontal', height: 100, isLane: true,
                header: { text: "function", fillColor: "#C7D4DF", width: 50, height: 50, fontSize: 11 } };
    diagram.addLane(lane);
// add lane with index to swimlane
 var lane = { name: "lane" + ej.datavisualization.Diagram.Util.randomId(), fillColor: "#f5f5f5", offsetX: 500, offsetY: 200, 
                width: 400, orientation: 'horizontal', height: 100, isLane: true,
                header: { text: "function", fillColor: "#C7D4DF", width: 50, height: 50, fontSize: 11 } };
    diagram.addLane(lane,1);
</script>

addPhase(name, options)

Add a phase to a swimlane at runtime

Name	Type	Description
name	string	name of the swimlane to which the phase will be added
options	object	JSON object to define the phase to be added

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.addPhase("swimlane", { name: "CustomPhase", offset: 600, label: { text: "CustomPhase" } });
</script>

addLayers(layers)

Add a collection of layers can be added to the existing diagram layer at runtime.

Name	Type	Description
layers	array	a collection of layers to be added to the existing diagram layers.

Example

HTML

<div id="diagram"></div>
    <script>
            // creating the instance for the diagram
            var diagram = $("#diagram").ejDiagram("instance");
            // creating the layer collection
            var layers = [{ name: "Layer1", visible: true, objects: ["Ellipse1", "Ellipse2"] }];
            // add the layers to the existing diagram layer collection
            diagram.addLayers(layers) 
            
    </script>

addNodeToLayer(layerName,nodes)

Add a collection of diagram elements can be added to the specific diagram layer.

Name	Type	Description
layerName	string	specifies the name of the layer to the nodes will be added.
nodes	array	collection of diagram elements to be added to the specific layer.

Example

HTML

<div id="diagram"></div>
    <script>
    
        // creating the nodes
        var nodes = [
            { name: "Ellipse1", width: 40, height: 40, offsetX: 100, offsetY: 100, shape: "ellipse" },
            { name: "Ellipse2", width: 40, height: 40, offsetX: 200, offsetY: 100, shape: "ellipse" }
        ];
        $("#diagram").ejDiagram({
            width: "100%",
            height: "600px",
            nodes: nodes,
        });
        // creating the instance for the diagram
        var diagram = $("#diagram").ejDiagram("instance");

        var node = diagram.findNode('Ellipse1')
        // add the node to the specific layer.
        diagram.addNodeToLayer('Layer1', [node])
            
    </script>

addPorts(name, ports)

Add a collection of ports to the node specified by name

Name	Type	Description
name	string	name of the node to which the ports have to be added
ports	array	a collection of ports to be added to the specified node

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram = $("#diagramcontent").ejDiagram("instance");
var port = [{ offset: { x: 0, y: 0.5 }, name: "aport", fillColor: "yellow"}, { offset: { x: 0.5, y: 0.5 }, name: "bport", fillColor: "yellow", }];
diagram.addPorts("Rect1", port);
</script>

addSelection(node, [clearSelection])

Add the specified node to selection list

Name	Type	Description
node	object	the node to be selected
[clearSelection]	boolean	to define whether to clear the existing selection or not

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
var node=diagram.model.nodes[0];
diagram.addSelection(node);
</script>

align(direction)

Align the selected objects based on the reference object and direction

Name	Type	Description
direction	string	to specify the direction towards which the selected objects are to be aligned("left","right",top","bottom")

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.align("left");
</script>

bringIntoView(rect)

Bring the specified portion of the diagram content to the diagram viewport

Name	Type	Description
rect	object	the rectangular region that is to be brought into diagram viewport

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.bringIntoView(ej.datavisualization.Diagram.Rectangle(700, 500, 80, 80));
</script>

bringToCenter(rect)

Bring the specified portion of the diagram content to the center of the diagram viewport

Name	Type	Description
rect	object	the rectangular region that is to be brought to the center of diagram viewport

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.bringToCenter(ej.datavisualization.Diagram.Rectangle(700, 500, 80, 80));
</script>

bringToFront()

Visually move the selected object over all other intersected objects

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.bringToFront();
</script>

clear()

Remove all the elements from diagram

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.clear();
</script>

clearHistory()

Clears the actions which is recorded to perform undo/redo operation in the diagram.

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.clearHistory();
</script>

clearSelection()

Remove the current selection in diagram

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.clearSelection();
</script>

copy()

Copy the selected object to internal clipboard and get the copied object

Returns:

object

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
//Save the copied object
var obj = diagram.copy();
</script>

cut()

Cut the selected object from diagram to diagram internal clipboard

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.cut();
</script>

exportDiagram([options])

Export the diagram as downloadable files or as data

Name

Type

Description

[options]

Object

options to export the desired region of diagram to the desired formats.

Name	Type	Description
fileName	string	name of the file to be downloaded.
format	enum	format of the exported file/data.
mode	enum	to set whether to export diagram as a file or as raw data.
region	enum	to set the region of the diagram to be exported.
bounds	object	to export any custom region of diagram.
margin	object	to set margin to the exported data.
stretch	enum	to resize the diagram content to fill its allocated space.
multiplePage	boolean	to export the diagram into multiple pages
pageWidth	number	to set the page width of the diagram while exporting the diagram into multiple pages.
pageHeight	number	to set the page height of the diagram while exporting the diagram into multiple pages.
pageOrientation	enum	to sets the orientation of the page.

Returns:

string

Example

HTML

<div id="diagramcontent"></div>
<script>
//Exports the whole diagram content as an image of JPEG format
diagram.exportDiagram();
var options = {
    //name of the file to be downloaded
    fileName: "diagram",
    //Specifies whether to export as files/data
    mode: ej.datavisualization.Diagram.ExportModes.Download,
    //Format of the exported file
    format: ej.datavisualization.Diagram.FileFormats.JPG,
    // Define the custom bounds that has to be exported
    bounds: {
        x: 1000,
        y: 1000,
        width: 500,
        height: 500
    },
};
diagram.exportDiagram(options);
</script>

FileFormats

Used to export the diagram into user defined file format.

Name	Description
JPG	Used to export the diagram into JPG format.
PNG	Used to export the diagram into PNG format.
BMP	Used to export the diagram into BMP format.
SVG	Used to export the diagram into SVG format.

ExportModes

Used to export the diagram as a file or as raw data.

Name	Description
Download	Used to export the diagram as a file.
Data	Used to export the diagram as raw data.

Region

Used to set the region of the diagram to be exported.

Name	Description
Content	Used to export the content of the diagram only.
PageSettings	Used to export the page region of the diagram.

Stretch

Used to resize the diagram content to fill its allocated space.

Name	Description
None	The diagram content preserves its original size.
Fill	The diagram content is resized to fill the destination dimensions. The aspect ratio is not preserved.
Uniform	The diagram content is resized to fit in the destination dimensions while it preserves its native aspect ratio.
UniformToFill	The diagram content is resized to fill the destination dimensions while it preserves its native aspect ratio. If the aspect ratio of the destination rectangle differs from the source, the source content is clipped to fit in the destination dimensions.

exportImage( image, [exportImageSettings])

The exportImage method is used to export the image passed through argument with different image format and exporting options as like exportDiagram method.

Name

Type

Description

image

string

pass the base64String image to be exported.

[exportImageSettings]

Object

options to export the desired region of diagram to the desired formats.

Name	Type	Description
fileName	string	name of the file to be downloaded.
format	enum	format of the exported file/data.
region	enum	to set the region of the diagram to be exported.
bounds	object	to export any custom region of diagram.
margin	object	to set margin to the exported data.
multiplePage	boolean	to export the diagram into multiple pages
pageWidth	number	to set the page width of the diagram while exporting the diagram into multiple pages.
pageHeight	number	to set the page height of the diagram while exporting the diagram into multiple pages.
pageOrientation	enum	to sets the orientation of the page.

Returns:

string

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
//Export the image based on pageSettings region and PNG format.
var options = {
//set the region of the diagram to be exported
region: "pageSettings",
//name of the file to be downloaded
fileName: "diagram",
//Format of the exported file
format: ej.datavisualization.Diagram.FileFormats.PNG
};
diagram.exportImage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA....",options);
</script>

findNode(name)

Read a node/connector object by its name

Name	Type	Description
name	string	name of the node/connector that is to be identified

Returns:

object

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
var node = diagram.findNode("nodeName");
</script>

fitToPage([mode], [region], [margin])

Fit the diagram content into diagram viewport

Name	Type	Description
[mode]	enum	to set the mode of fit to command.
[region]	enum	to set whether the region to be fit will be based on diagram elements or page settings.
[margin]	object	to set the required margin

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.fitToPage(mode,region,margin);
</script>

FitMode

Used to fit the diagram content within the view port.

Name	Description
Page	Used to fit the diagram content based on page size.
Width	Used to fit the diagram content based on diagram width.
Height	Used to fit the diagram content based on diagram height.

getDiagramContent([styleSheets])

Get the diagram DOM element as a string along with dependent stylesheets.

Name	Type	Description
styleSheets	array	If its specified, will get the diagram DOM element along with specified stylesheet references. Please note that you have to define absolute path for local CSS file. If not specified, will get the diagram content along with all stylesheets loaded in the document.

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.getDiagramContent();
</script>

getDiagramBounds()

Get the bounds of the diagram.

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.getDiagramBounds();
</script>

group()

Group the selected nodes and connectors

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.group();
</script>

insertLabel(name, label, [index])

Insert a label into a node’s label collection at runtime

Name	Type	Description
name	string	name of the node to which the label has to be inserted
label	object	JSON to define the new label
[index]	number	index to insert the label into the node

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
var node=diagram.selectionList[0];
diagram.insertLabel(node.name, {fontColor:"red", text:"newLabel"},0);
</script>

layout()

Refresh the diagram with the specified layout

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.layout();
</script>

load(data)

Load the diagram

Name	Type	Description
data	object	JSON data to load the diagram

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.load(data);
</script>

moveForward()

Visually move the selected object over its closest intersected object

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.moveForward();
</script>

nudge(direction, [delta])

Move the selected objects by either one pixel or by the pixels specified through argument

Name	Type	Description
direction	string	specifies the direction to move the selected objects ("left","right",top","bottom")
[delta]	number	specifies the number of pixels by which the selected objects have to be moved

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.nudge("direction", 5);
</script>

paste([object], [rename])

Paste the selected object from internal clipboard to diagram

Name	Type	Description
[object]	object	object to be added to diagram
[rename]	boolean	to define whether the specified object is to be renamed or not

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
//Paste the object from internal clipboard to diagram
diagram.paste();
//Add the specific object to diagram
diagram.paste(obj, true);
</script>

### print([printSettings])

Print the diagram as image

Name

Type

Description

[printSettings]

Object

options to print the desired region of diagram and print the diagram in multiple pages.

Name	Type	Description
region	enum	to set the region of the diagram to be printed.
bounds	object	to print any custom region of diagram.
stretch	enum	to resize the diagram content to fill its allocated space and printed.
multiplePage	boolean	to print the diagram into multiple pages
pageWidth	number	to set the page width of the diagram while printing the diagram into multiple pages.
pageHeight	number	to set the page height of the diagram while printing the diagram into multiple pages.
pageOrientation	enum	to sets the orientation of the page.

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
//print the diagram
diagram.print();
// print the diagram with certain region.
var options = {
//set the region of the diagram to be printed
region: "pageSettings"
};
diagram.printImage(options);
</script>

printImage( image, [printImageSettings])

The printImage method is used to print the image passed through argument with desired region and multiple pages as like print method.

Name

Type

Description

image

string

pass the base64String image to be printed.

[printImageSettings]

Object

options to export the desired region of diagram to the desired formats.

Name	Type	Description
region	enum	to set the region of the diagram to be printed.
bounds	object	to print any custom region of diagram.
multiplePage	boolean	to export the diagram into multiple pages
pageWidth	number	to set the page width of the diagram while printing the diagram into multiple pages.
pageHeight	number	to set the page height of the diagram while printing the diagram into multiple pages.
pageOrientation	enum	to sets the orientation of the page.

Returns:

string

Example

HTML

<div id="diagramcontent"></div>

<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
//print the image based on pageSettings region.
var options = {
//set the region of the diagram to be printed
region: "pageSettings"
};
diagram.printImage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA....",options);
</script>

redo()

Restore the last action that was reverted

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.redo();
</script>

refresh()

Refresh the diagram at runtime

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.refresh();
</script>

remove([node])

Remove either the given node/connector or the selected element from diagram

Name	Type	Description
[node]	object	the node/connector to be removed from diagram

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.remove();
</script>

removeLayers(layers)

Remove the collection of layers from the diagram layers.

Name	Type	Description
layers	array	collection of layers to be removed from diagram layer.

Example

HTML

<div id="diagram"></div>
    <script>
            // creating the instance for the diagram
            var diagram = $("#diagram").ejDiagram("instance");
            // remove the diagram layers from model 
            diagram.removeLayers([diagram.model.layers[i]]);
    </script>

removeNodeToLayer(layerName, nodes)

Remove the collection of nodes from the specific layer.

Name	Type	Description
layerName	string	Specifies the layer name to the node will be removed.
nodes	array	collection of diagram elements name to be removed from specific layer.

Example

HTML

<div id="diagram"></div>
    <script>
        // creating the nodes
        var nodes = [
            { name: "Ellipse1", width: 40, height: 40, offsetX: 100, offsetY: 100, shape: "ellipse" },
            { name: "Ellipse2", width: 40, height: 40, offsetX: 200, offsetY: 100, shape: "ellipse" }
        ];
        $("#diagram").ejDiagram({
            width: "100%",
            height: "600px",
            nodes: nodes,
        });
        // creating the instance for the diagram
        var diagram = $("#diagram").ejDiagram("instance");

        
        // remove the node from the specific layer.
        diagram.removeNodeToLayer('Layer1', ['Ellipse1'])
    </script>

removePorts(name, ports)

Remove the collection of ports from the specified node.

Name	Type	Description
name	string	name of the node to which the ports have to be added
ports	array	a collection of ports to be deleted from the specified node

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram = $("#diagramcontent").ejDiagram("instance");
var node = diagram.findNode("Rect1");
diagram.removePorts("Rect1", node.ports);
</script>

removeLabels(name, labels)

Add a collection of ports to the node specified by name

Name	Type	Description
name	string	name of the node to which the ports have to be added
labels	array	a collection of labels to be deleted from the specified node

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram = $("#diagramcontent").ejDiagram("instance");
var node = diagram.findNode("Rect1");
diagram.removeLabels("Rect1", node.labels);
</script>

removeSelection(node)

Remove a particular object from selection list

Name	Type	Description
node	object	the node/connector to be removed from selection list

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
var node=diagram.selectionList[0];
diagram.removeSelection(node);
</script>

sameHeight()

Scale the selected objects to the height of the first selected object

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.sameHeight();
</script>

sameSize()

Scale the selected objects to the size of the first selected object

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.sameSize();
</script>

sameWidth()

Scale the selected objects to the width of the first selected object

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.sameWidth();
</script>

### save()

Returns the diagram as serialized JSON

Returns:

object

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
var savedDiagram = diagram.save();
</script>

scrollToNode(node)

Bring the node into view

Name	Type	Description
node	object	the node/connector to be brought into view

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
var node = diagram.selectionList[0];
diagram.scrollToNode(node);
</script>

selectAll()

Select all nodes and connector in diagram

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.selectAll();
</script>

sendBackward()

Visually move the selected object behind its closest intersected object

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.sendBackward();
</script>

sendToBack()

Visually move the selected object behind all other intersected objects

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.sendToBack();
</script>

spaceAcross()

Update the horizontal space between the selected objects as equal and within the selection boundary

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.spaceAcross();
</script>

spaceDown()

Update the vertical space between the selected objects as equal and within the selection boundary

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.spaceDown();
</script>

startLabelEdit(node, label)

Move the specified label to edit mode

Name	Type	Description
node	object	node/connector that contains the label to be edited
label	object	to be edited

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
var node=diagram.selectionList[0];
diagram.startLabelEdit(node,node.labels[0]);
</script>

undo()

Reverse the last action that was performed

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.undo();
</script>

ungroup()

Ungroup the selected group

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.ungroup();
</script>

update(options)

Update diagram at runtime

Name	Type	Description
options	object	JSON to specify the diagram properties that have to be modified

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
var tool = ej.datavisualization.Diagram.Tool.ZoomPan;
//update the tool
diagram.update({ tool: tool });
</script>

updateConnector(name, options)

Update Connectors at runtime

Name	Type	Description
name	string	name of the connector to be updated
options	object	JSON to specify the connector properties that have to be updated

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.updateConnector("connector1", { lineColor: "red", lineWidth: 3 });
</script>

updateLabel(nodeName, label, options)

Update the given label at runtime

Name	Type	Description
nodeName	string	the name of node/connector which contains the label to be updated
label	object	the label to be modified
options	object	JSON to specify the label properties that have to be updated

Returns:

object

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
var node=diagram.selectionList[0];
var label = [];
label =[{"name":"node1" "text": "node", "bold": true, "italic": true}]
diagram.updateLabel(node.name,node.labels[0],label);
</script>

updateLayer(layerName, options)

Update the given layer at run time.

Name	Type	Description
layerName	string	the name of layer to be updated
options	object	the layer object to be modified

Example

HTML

<div id="diagram"></div>
<script>
        // creating the instance for the diagram
        var diagram = $("#diagram").ejDiagram("instance");
        // update the layer objects will be hidden on printing.
        diagram.updateLayer('Layer1', { print: false })
</script>

updateNode(name, options)

Update nodes at runtime

Name	Type	Description
name	string	name of the node that is to be updated
options	object	JSON to specify the properties of node that have to be updated

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.updateNode("node1", { fillColor: "red", borderWidth: "3" });
</script>

updatePort(nodeName, port, options)

Update a port with its modified properties at runtime

Name	Type	Description
nodeName	string	the name of node which contains the port to be updated
port	object	the port to be updated
options	object	JSON to specify the properties of the port that have to be updated

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
var node=diagram.selectionList[0];
var port ={fillColor:"red", visibility:ej.datavisualization.Diagram.PortVisibility.Visible}
diagram.updatePort(node.name,node.ports[0], port);
</script>

updateSelectedObject(name)

Update the specified node as selected object

Name	Type	Description
name	string	name of the node to be updated as selected object

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.updateSelectedObject(name);
</script>

updateSelection([showUserHandles])

Update the selection at runtime

Name	Type	Description
[showUserHandles]	boolean	to specify whether to show the user handles or not

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.updateSelection(true);
</script>

updateUserHandles(node)

Update user handles with respect to the given node

Name	Type	Description
node	object	node/connector with respect to which, the user handles have to be updated

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
var node = diagram.selectionList[0];
diagram.updateUserHandles(node);
</script>

updateViewPort()

Update the diagram viewport at runtime

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.updateViewPort();
</script>

upgrade(data)

Upgrade the diagram from old version

Name	Type	Description
data	object	to be upgraded

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
diagram.upgrade(jsonData);
diagram.load(jsonData);
</script>

zoomTo([Zoom])

Used to zoomIn/zoomOut diagram

Name

Type

Description

[Zoom]

object

options to zoom the diagram(zoom factor, zoomIn/zoomOut)

Name	Type	Description
zoomFactor	number	Used to increase the zoom-in or zoom-out based on the zoom factor value.
zoomCommand	enum	Used to zoom-in or zoom-out the diagram.
focusPoint	object	Used to zoom-in or zoom-out the diagram based on the point.

Example

HTML

<div id="diagramcontent"></div>
<script>
var diagram=$("#diagramcontent").ejDiagram("instance");
var zoom = ej.datavisualization.Diagram.Zoom();
zoom.zoomFactor = .1;
zoom.zoomCommand = ej.datavisualization.Diagram.ZoomCommand.ZoomIn;
diagram.zoomTo(zoom);
</script>

ZoomCommand

Used to zoom-in or zoom-out the diagram

Name	Description
ZoomIn	Used to zoom in the Diagram
ZoomOut	Used to zoom out the diagram

Events

autoScrollChange

Triggers When auto scroll is changed

Name	Type	Description
delay	string	Returns the delay between subsequent auto scrolls
diagramId	string	parameter returns the id of the diagram

Example

HTML

// autoScrollChange event for diagram
$("#diagramcontent").ejDiagram({
autoScrollChange:function (args) {}
});

click

Triggers when a node, connector or diagram is clicked

Name	Type	Description
element	object	parameter returns the clicked node, connector or diagram
actualObject	number	parameter returns the object that is actually clicked
offsetX	number	parameter returns the horizontal coordinate of the mouse pointer, relative to the diagram
offsetY	number	parameter returns the vertical coordinate of the mouse pointer, relative to the diagram
count	number	parameter returns the count of how many times the mouse button is pressed
event	object	parameter returns the event triggered
diagramId	string	parameter returns the id of the diagram
cancel	boolean	parameter to specify whether or not to cancel the event

Example

HTML

// click event for diagram
$("#diagramcontent").ejDiagram({
click:function (args) {}
});

connectionChange

Triggers when the connection is changed

Name	Type	Description
element	object	parameter returns the connection that is changed between nodes, ports or points
connection	string	parameter returns the new source node or target node of the connector
port	object	parameter returns the new source port or target port of the connector
cancel	boolean	parameter defines whether to cancel the change or not
diagramId	string	parameter returns the id of the diagram

Example

HTML

// connectionChange event for diagram
$("#diagramcontent").ejDiagram({
connectionChange:function (args) {}
});

connectorCollectionChange

Triggers when the connector collection is changed

Name	Type	Description
changeType	string	parameter returns whether the connector is inserted or removed
element	object	parameter returns the connector that is to be added or deleted
cancel	boolean	parameter defines whether to cancel the collection change or not
state	string	triggers before and after adding the connector in the diagram which can be differentiated through `state` argument. We can cancel the event only before adding the connector.
diagramId	string	parameter returns the id of the diagram

Example

HTML

// connectorCollectionChange event for diagram
$("#diagramcontent").ejDiagram({
connectorCollectionChange:function (args) {}
});

connectorSourceChange

Triggers when the connectors’ source point is changed

Name	Type	Description
element	object	returns the connector, the source point of which is being dragged
node	object	returns the source node of the element
point	object	returns the source point of the element
port	object	returns the source port of the element
dragState	string	returns the state of connection end point dragging(starting, dragging, completed)
cancel	boolean	parameter defines whether to cancel the change or not
diagramId	string	parameter returns the id of the diagram

Example

HTML

// connectorSourceChange event for diagram
$("#diagramcontent").ejDiagram({
connectorSourceChange:function (args) {}
});

connectorTargetChange

Triggers when the connectors’ target point is changed

Name	Type	Description
element	object	parameter returns the connector, the target point of which is being dragged
node	object	returns the target node of the element
point	object	returns the target point of the element
port	object	returns the target port of the element
dragState	string	returns the state of connection end point dragging(starting, dragging, completed)
cancel	boolean	parameter defines whether to cancel the change or not
diagramId	string	parameter returns the id of the diagram

Example

HTML

// connectorTargetChange event for diagram
$("#diagramcontent").ejDiagram({
connectorTargetChange:function (args) {}
});

contextMenuBeforeOpen

Triggers before opening the context menu

Name	Type	Description
diagram	object	parameter returns the diagram object
contextmenu	object	parameter returns the actual arguments from context menu
target	object	parameter returns the object that was clicked
diagramId	string	parameter returns the id of the diagram
cancel	boolean	parameter returns whether or not to cancel the dragOver event
model	object	parameter returns the actual click event arguments that explains which button is clicked
type	string	parameter returns the type of the event triggered

Example

HTML

// contextMenuBeforeOpen event for diagram
$("#diagramcontent").ejDiagram({
contextMenuBeforeOpen:function (args) {}
});

contextMenuClick

Triggers when a context menu item is clicked

Name	Type	Description
id	string	parameter returns the id of the selected context menu item
text	string	parameter returns the text of the selected context menu item
parentId	string	parameter returns the parent id of the selected context menu item
parentText	string	parameter returns the parent text of the selected context menu item
target	object	parameter returns the object that was clicked
canExecute	boolean	parameter defines whether to execute the click event or not
diagramId	string	parameter returns the id of the diagram
cancel	boolean	parameter to specify whether or not to cancel the event
element	object	parameter returns the element of the object that was clicked
selectedItem	object	parameter returns the object that is selected
events	object	parameter returns the model of the diagram

Example

HTML

// contextMenuClick event for diagram
$("#diagramcontent").ejDiagram({
contextMenuClick:function (args) {}
});

doubleClick

Triggers when a node, connector or diagram model is clicked twice

Name	Type	Description
actualObject	object	parameter returns the object that is actually clicked
element	object	parameter returns the selected object
diagramId	string	parameter returns the id of the diagram
cancel	boolean	parameter to specify whether or not to cancel the event

Example

HTML

// doubleClick event for diagram
$("#diagramcontent").ejDiagram({
doubleClick:function (args) {}
});

drag

Triggers while dragging the elements in diagram

Name	Type	Description
element	object	parameter returns the node or connector that is being dragged
oldValue	object	parameter returns the previous position of the node/connector
newValue	object	parameter returns the new position of the node/connector
dragState	string	parameter returns the state of drag event (Starting, dragging, completed)
cancel	boolean	parameter returns whether or not to cancel the drag event
diagramId	string	parameter returns the id of the diagram
offset	object	parameter returns the offset of the selected items

Example

HTML

// drag event for diagram
$("#diagramcontent").ejDiagram({
drag:function (args) {}
});

dragEnter

Triggers when a symbol is dragged into diagram from symbol palette

Name	Type	Description
element	object	parameter returns the node or connector that is dragged into diagram
cancel	boolean	parameter returns whether to add or remove the symbol from diagram
diagramId	string	parameter returns the id of the diagram

Example

HTML

// drag enter event for diagram
$("#diagramcontent").ejDiagram({
dragEnter:function (args) {}
});

dragLeave

Triggers when a symbol is dragged outside of the diagram.

Name	Type	Description
element	object	parameter returns the node or connector that is dragged outside of the diagram
cancel	boolean	parameter returns whether or not to cancel the dragOver event
diagramId	string	parameter returns the id of the diagram

Example

HTML

// drag leave event for diagram
$("#diagramcontent").ejDiagram({
dragLeave:function (args) {}
});

dragOver

Triggers when a symbol is dragged over diagram

Name	Type	Description
element	object	parameter returns the node or connector that is dragged over diagram
allowDrop	boolean	parameter defines whether the symbol can be dropped at the current mouse position
target	object	parameter returns the node/connector over which the symbol is dragged
oldValue	object	parameter returns the previous position of the node/connector
newValue	object	parameter returns the new position of the node/connector
cancel	boolean	parameter returns whether or not to cancel the dragOver event
diagramId	string	parameter returns the id of the diagram

Example

HTML

// drag over event for diagram
$("#diagramcontent").ejDiagram({
dragOver:function (args) {}
});

drop

Triggers when a symbol is dragged and dropped from symbol palette to drawing area

Name	Type	Description
element	object	parameter returns node or connector that is being dropped
cancel	boolean	parameter returns whether or not to cancel the drop event
source	object	parameter returns the object from where the element is dragged
target	object	parameter returns the object over which the object will be dropped
objectType	String	parameter returns the enum which defines the type of the source
diagramId	string	parameter returns the id of the diagram

Example

HTML

// drop event for diagram
$("#diagramcontent").ejDiagram({
drop:function (args) {}
});

editorFocusChange

Triggers when editor got focus at the time of node’s label or text node editing.

Name	Type	Description
model	object	Returns the diagram model.
event	object	parameter returns the editor element
type	string	Returns the name of the event
diagramId	string	parameter returns the id of the diagram

Example

HTML

// editorFocusChange event for diagram
$("#diagramcontent").ejDiagram({
editorFocusChange:function (args) {}
});

groupChange

Triggers when a child is added to or removed from a group

Name	Type	Description
element	object	parameter returns the object that is added to/removed from a group
oldParent	object	parameter returns the old parent group(if any) of the object
newParent	object	parameter returns the new parent group(if any) of the object
cause	string	parameter returns the cause of group change("group", unGroup")
diagramId	string	parameter returns the id of the diagram

Example

HTML

// group change event for diagram
$("#diagramcontent").ejDiagram({
groupChange:function (args) {}
});

historyChange

Triggers when a change is reverted or restored(undo/redo)

Name	Type	Description
changes	Array	An array of objects, where each object represents the changes made in last undo/redo. To explore how the changes are defined, refer [Undo Redo Changes](#undo-redo-changes)
Source	Array	A collection of objects that are changed in the last undo/redo
diagramId	string	parameter returns the id of the diagram
cancel	boolean	parameter to specify whether or not to cancel the event
cause	boolean	parameter returns the model of the diagram

Undo Redo Changes

Name	Type	Description
type	string	Returns the type of change that is reverted/restored (example:positionChanged, sizeChanged)
newValues	Object	Returns the new values of the properties that are changed.(example:newValues:{offset:60,offset:60,width:60,height:60})
oldValues	Object	Returns the old values of the properties that are changed.(example:oldValues:{offset:60,offset:60,width:60,height:60})
addedItems	Array	Returns the items that are newly added to model
deletedItems	Array	Returns the items that are deleted from model
diagramId	string	parameter returns the id of the diagram

Example

HTML

// history change event for diagram
$("#diagramcontent").ejDiagram({
historyChange:function (args) {}
});

itemClick

Triggers when a diagram element is clicked

Name	Type	Description
actualObject	object	parameter returns the object that was actually clicked
selectedObject	object	parameter returns the object that is selected
cancel	boolean	parameter returns whether or not to cancel the drop event
event	object	parameter returns the model of the diagram
diagramId	string	parameter returns the id of the diagram

Example

HTML

// itemClick event for diagram
$("#diagramcontent").ejDiagram({
itemClick:function (args) {}
});

mouseEnter

Triggers when mouse enters a node/connector

Name	Type	Description
element	object	parameter returns the target node or connector
source	object	parameter returns the object from where the selected object is dragged
target	object	parameter returns the target object over which the selected object is dragged
diagramId	string	parameter returns the id of the diagram
cancel	boolean	parameter returns whether or not to cancel the dragOver event

Example

HTML

// mouseEnter event for diagram
$("#diagramcontent").ejDiagram({
mouseEnter:function (args) {}
});

mouseLeave

Triggers when mouse leaves node/connector

Name	Type	Description
element	object	parameter returns the target node or connector
source	object	parameter returns the object from where the selected object is dragged
target	object	parameter returns the target object over which the selected object is dragged
cancel	boolean	parameter returns whether or not to cancel the dragOver event
diagramId	string	parameter returns the id of the diagram

Example

HTML

// mouseLeave event for diagram
$("#diagramcontent").ejDiagram({
mouseLeave:function (args) {}
});

mouseOver

Triggers when mouse hovers over a node/connector

Name	Type	Description
element	object	parameter returns the target node or connector
source	object	parameter returns the object from where the element is dragged
target	object	parameter returns the object over which the element is being dragged.
cancel	boolean	parameter returns whether or not to cancel the dragOver event
diagramId	string	parameter returns the id of the diagram

Example

HTML

// mouseOver event for diagram
$("#diagramcontent").ejDiagram({
mouseOver:function (args) {}
});

nodeCollectionChange

Triggers when node collection is changed

Name	Type	Description
changeType	string	parameter returns whether the node is to be added or removed
element	object	parameter returns the node which needs to be added or deleted
cancel	boolean	parameter defines whether to cancel the collection change or not
state	string	triggers before and after adding the node in the diagram which can be differentiated through `state` argument. We can cancel the event only before adding the node
diagramId	string	parameter returns the id of the diagram

Example

HTML

// nodeCollectionChange event for diagram
$("#diagramcontent").ejDiagram({
nodeCollectionChange:function (args) {}
});

propertyChange

Triggers when the node properties(x, y,width and height alone) are changed using nudge commands or updateNode API.

Name	Type	Description
element	object	parameter returns the selected element
cause	String	parameter returns the action is nudge or not
newValue	object	parameter returns the new value of the node property that is being changed
oldValue	object	parameter returns the old value of the property that is being changed
propertyName	string	parameter returns the name of the property that is changed
diagramId	string	parameter returns the id of the diagram
cancel	boolean	parameter defines whether to cancel the property change or not

Example

HTML

// propertyChange event for diagram
$("#diagramcontent").ejDiagram({
propertyChange:function (args) {}
});

rotationChange

Triggers when the diagram elements are rotated

Name	Type	Description
element	object	parameter returns the node that is rotated
oldValue	object	parameter returns the previous rotation angle
newValue	object	parameter returns the new rotation angle
cancel	boolean	parameter to specify whether or not to cancel the event
diagramId	string	parameter returns the id of the diagram
cause	string	parameter returns the actual click event arguments that explains which button is clicked

Example

HTML

// rotationChange event for diagram
$("#diagramcontent").ejDiagram({
rotationChange:function (args) {}
});

scrollChange

Triggers when the diagram is zoomed or panned

Name	Type	Description
newValues	object	Parameter returns the new zoom value, horizontal and vertical scroll offsets.
oldValues	object	parameter returns the previous zoom value, horizontal and vertical scroll offsets.
cancel	boolean	parameter returns whether or not to cancel the dragOver event
diagramId	string	parameter returns the id of the diagram
cause	string	Parameter returns the new zoom value, horizontal and vertical scroll offsets.

Example

HTML

// ScrollChange event
$("#diagramcontent").ejDiagram({
scrollChange :function (args) {
} });

segmentChange

Triggers when a connector segment is edited

Name	Type	Description
element	object	Parameter returns the connector that is being edited
dragState	string	parameter returns the state of editing (starting, dragging, completed)
point	object	parameter returns the current mouse position
cancel	boolean	parameter to specify whether or not to cancel the event
diagramId	string	parameter returns the id of the diagram

Example

HTML

// segment changed event for diagram
$("#diagramcontent").ejDiagram({
segmentChange:function (args) {}
});

selectionChange

Triggers when the selection is changed in diagram

Name	Type	Description
changeType	string	parameter returns whether the item is selected or removed selection
element	object	parameter returns the item which is selected or to be selected
oldItems	array	parameter returns the collection of nodes and connectors that have to be removed from selection list
newItems	array	parameter returns the collection of nodes and connectors that have to be added to selection list
selectedItems	array	parameter returns the collection of nodes and connectors that will be selected after selection change
cancel	boolean	parameter to specify whether or not to cancel the selection change event
state	string	triggers before and after adding the selection to the object in the diagram which can be differentiated through `state` argument. We can cancel the event only before the selection of the object.
diagramId	string	parameter returns the id of the diagram
cause	string	parameter returns the actual cause of the event

Example

HTML

// selectionChange event for diagram
$("#diagramcontent").ejDiagram({
selectionChange:function (args) {}
});

sizeChange

Triggers when a node is resized

Name	Type	Description
element	object	parameter returns node that was resized
cancel	boolean	parameter to cancel the size change
newValue	object	parameter returns the new width, height, offsetX and offsetY values of the element that is being resized
oldValue	object	parameter returns the previous width,height,offsetX and offsetY values of the element that is being resized
resizeState	string	parameter returns the state of resizing(starting,resizing,completed)
offset	object	parameter returns the difference between new and old value
diagramId	string	parameter returns the id of the diagram
direction	string	parameter returns the direction of the node is resized

Example

HTML

// sizeChange event for diagram
$("#diagramcontent").ejDiagram({
sizeChange:function (args) {}
});

textChange

Triggers when label editing is ended

Name	Type	Description
element	object	parameter returns the node that contains the text being edited
value	string	parameter returns the new text
keyCode	string	parameter returns the keyCode of the key entered
diagramId	string	parameter returns the id of the diagram
cancel	boolean	parameter to specify whether or not to cancel the event

Example

HTML

// textChange event for diagram
$("#diagramcontent").ejDiagram({
textChange:function (args) {}
});

create

Triggered when the diagram is rendered completely.

Name	Type	Description
model	object	Returns the diagram model.
type	string	Returns the name of the event
diagramId	string	parameter returns the id of the diagram

Example

HTML

// create event for diagram
    $("#diagramcontent").ejDiagram({
    create:function (args) {}
    });

setTool

Used to decide on the action on Diagramming elements at runtime.

Name	Type	Description
source	object	Returns the port when mouse move over on it
action	enum	Defines the tool to be activated.

Example

HTML

<div id="diagramcontent"></div>
        <script>
        var nodes= [{
                    name: "node1",
                    ports: [{  visibility: ej.datavisualization.Diagram.PortVisibility.Visible,constraints: ej.datavisualization.Diagram.PortConstraints.Connect | PortConstraints.ConnectOnDrag }],
                    }];
                    $("#diagramcontent").ejDiagram({
                        height: "600px", width: "100%",
                        nodes: nodes,
                        //Defining the setTool Method
                        setTool: function (args) {
                            var value = document.getElementById("SetTool").value;
                            if (value === "drag") {
                                args.action = ej.datavisualization.Diagram.ActiveTool.Drag;
                            }
                            else if (value === "draw") {
                            args.action = ej.datavisualization.Diagram.ActiveTool.Draw;
                            }
                        },
                    });

ActiveTool

used to Activate the setTool method

Name	Description
None	Set the default Tool
Drag	Activate the port tool to drag when the mouse is moved over the port
Draw	Activate the draw tool to draw when the mouse is moved over the port

ejDiagram

Syntax

Example

Requires

Members

backgroundColor string

Default Value:

Example

backgroundImage string

Default Value:

Example

backgroundImage.alignment enum

Default Value:

Example

backgroundImage.scale enum

Default Value:

Example

backgroundImage.source string

Default Value:

Example

bridgeDirection enum

Default Value:

Example

commandManager object

commandManager.commands object

Default Value:

Example

commandManager.commands.canExecute function

Example

commandManager.commands.execute function

Example

commandManager.commands.gesture object

commandManager.commands.gesture.key enum

Default Value:

Example

commandManager.commands.gesture.keyModifiers enum

Default Value:

Example

commandManager.commands.parameter object

Default Value:

Example

connectors array

Default Value:

Example

connectors.addInfo object

Default Value:

Example

connectors.bridgeSpace number

Default Value:

Example

connectors.constraints enum

Default Value:

Example

connectors.cornerRadius number

Default Value:

Example

connectors.cssClass string

Default Value:

Example

connectors.horizontalAlign enum

Default Value:

Example

connectors.labels array

Default Value:

Example

connectors.labels.alignment enum

Default Value:

Example

connectors.labels.bold boolean

Default Value:

Example

connectors.labels.borderColor string

Default Value:

Example

connectors.labels.borderWidth number

Default Value:

Example

connectors.labels.boundaryConstraints boolean

Default Value:

Example

backgroundColor `string`

backgroundImage `string`

backgroundImage.alignment `enum`

backgroundImage.scale `enum`

backgroundImage.source `string`

bridgeDirection `enum`

commandManager `object`

commandManager.commands `object`

commandManager.commands.canExecute `function`

commandManager.commands.execute `function`

commandManager.commands.gesture `object`

commandManager.commands.gesture.key `enum`

commandManager.commands.gesture.keyModifiers `enum`

commandManager.commands.parameter `object`

connectors `array`

connectors.addInfo `object`

connectors.bridgeSpace `number`

connectors.constraints `enum`

connectors.cornerRadius `number`

connectors.cssClass `string`

connectors.horizontalAlign `enum`

connectors.labels `array`

connectors.labels.alignment `enum`

connectors.labels.bold `boolean`

connectors.labels.borderColor `string`

connectors.labels.borderWidth `number`

connectors.labels.boundaryConstraints `boolean`

connectors.labels.constraints `enum`

connectors.labels.fillColor `string`

connectors.labels.fontColor `string`

connectors.labels.fontFamily `string`

connectors.labels.fontSize `number`

connectors.labels.height `number`

connectors.labels.horizontalAlignment `enum`

connectors.labels.hyperlink `string`

connectors.labels.italic `boolean`

connectors.labels.mode `enum`

connectors.labels.name `string`

connectors.labels.offset `object`

connectors.labels.margin `object`

connectors.labels.margin.right `number`

connectors.labels.margin.left `number`

connectors.labels.margin.top `number`

connectors.labels.margin.bottom `number`

connectors.labels.padding `object`

connectors.labels.dragLimit `object`

connectors.labels.dragLimit.right `number`

connectors.labels.dragLimit.left `number`

connectors.labels.dragLimit.top `number`

connectors.labels.dragLimit.bottom `number`

connectors.labels.opacity `number`