Skip to main content

parse()

Description​

Loads data from a local data source into a diagram and processes them

Usage​

parse(
    data: object[] | { data: object[]; links: object[] } | string,
    driver?: object | string
): void;

Parameters​

  • data: object[] | { data: object[]; links: object[] } | string - (required) the data to load. You can load data in any supported data format. The data structure depends on the diagram mode:
    • for the default, org chart and mindmap Diagram modes it is set as an array that contains a set of data objects
    data: object[]; // an array of all shapes and connections
    • for the PERT Diagram mode it is an object with:
      • the data array (for shapes: "task", "milestone", "project")
      • the links array (for connections between shapes)
    {
        data: object[]; // an array of shapes (tasks, milestones, projects)
        links: object[] // an array of connections between the shapes
    };
  • driver - (optional) DataDriver or type of data ("json", "csv", "xml"), "json" by default

Example​

  • for the org chart mode of diagram:
const data = [
    {
        id: "1",
        text: "Chairman & CEO",
        title: "Henry Bennett",
        img: "../common/img/avatar-1.png"
    },
    {
        id: "2",
        text: "Manager",
        title: "Mildred Kim",
        img: "../common/img/avatar-2.png"
    },
    {
        id: "3",
        text: "Technical Director",
        title: "Jerry Wagner",
        img: "../common/img/avatar-3.png"
    },
    { id: "1-2", from: "1", to: "2", type: "line" },
    { id: "1-3", from: "1", to: "3", type: "line" }
];

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

diagram.data.parse(data);
  • for the PERT mode of diagram:
const dataset = {
    data: [
        { id: "1", text: "Project #1", type: "project", parent: null },
        { id: "1.1", text: "Task #1", parent: "1", type: "task", start_date: new Date(2026, 0, 1), duration: 10 },
        { id: "1.2", text: "Task #2", parent: "1", type: "task", start_date: new Date(2026, 0, 1), duration: 10 },
        { id: "2.1", text: "Task #3", parent: null, type: "task", start_date: new Date(2026, 0, 1), duration: 10 },
        { id: "2.2", text: "Task #4", parent: null, type: "task", start_date: new Date(2026, 0, 1), duration: 10 },
    ],
    links: [
        { id: "line-1", source: "1.1", target: "1.2" },
        { id: "line-2", source: "1.2", target: "2.1" },
        { id: "line-3", source: "2.1", target: "2.2" },
    ]
};

const diagram = new dhx.Diagram("diagram_container", {
    type: "pert"
});

diagram.data.parse(dataset);

Related articles: Loading and storing data

Related samples: