How to Create Organizational Chart by JSON Data in JavaScript Diagram?

This article explains how to create an organizational chart using JSON data. In Syncfusion® JavaScript Diagram, built-in support is provided for auto-arranging nodes into various layout types. One of the most commonly used layouts is the Organizational Chart, which visually represents the structure of an organization, highlighting relationships between different entities.

Steps to Create an Organizational Chart from JSON Data

1. Import JSON Data:

To begin, import the JSON file that contains the data for your organizational chart.

// Import the JSON data
import * as data from './datasource.json';

2. Configure the Diagram Component

After importing the JSON data, the next step is to configure the diagram component. You need to bind the data to the diagram using the dataSourceSettings property. The id and parentId fields define the hierarchical relationship between the nodes, and the dataSource binds the actual data. Additionally, the layout property is used to set the layout type for the diagram.

// Initializes the diagram component
var diagram = new ej.diagrams.Diagram({
    width: '100%', height: '800px',

    // Configures data source settings
    dataSourceSettings: {
        id: 'Id', parentId: 'Team',
        dataSource: new ej.data.DataManager(data.OrgChartData) //JSON data
    },

    // Configure the layout type
    layout: {
        type: 'OrganizationalChart',
    }
});
diagram.appendTo('#diagram');

Refer to the working sample for additional details and implementation: Click here for sample

Conclusion

We hope you enjoyed learning how to create an organizational chart using JSON data in JavaScript diagram.

You can refer to our JavaScript Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!