Loading and storing data
You can populate DHTMLX Diagram with data in the following ways:
Preparing data to load
DHTMLX Diagram takes data in the JSON format. It is an array that contains a set of data objects. There are 5 types of objects:
- shape objects
const data = [
// configuring shapes
{ "id": "shape_1", "type": "start", "x": 200, y: 0, "text": "Start" },
{ "id": "shape_2", "type": "process", "x": 200, y: 120, "text": "Call Client and \n set-up Appointment" },
{ "id": "shape_3", "type": "decision", "x": 200, "y": 240, "text": "Decision" },
// configuring lines
{ "id": "line_1", "type": "line", "from": "shape_1", "to": "shape_2" },
{ "id": "line_2", "type": "dash", "from": "shape_2", "to": "shape_3" },
// configuring a line title
{ "id": "title_1", "type": "lineTitle", "parent": "line_1", "text": "Some text" }
];
The library provides you with various types of default shapes which have both common and specific options. Check the full list of available properties of a shape object in the API reference.
Besides, you may create your own type of shapes and add any custom properties to shape objects.
- line objects
const data = [
// configuring shapes
{ "id": "shape_1", "type": "start", "x": 200, y: 0, "text": "Start" },
{ "id": "shape_2", "type": "process", "x": 200, y: 120, "text": "Call Client and \n set-up Appointment" },
{ "id": "shape_3", "type": "decision", "x": 200, "y": 240, "text": "Decision" },
// configuring lines
{ "id": "line_1", "type": "line", "from": "shape_1", "to": "shape_2" },
{ "id": "line_2", "type": "dash", "from": "shape_2", "to": "shape_3" },
// configuring a line title
{ "id": "title_1", "type": "lineTitle", "parent": "line_1", "text": "Some text" }
];
The presence or absence of line objects in the data set depends on the chosen way of shapes connection. Check the full list of available properties of the line object in the API reference.
- line title objects
const data = [
// configuring shapes
{ "id": "shape_1", "type": "start", "x": 200, y: 0, "text": "Start" },
{ "id": "shape_2", "type": "process", "x": 200, y: 120, "text": "Call Client and \n set-up Appointment" },
{ "id": "shape_3", "type": "decision", "x": 200, "y": 240, "text": "Decision" },
// configuring lines
{ "id": "line_1", "type": "line", "from": "shape_1", "to": "shape_2" },
{ "id": "line_2", "type": "dash", "from": "shape_2", "to": "shape_3" },
// configuring a line title
{ "id": "title_1", "type": "lineTitle", "parent": "line_1", "text": "Some text" }
];
Check the full list of available properties of the line title object in the API reference.
- group objects
const data = [
{
"type": "$group",
"id": 1,
"width": 400,
"height": 200,
"x": 0,
"y": 0,
"header": {
"text": "Top and collapsed header with tеxt alignment",
"editable": true,
"closable": true,
"textAlign": "left", // "left", "center", "right"
"textVerticalAlign": "center", // "top", "center", "bottom"
},
// the child items of the group
"groupChildren": [1.1, 1.2],
"open": false,
},
// configuring shapes to put into the group
{ "type": "rectangle", "id": 1.1, "x": 50, "y": 75, "text": "Shape 1.1" },
{ "type": "rectangle", "id": 1.2, "x": 200, "y": 75, "text": "Shape 1.2" }
];
Check the full list of the available properties of a group object in the API reference.
- objects of a swimlane and its cell
const data = [
{
"id": "main",
"type": "$swimlane",
"height": 730,
"width": 1195,
"header": {
"closable": true,
"text": "Waterfall diagram template"
},
"layout": [
[1, 2, 3, 4]
],
"subHeaderCols": {
"headers": [
{
"text": "September",
"fill": "#f35c4f66"
},
{
"text": "October",
"fill": "#9b60f866"
},
{
"text": "November",
"fill": "#ffae1266"
},
{
"text": "December",
"fill": "#3cc97a66"
}
]
}
},
// configuring a cell of the swimlane
{
"id": 1,
"type": "$sgroup",
"groupChildren": ["s1"],
"style": {
"fill": "#D4DAE4"
},
"x": 0,
"y": 80
},
// configuring a shape to put into the cell
{
"id": "s1", "type": "end", "text": "Step 1", "x": 20, "y": 110
}
];
Check the full list of the available configuration properties of the objects of a swimlane and its cells in the API reference.
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:
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(() => {
diagram.selection.add("123");
});
Related sample: Diagram. Data. Data loading
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 predefined data objects:
diagram.data.parse(data);
Related sample: Diagram. Default mode. Wide flowchart
Loading data into the editor
To load a data set into the editor, use the parse() method of the editor.
editor.parse(data);
Related sample: Diagram editor. Default mode. Basic initialization
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.
const 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
const diagram2 = new dhx.Diagram("diagram_container");
// parsing the state of the diagram1 into diagram2
diagram2.data.parse(state);
Importing data into the editor
When you use a diagram together with an editor, you can import data from the diagram into the editor via the import() method of the editor object:
function runEditor() {
expand();
editor.import(diagram);
}
Related sample: Diagram. Default mode. Wide flowchart
The diagram state will be imported into the editor on running the editor.