Loading and Storing Data

You can populate Diagram and Org Chart with data in the following ways:

Preparing Data to Load

dhtmlxDiagram allows loading data in the JSON format. Here are examples of suitable data sets:

  • for an organizational chart:
var simple_dataset = [
    { "id": "1", "text": "Chairman & CEO" },
    { "id": "2", "text": "Manager", "parent": "1" },
    { "id": "3", "text": "Technical Director", "parent": "1" },
    { "id": "2.1", "text": "Marketer", "parent": "2" },
    { "id": "3.1", "text": "Team Lead ", "parent": "3" }
];

Check the format details in the related article.

  • for a diagram:
var data = [
    // shapes    
    { "id": "1", "x": 100, "y": 40,  "text": "Start", "type": "start", "height": 50 },
    { "id": "2", "x": 100, "y": 170, "text": "Operation 1", "type": "output" },
    { "id": "3", "x": 100, "y": 300, "text": "Operation 2", "type": "input" },
 
    // connectors
    { "from": "1", "to": "2" },
    { "from": "2", "to": "3" }
];

Check the format details in the related article.

External Data Loading

To load data from an external file, make use of the load method. It takes the URL of the file with data as a parameter:

// add {type: "org"} into the constructor as a 2nd parameter to init an org chart
var diagram = new dhx.Diagram("diagram_container");
diagram.data.load("../common/data.json");

The component will make an AJAX call and expect the remote URL to provide valid JSON data.

Data loading is asynchronous, so you need to wrap any after-loading code into a promise:

diagram.data.load("/some/data").then(function(){
   diagram.selection.add(123);
});

Related sample:  Org Chart Load Data

Loading from a Local Source

To load data from a local data source, use the parse method. As a parameter you need to pass an array of data objects:

// diagram data
var data = [
    // shapes
    { "id": "1", "x": 100, "y": 40, "text": "Start", "type": "start", "height": 50 },
    { "id": "2", "x": 100, "y": 170, "text": "Operation 1", "type": "output" },
    { "id": 3, "x": 100, "y": 300, "text": "Operation 2", "type": "input" },
    // more shape objects
 
    // connectors
    { "from": "1", "to": "2" },
    { "from": "2", "to": "3" },
    { "from": "3", "to": "4", "forwardArrow":"filled" },
    // more connector objects
];
 
var diagram = new dhx.Diagram("diagram_container");
diagram.data.parse(data);

Related sample:  Wide Flow-Chart

Saving and Restoring State

To save the current state of a diagram, use the serialize method. It converts the data of the diagram into an array of JSON objects. Each JSON object contains the configuration of a separate shape.

var state = diagram1.data.serialize();

Then you can parse the data stored in the saved state array to a different diagram. For example:

// creating a new diagram
// add {type: "org"} into the constructor as a 2nd parameter to init an org chart
var diagram2 = new dhx.Diagram(document.body);
// parsing the state of the diagram1 into diagram2
diagram2.data.parse(state);
Back to top