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

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`