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="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 dhtmlxDiagram package contains two folders:

  • diagram that contains simply sources of the Diagram component;
  • diagram-editor which contains combined source files: Diagram + DiagramEditor.

The structure of both catalogs 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;
  • samples - the code samples;
  • docs - the full documentation of the component;
  • 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.

Rendering fonts

dhtmlxDiagram makes use of Google Fonts for the elements content. That's why you need to include the related source file into your document as well:

<script type="text/javascript" src="codebase/diagram.js"></script>  
 
<link rel="stylesheet" href="codebase/diagram.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">

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

Configuration properties

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

  • 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;
  • 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 cell in pixels, 10 by default;
  • lineGap - (number) defines the spacing between shapes and the connector line, 10 by default.

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 Flow-Chart

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