Creating dhtmlxDiagram

In this article we will discuss the stages of adding dhtmlxDiagram on a page. This process presupposes several simple steps:

  1. Include the dhtmlxDiagram source files on a page.
  2. Create a container to place the Diagram into.
  3. Initialize the Diagram with the object constructor.
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="codebase/diagram.js"></script>    
  <link rel="stylesheet" href="codebase/diagram.css">
</head>
 
<body>
    <div id="diagram_container"></div>
    <script>
        var myDiagram = new dhx.Diagram("diagram_container", {// config options});
</script> </body> </html>

Including Required Code Files

To create dhtmlxDiagram, you need to include 2 source files on your page:

  • diagram.js
  • diagram.css

Make sure that you set correct relative paths to these files:

<script type="text/javascript" src="codebase/diagram.js"></script>  
<link rel="stylesheet" href="codebase/diagram.css">

The structure of dhtmlxDiagram package is the following:

  • sources - the source code files of the library. The files are not minified and easy-to-read. The package is mostly intended to be used for component's debugging;

Note that the Trial version of the Diagram library doesn't contain the sources folder.

  • samples - the code samples;
  • codebase - the packed code files of the library. These files are much smaller and intended for use in production. In your apps you need to use files from this folder.

Creating Container

It's high time to add an HTML container for our diagram. Let's give it the id "diagram_container":

<div id="diagram_container"></div>

Initializing Diagram

To initialize dhtmlxDiagram, you should use the dhx.Diagram constructor. The constructor function takes two parameters:

  • a container to place a Diagram into. The one we have created at the previous step.
  • an object with configuration properties. See the full list below.
var myDiagram = new dhx.Diagram("diagram_container", {// config options});

It is also possible to skip setting a container for Diagram and to add it right into the document's body:

var myDiagram = new dhx.Diagram(document.body, {// config options});

Initializing Org Chart

To create an Org Chart, specify the type:"org" property in the configuration object:

var myDiagram = new dhx.Diagram("diagram_container", {type:"org"});

Related sample:  Basic Org chart - DHTMLX Diagram

Configuration properties

There is a list of properties that you can specify in the diagram configuration object (the second parameter of the constructor function):

  • autoplacement - (object) sets configuration for autoplacement;
  • type - (string) used to set the "org" type of a diagram;
  • select - (boolean) enables the ability to select particular shapes;
  • defaultShapeType - (string) defines the type of a diagram shape that is applied to all shapes by default. The default value is "card". You can set an individual type for each shape;
  • defaults - (object) defines the default configuration that is applied to all shapes of a specified type;
  • defaultLinkType - (string) defines the type of diagram links that is applied to all links by default. The default value is "line". You can set an individual type for each link;
  • margin - (object) specifies the vertical and horizontal margins for diagram shapes;
  • scale - (boolean) enables zooming in and out from a diagram, 1 by default;
  • gridStep - (number) defines the size of a grid step in pixels, 10 by default;
  • lineGap - (number) defines the spacing between shapes and the connector line, 10 by default;
  • toolbar - (array) sets a toolbar with buttons for shapes

There are two ways to change the configuration of a diagram. You can specify the desired property in the config object passed as a second parameter of the constructor function.

var myDiagram = new dhx.Diagram("diagram_container", {scale:0.7});

Related sample:  Wide flowchart - DHTMLX Diagram

Alternatively, you can get access to some option and set/modify its value via the diagram config. Don't forget to call the paint method to re-render the diagram with a new configuration:

var diagram = new dhx.Diagram("diagram_container");
diagram.parse(data);
 
diagram.config.scale = 0.7; diagram.paint();
Back to top