Diagram for Angular, React, and jQuery:
Creating OrgCharts Using our JavaScript Widget

Step 1: Add an OrgChart to your webpage with the DevExpress Diagram widget.

To get started, you'll need to add the DevExpress Diagram widget JavaScript and CSS files to a page (see Getting started with DevExpress Diagram). Next, add the OrgChart HTML container:

  • html
                    <div id="orgstruct"></div>

Once added, you'll need to initialize the widget:

  • js
                    $("#orgstruct").dxDiagram();

JavaScript Diagram Widget | DevExpress

Step 2: Bind the OrgChart to a data source

To load an organization's chart data to the Diagram widget, assign your data source to the nodes.dataSource option. For a hierarchical data source, set the nodes.itemsExpr to the name of the field that contains nested items.

  • js
                    $("#orgstruct").dxDiagram({
                        nodes: {
                            dataSource: orgItems,
                            keyExpr: "id",
                            textExpr: "title",
                            itemsExpr: "items",
                            imageUrlExpr: "picture",
                            typeExpr: "type",
                            autoLayout: {
                                orientation: "horizontal"
                            }
                        },
                    });

OrgChart Data Binding | DevExpress

If your org chart data is stored in a linear array, set the nodes.keyExpr and nodes.parentKeyExpr options. To learn more, please review our Node List: Linear Array demo.

Refer to our Data Layer help topic to create two-way binding for diagram items.

Your jQuery OrgChart is now ready for use.

The following sections describe to you can customize the jQuery Diagram further and introduce custom jQuery OrgChart behaviors to your web application.

Load OrgChart "entities" to a toolbox panel

This feature allows you to add entities to your diagram directly from the toolbox (just like regular shapes). Populate the customShapes option with data from the employee data source.

The toolbox.groups option lists shape groups that are visible in the toolbox.

  • js
                    $("#orgstruct").dxDiagram({
                        nodes: {...},
                        customShapes: employees.map(
                            function(emp) {
                                return {
                                    category: "employees",
                                    type: "employee" + emp.ID,
                                    baseType: "cardWithImageOnRight",
                                    defaultImageUrl: emp.Picture,
                                    defaultText: emp.Full_Name,
                                    allowEditText: false,
                                    textWidth: 0.7,
                                }
                            }
                        ),
                        toolbox: {
                            groups: ["general", "orgChart", { category: "employees", title: "Employees", displayMode: "texts" }]
                        }
                    });

OrgChart Toolbox Panel | DevExpress

Add custom shapes to an OrgChart

Use the customShapes option to create custom shapes. Note that shape images must be supplied as SVG files.

  • js
                    $("#orgstruct").dxDiagram({
                        nodes: {...},
                        customShapes: employees.map(...).concat([
                        {
                            category: "teams",
                            type: "development",
                            title: "Development Team",
                            backgroundImageUrl: "images/shapes/dev.svg",
                            defaultWidth: 0.75,
                            defaultHeight: 0.75,
                        },
                        {
                            category: "teams",
                            type: "documetation",
                            title: " Documentation Team ",
                            backgroundImageUrl: "images/shapes/doc.svg",
                            defaultWidth: 0.75,
                            defaultHeight: 0.75,
                        },
                        {
                            category: "teams",
                            type: "marketing",
                            title: "Marketing Team",
                            backgroundImageUrl: "images/shapes/mark.svg",
                            defaultWidth: 0.75,
                            defaultHeight: 0.75,
                        }]),
                        toolbox: {
                            groups: ["general", "orgChart", { category: "teams", title: "Teams" }, { category: "employees", title: "Employees", displayMode: "texts" }]
                        }
                    });

As you can see in the image below, custom shapes will be displayed within the toolbox panel's Teams tab.

OrgChart Custom Shapes | DevExpress

Place Shapes into Containers

The Diagram widget allows you to wrap shapes into containers. Containers and content can be manipulated as needed.

Place Shapes into Containers - Web Diagram | DevExpress

Save and Load an OrgCharts's Layout

You can save diagram layouts, appearance options, and shape position data and load it on demand.

  • js
                    $("#orgstruct").dxDiagram({
                        onDataChanged: function(e) {
                            if(e.component.isReady()) {
                                var data = e.component.export();
                                window.localStorage.setItem("foo", data); // store layout data in storage
                            }
                        },
                        // ...
                        onContentReady: function(e) {
                            var foo = window.localStorage.getItem("foo"); // load layout data and apply it to the generated shapes
                                if(foo)
                                    e.component.import(foo, true);
                        }
                    });

Configure Page Settings

To specify page and grid settings, click the Properties button to invoke the widget's Page Properties dialog.

OrgChart - Configure Page Settings | DevExpress

Export an OrgChart

You can export your OrgChart to the following file formats:

  • SVG
  • PNG
  • JPEG

To begin your export, click the Export button and select the appropriate file format.

OrgChart Export | DevExpress

Read Only OrgChart

You can hide UI elements with the following options:

  • js
                    $("#orgstruct").dxDiagram({
                        nodes: {...},
                        readOnly: true,
                        toolbar: {
                            visible: false
                        },
                        toolbox: {
                            visible: false
                        },
                        propertiesPanel: {
                            enabled: false
                        },
                        contextMenu: {
                            enabled: false
                        },
                        showGrid: false,
                        simpleView: true,
                    });

Read Only OrgChart - DevExpress Web Diagram

Questions?

Should you have any questions about the DevExpress jQuery Diagram control or should you require implementation assistance, please submit a support ticket via the DevExpress Support Center. If you're new to DevExpress and want to evaluate our JavaScript controls, you can download a free 30-day trial below.

Get Started Today
Download Your Free
30-Day Trial
Purchase a License
Subscriptions start at
$999.99
Get Pre-Purchase Help
Call us at +1 (818) 844-3383
or email info@devexpress.com