Getting Started with JavaScript Diagram

27 Jan 202311 minutes to read

Getting started with your Essential JavaScript Diagram is easy. You can start by creating a simple Flow Diagram.

Flow Diagram

Initialize Diagram

1. Create an HTML file and add the necessary script references and style sheets in the Head tag as shown in the following code example.

  • HTML
  • <!DOCTYPE html>
    <html>
    <head>
    	<title>Getting Started With Diagram Control For Javascript</title>
    	<!-- jQuery Script -->
    	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    	<!--script to create Diagram-->
    	<script src="http://cdn.syncfusion.com/24.2.3/js/web/ej.web.all.min.js"></script>
    </head>
    <body></body>
    </html>

    2. Add a placeholder div element that can be used to initialize the diagram widget as shown below.
    3. Use width and height property of the diagram allows you to define the size of the diagram.

  • HTML
  • <body>
    	<div id="diagram"></div>
    	<script type="text/javascript">
    		$("#diagram").ejDiagram({
    			width: "100%",
    			height: "600px",
    		});
    	</script>
    </body>

    4. This creates an empty diagram

    Diagram Appearance

    The create event gets triggered once the diagram is created.

    Create and add Node

    Let us create and add a node (JSON data) with specific position, size, label and shape.

  • JAVASCRIPT
  • // a node is created and stored in nodes array.
    var nodes = [{
    	// Unique name for the node
    	name: "Start",
    	// Position of the node
    	offsetX: 300,
    	offsetY: 50,
    	// Size of the node
    	width: 140,
    	height: 50,
    	// Text(label) added to the node
    	labels: [{
    		text: "Start"
    	}],
    	// Shape for the node
    	type: "flow",
    	shape: "terminator"
    }];
    
    $("#diagram").ejDiagram({
    	width: "100%",
    	height: "600px",
    	// Add node
    	nodes: nodes,
    });

    NOTE

    labels property is an array, which indicates that more than one label can be added to a node.

    Added node will be displayed in diagram as shown below.

    Diagram Node

    Connect nodes

    • Create another node with another set of data.
  • JAVASCRIPT
  • var nodes =
    [
    	{
    		name: "Start", offsetX: 300, width: 140, height: 50, offsetY: 50,
    		labels: [{ text: "Start" }], type: "flow", shape: "terminator"
    	},
    	{
    		name: "Init", offsetX: 300, width: 140, height: 50, offsetY: 140,
    		labels: [{ text: "var i = 0;" }], type: "flow", shape: "process"
    	},
    ];
    • Connect these two nodes by adding a connector into diagram.connectors collection with reference to source and target end.
  • JAVASCRIPT
  • var connectors = [{
    	// Unique name for the connector
    	name: "connector1",
    
    	// Source and Target node's name to which connector needs to be connected.
    	sourceNode: "Start",
    	targetNode: "Init",
    
    	// An empty orthogonal segment
    	segments: [{ type: "orthogonal" }]
    }];
    
    $("#diagram").ejDiagram({
    	width: "100%",
    	height: "600px",
    	nodes: nodes,
    	connectors: connectors,
    });
    • Connector connects the two nodes as shown below.

    Connector connects the two nodes

    • Default values for all nodes and connectors can be set using defaultSettings property. For example if all nodes have same width and height, we can move such properties into defaultSettings.

    • The defaultSettings node property is used to define the default node properties.
    • The defaultSettings connector property is used to define the default connector properties.
    • The defaultSettings group property is used to define the default group properties.

    Above code can be rewritten as shown below.

  • JAVASCRIPT
  • var nodes = [{
    	name: "Start",
    	offsetY: 50,
    	labels: [{ text: "Start" }],
    	type: "flow",
    	shape: "terminator"
    },{
    	name: "Init",
    	offsetY: 140,
    	labels: [{ text: "var i = 0;" }],
    	type: "flow",
    	shape: "process"
    }];
    
    var connectors = [{
    	name: "connector1",
    	sourceNode: "Start",
    	targetNode: "Init"
    }];
    
    $("#diagram").ejDiagram({
    	width: "100%",
    	height: "600px",
    	nodes: nodes,
    	connectors: connectors,
    	// Common values of all nodes and connectors define using defaultSettings
    	defaultSettings: {
    		node: {
    			offsetX: 300,
    			width: 140,
    			height: 50
    		},
    		connector: {
    			labels: [{ "fillColor": "white" }],
    			segments: [{ type: "orthogonal" }]
    		},
    	}
    });

    Complete flow diagram

    Similarly we can add required nodes and connectors to form a complete flow diagram.

  • JAVASCRIPT
  • var nodes =
    [
    	{ name: "Start", offsetY: 50, labels: [{ text: "Start" }], shape: "terminator" },
    	{ name: "Init", offsetY: 140, labels: [{ text: "var i = 0;" }], shape: "process" },
    	{ name: "Condition", offsetY: 230, labels: [{ text: "i < 10?" }], shape: "decision" },
    	{ name: "Print", offsetY: 320, labels: [{ text: "print(\"Hello!!\");" }], shape: "predefinedprocess" },
    	{ name: "Increment", offsetY: 410, labels: [{ text: "i++;" }], shape: "process" },
    	{ name: "End", offsetY: 500, labels: [{ text: "End" }], shape: "terminator" },
    ];
    
    var connectors = [
    	{ name: "connector1", sourceNode: "Start", targetNode: "Init" },
    	{ name: "connector2", sourceNode: "Init", targetNode: "Condition" },
    	{ name: "connector3", sourceNode: "Condition", targetNode: "Print", labels: [{ text: "Yes" }] },
    	{ name: "connector4", sourceNode: "Condition", targetNode: "End", labels: [{ text: "No" }],
    		segments: [{ length: 30, direction: "right" }]
    	},
    	{ name: "connector5", sourceNode: "Print", targetNode: "Increment" },
    	{ name: "connector6", sourceNode: "Increment", targetNode: "Condition",
    		segments: [{ length: 30, direction: "left" }]
    	}
    ];
    
    $("#diagram").ejDiagram({
    	width: "100%",
    	height: "600px",
    	nodes: nodes,
    	connectors: connectors,
    	defaultSettings: {
    		node: { offsetX: 300, width: 140, height: 50, type: "flow" },
    		connector: {
    			labels: [{ "fillColor": "white" }],
    			segments: [{ type: "orthogonal" }]
    		}
    	}
    });

    Final flow chart will looks as shown below.

    flow chart diagram

    Automatic organization chart

    In ‘Flow Diagram’ section we saw how to create a diagram manually, now let us see how to create and position diagram automatically.

    Initialize diagram

    Initializing diagram is already discussed in Flow Diagram > Initialize diagram section.

    Business object (Employee information)

    • Define Employee Information as JSON data. The following code example shows an employee array whose,
      • Name is used as a unique identifier and
      • ReportingPerson is used to identify the person to whom an employee report to, in the organization.
  • JAVASCRIPT
  • //Initialize data source...
    var data = [
    	{ Name: "Elizabeth", Role: "Director" },
    	{ Name: "Christina", ReportingPerson: "Elizabeth", Role: "Manager" },
    	{ Name: "Yoshi", ReportingPerson: "Christina", Role: "Lead" },
    	{ Name: "Philip", ReportingPerson: "Christina", Role: "Lead" },
    	{ Name: "Yang", ReportingPerson: "Elizabeth", Role: "Manager" },
    	{ Name: "Roland", ReportingPerson: "Yang", Role: "Lead" },
    	{ Name: "Yvonne", ReportingPerson: "Yang", Role: "Lead" }
    ];

    Map data source

    • You can configure this “Employee Information” with Diagram, so that the node and connector are automatically generated using mapping properties. The following code examples show how dataSourceSetting is used to map id and parent with property name identifiers for employee information.
  • JAVASCRIPT
  • //Initialize data source...
    $("#diagram").ejDiagram({
    
    //Configure data source for diagram
    	dataSourceSettings: {
    		id: "Name",
    		parent: "ReportingPerson",
    		dataSource: data
    	}
    });

    Visualize employee

    Following code examples indicate how to define the default appearance of node and connector using defaultSetting. The NodeTemplate is used to update each node based on employee data.

  • JAVASCRIPT
  • //To represent the roles
    var codes = {
    	Director: "rgb(0, 139,139)",
    	Manager: "rgb(30, 30,113)",
    	Lead: "rgb(0, 100,0)"
    }
    
    // Bind custom data with node
    function nodeTemplate(diagram, node) {
    	node.labels[0].text = node.Name;
    	node.fillColor = codes[node.Role];
    }
    
    $("#diagram").ejDiagram({
    	defaultSettings: {
    		//Set the default properties of nodes.
    		node: {
    			width: 70,
    			height: 30,
    			shape: {
    				type: "rectangle",
    				cornerRadius: 5
    			},
    			labels: [{
    				name: "label1",
    				fontSize: 11,
    				bold: true,
    				fontFamily: "Segoe UI",
    				fontColor: "white"
    			}]
    		},
    		//Set the default properties of connectors.
    		connector: {
    			segments: [{
    				type: "orthogonal"
    			}],
    			targetDecorator: {
    				shape: "arrow"
    			}
    		}
    	},
    	//Initialize the node template.
    	nodeTemplate: nodeTemplate,
    	//Configure data source for diagram
    	dataSourceSettings: {
    		id: "Name",
    		parent: "ReportingPerson",
    		//Specifies the dataSource
    		dataSource: data
    	}
    });

    Apply org chart layout

    • Next you need to arrange nodes in an organizational chart structure, and to do this you can apply layout as shown in following code example. You can see that spacing, margin and orientation are defined, that can also be customized based on the needs.
  • JAVASCRIPT
  • $("#diagram").ejDiagram({
    	//Use automatic layout to arrange elements on the page
    	layout: {
    		type: ej.datavisualization.Diagram.LayoutTypes.OrganizationalChart,
    		marginX: 10,
    		marginY: 50,
    		horizontalSpacing: 50,
    		verticalSpacing: 50,
    		orientation: ej.datavisualization.Diagram.LayoutOrientations.TopToBottom
    	}
    
    });
    • The Employee details are displayed in the Diagram as follows.

    org chart layout diagram