ejDiagram

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:

    • 10

    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:

    • 0

    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:

    • 0

    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:

    • 12

    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:

    • 0

    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>

    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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 10

    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:

    • 10

    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:

    • 10

    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:

    • 10

    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:

    • 1

    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:

    • 0

    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:

    • 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", 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:

    • 50

    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:

    • 10

    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:

    • 1

    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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 1

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

    • 1

    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:

    • 8

    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:

    • 8

    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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 8

    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:

    • 8

    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:

    • 0

    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:

    • 0

    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:

    • 30

    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:

    • 30

    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:

    • 30

    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:

    • 100

    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:

    • 0

    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:

    • 20
  • 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:

    • 0

    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:

    • 20

    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:

    • 1

    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:

    • 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, 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:

    • 0

    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:

    • 0

    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:

    • 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, 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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 1

    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:

    • 0

    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:

    • 0

    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:

    • 12

    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:

    • 0

    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:

    • 1

    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:

    • 0

    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:

    • 50

    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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 1

    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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 0

    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:

    • 0

    Example

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

    nodes.parent string

    Sets the name of the parent group

    Default Value:

    • ””

    Example

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

    nodes.pathData string

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

    Default Value:

    • ””

    Example

  • html
  • <div id="diagramcontent"></div>
    <script>
    var nodes;
    nodes=[{ name: "node1", width: 50, height:50, offsetX:50, offsetY:50, 
          type:"basic", shape:"path", pathData: "M370.9702,194.9961L359.5112,159.7291L389.5112,137.9341L419.5112