How to Start

The current tutorial will help you to get basics of creating a Diagram/Org Chart on a page, populating it with desired data and proceed with adjusting possible visualization settings.

When you finish all the steps below, you'll become a happy possessor of a stylish and full-featured diagram widget. Let's start!

Step 1. Including Source Files

We'll start with adding the Diagram source file into an HTML file in order to get access to the functionality of the library. See the detailed description of the dhtmlxDiagram package structure.

There are two necessary files:

  • the JS file of dhtmlxDiagram
  • the CSS file of dhtmlxDiagram

and a link to the Google Fonts source file for the correct rendering of fonts.

myDiagram.html

<!DOCTYPE html>
<html>
<head>
  <title>How to Start with dhtmlxDiagram</title>
  <script src="codebase/diagram.js"></script>   
 
  <link href="codebase/diagram.css" rel="stylesheet"> 
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
</head>
<body>
    <script>
    // your code will be here
</script> </body> </html>

Step 2. Creating Diagram

Now we are ready to add a diagram to a page. First, let's create a DIV container and then place dhtmlxDiagram into it. So, our steps will be:

  • to specify a DIV container in the myDiagram.html file
  • to initialize dhtmlxDiagram using the dhx.Diagram constructor

As parameters, the constructor function takes the HTML container to place a diagram into and the Diagram configuration object.

myDiagram.html

<!DOCTYPE html>
<html>
<head>
  <title>How to Start with dhtmlxDiagram</title>
  <script src="codebase/diagram.js"></script>   
 
  <link href="codebase/diagram.css" rel="stylesheet">  
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
</head>
<body>
    <script>
     // creating an organization chart
     var myDiagram = new dhx.Diagram("diagram_container");
</script> </body> </html>

Step 3. Setting Diagram Type (optional)

Besides the default dhtmlxDiagram, you can initialize an Organizational Chart that displays shapes connected in the hierarchical order.


For this purpose, you should set the type:org option in the configuration object:

myDiagram.html

// creating an organizational chart
var myDiagram = new dhx.Diagram("diagram_container", {type:"org"});

Step 4. Setting Diagram Config

At this step we can specify the Diagram configuration settings. See the full list of config properties.

myDiagram.html

// enabling selection
var myDiagram = new dhx.Diagram("diagram_container", {select:true});

Later we can change the Diagram configuration. Read about the possibilities of adjusting Diagram to your needs.

Step 5. Loading Data into Diagram

Finally, we can populate Diagram with data. dhtmlxDiagram loads data in the JSON format.

We will specify the data source as an inline object. To load data into Diagram, we will use the parse method and pass our dataset as its parameter:

myDiagram.html

// data to load
var data = [
    // shapes
    { "id": "1", "x": 880, "y": 105, "text": "Text 1", "type": "process"},
    { "id": "2", "x": 1080, "y": 125, "text": "Text 2", "type": "circle"},
    { "id": "3",   "x": 1160, "y": 40, "text": "Text 3", "type": "preparation"},
    { "id": "3.1", "x": 1340, "y": 40, "text": "Text 3.1", "type": "process"},
    { "id": "3.2", "x": 1520, "y": 40, "text": "Text 3.2", "type": "preparation"},
 
    // connectors
    { "from":"1", "to":"2", "type":"dash", "forwardArrow":"filled" },
    { "from":"2", "to":"3", "type":"dash", "toSide":"bottom", "forwardArrow":"filled"}, 
    { "from":"2", "to":"3.2", "type":"dash", "fromSide":"top", "toSide":"top" },
    { "from":"3", "to":"3.1", "type":"line", "forwardArrow":"filled" },
    { "from":"3.1", "to":"3.2", "type":"line", "forwardArrow":"filled" }
];
 
// initializing a diagram
var myDiagram = new dhx.Diagram("diagram_container", {select:true});
// loading data into the diagram
diagram.data.parse(data);


You can find more info on loading data into Diagram in the article Loading and Storing Data.

Related sample:  Wide Flow-Chart

What's Next

Now the Diagram is ready for structuring your data set and presenting it in a nice schematic way.

If you find yourself enthusiastic about exploring the backstage of dhtmlxDiagram, these are suggestions for further reading:

Back to top