Getting started

6 Jun 202312 minutes to read

This section explains briefly about how to create a Diagram control in your application with reactjs.

Adding Script Reference

Create an HTML page and add the scripts references in the order mentioned in the following code example.

  • jQuery 1.10.2 and later versions

The required ReactJS script dependencies as follows. And you can also refer React to know more about react js.

To get started, you can use the ej.web.all.min.js file that encapsulates all the ej controls and frameworks in one single file.

  • HTML
    • <!DOCTYPE html>
   <html>
     <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Essential Studio for React JS">
        <meta name="author" content="Syncfusion">
        <title>Getting Started for Ribbon React JS</title>
        <!-- Essential Studio for JavaScript  theme reference -->
        <link href="http://cdn.syncfusion.com/28.1.33/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
        <!-- Essential Studio for JavaScript  script references -->
        <script src="http://cdn.syncfusion.com/js/assets/external/jquery-3.0.0.min.js"></script>
        <script src="http://cdn.syncfusion.com/js/assets/external/react.min.js"></script>
        <script src="http://cdn.syncfusion.com/js/assets/external/react-dom.min.js"></script>
        <script src="http://cdn.syncfusion.com/28.1.33/js/web/ej.web.all.min.js"></script>
        <script src="http://cdn.syncfusion.com/28.1.33/js/common/ej.web.react.min.js"></script>
        <!-- Add your custom scripts here -->
    </head>
        <body>
        </body>
   </html>

    NOTE

    1. In production, we highly recommend you to use our custom script generator to create custom script file with required controls and its dependencies only. Also to reduce the file size further please use GZip compression in your server.
    2. For themes, you can use the ej.web.all.min.css CDN link from the code snippet given. To add the themes in your application, please refer to this link.

    Control Initialization

    Control can be initialized in two ways.

    • Using jsx Template
    • Without using jsx Template

    Using jsx Template

    By using the jsx template, we can create the html file and jsx file. The .jsx file can be convert to .js file and it can be referred in html page.

    Initialize Diagram

    Add a div container to render the Diagram.

  • HTML
    • <!DOCTYPE html>
<html>    
    <body>
	<div id="diagram-default" style="height:99%;"></div>
            <script src="app/diagram/default.js"></script>    
    </body>
</html>

    Initialize the Diagram by using the EJ.Diagram tag. The Diagram is rendered based on default width and height. You can also customize the Diagram dimension by setting the width and height attribute in scrollSettings.

  • JAVASCRIPT
    • "use strict";
ReactDOM.render(
    <div className="default">
        <EJ.Diagram id="diagram1" width="100%" height="100%" ></EJ.Diagram>,
    </div>,
    document.getElementById('diagram-default')
    );

    This creates an empty diagram as shown in image

    Initial diagram

    Populate Diagram with nodes and connectors

    Now, this section explains how to populate JSON data to the Diagram.

  • JAVASCRIPT
    • <script type="text/babel">

var def_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"
        },
        {
            name: "Init", 
            offsetX: 300, 
            offsetY: 140,
            width: 140, 
            height: 50,
            labels: [{ 
                text: "var i = 0;" 
            }], 
            type: "flow",
            shape: "process"
            }
        ];
            
var def_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" }]
}];

<!DOCTYPE html>
<html>    
    <body>
        <script type="text/babel">
            ReactDOM.render(
                     <div className="default">
                        <EJ.Diagram id="diagram1" width="100%" height="100%"  nodes: {def_nodes}, connectors: {def_connectors}, ></EJ.Diagram>,
                     </div>,
                     document.getElementById('diagram-default')
                     );
        </script>
    </body>
</html>

    Render Nodes and Connectors in diagram

    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
    • 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" }
];

    Without using jsx Template

    The Diagram can be created from a HTML DIV element with the HTML id attribute set to it. Refer to the following code example.

    • You can configure data mapping using “Employee Information” with Diagram, so that the node and connector are automatically generated using mapping properties. DefaultSettings can define the default appearance of node and connector.

    • The NodeTemplate is used to update each node based on employee data.

    • The following code examples show how dataSourceSetting is used to map id and parent with property name identifiers for employee information.

  • HTML
    • <div id="diagram-organizationalchart" style="height:99%;">
</div>
  • JAVASCRIPT
    • //To represent the roles
var codes = {
    Director: "rgb(0, 139,139)",
    Manager: "rgb(30, 30,113)",
    Lead: "rgb(0, 100,0)"
}

//Binds custom data with node
function nodeTemplate(diagram, node) {
    node.labels[0].text = node.Name;
    node.fillColor = codes[node.Role];
}

var layout= { type: "organizationalchart", orientation: "toptobottom", horizontalSpacing: 25, verticalSpacing: 35, marginX: 3, marginY: 3};
var defaultSettings= {
    node: { constraints: ej.datavisualization.Diagram.NodeConstraints.Select | ej.datavisualization.Diagram.NodeConstraints.PointerEvents, width: 100, height: 40, borderColor: "black", labels: [{ fontColor: "#ffffff" }] },
    connector: {
        lineColor: "#000000", segments: [{ type: "orthogonal" }], targetDecorator: { shape: "none" },
        constraints: ej.datavisualization.Diagram.ConnectorConstraints.None
    }
};

var dataSourceSettings = { id: "Name", parent: "ReportingPerson", dataSource: data }

function diagram5Create(args)
{
 var height=$("#diagram4").height()- $(".e-box.e-addborderbottom.e-header").height()
 $("#diagram4").ejDiagram({ height : height}); 
}
    React.createElement(EJ.Diagram, {
    id: "diagram5", 
    height: "100%", 
    width: "100%", 
    layout: layout, 
    defaultSettings: defaultSettings, 
    dataSourceSettings: dataSourceSettings, 
    nodeTemplate: nodeTemplate, 
    create: diagram5Create
    }),	document.getElementById('diagram-organizationalchart')
    • The Employee details are displayed in the Diagram as follows.

    Render Layout