Interactive Organizational Chart Diagram Editor

Theme:

Edit details:

This editable organizational chart sample color-codes the Nodes according to the tree level in the hierarchy.

Select a node to edit its data values. This sample uses the Data Inspector extension to display and modify Part data. Because this simple app is part of a static web site, there is no way to upload a photograph for a person.

Double click in the diagram background to add a new boss. That uses the ClickCreatingTool with a custom ClickCreatingTool.insertPart to scroll to the new node and start editing the TextBlock for its name .

Drag a node onto another in order to change relationships, if permitted. Right-click or tap-hold a Node to bring up a context menu that allows you to:

Add Employee - add a new person as a direct report to this person
Vacate Position - remove the information specific to the current person in that role
Remove Role - removes the person entirely and changes the direct reports to report to the (former) boss
Remove Department - removes the person and whole subtree

To learn how to build an org chart from scratch with GoJS, see the Getting Started tutorial.

This sample is set to the dark theme by default.

If you want to have some "assistant" nodes on the side, above the regular reports, see the Org Chart Assistants sample, which is a more simply styled version of this sample that uses a custom TreeLayout to position "assistants" that way.

Diagram Model saved in JSON format:

{ "class": "go.TreeModel",
  "nodeDataArray": [
{"key":1, "name":"Stella Payne Diaz", "title":"CEO", "dept": "Management", "pic":"1.jpg", "email": "sdiaz@example.com", "phone": "(234) 555-6789" },
{"key":2, "name":"Luke Warm", "title":"VP Marketing/Sales", "dept": "Management", "pic":"2.jpg", "email": "lwarm@example.com", "phone": "(234) 555-6789", "parent":1},
{"key":3, "name":"Meg Meehan Hoffa", "title":"Sales", "dept": "Sales", "pic":"3.jpg", "email": "mhoffa@example.com", "phone": "(234) 555-6789", "parent":2},
{"key":4, "name":"Peggy Flaming", "title":"VP Engineering", "dept": "Management", "pic":"4.jpg", "email": "pflaming@example.com", "phone": "(234) 555-6789", "parent":1},
{"key":5, "name":"Saul Wellingood", "title":"Manufacturing", "dept": "Production", "pic":"5.jpg", "email": "swellingood@example.com", "phone": "(234) 555-6789", "parent":4},
{"key":6, "name":"Al Ligori", "title":"Marketing", "dept": "Marketing", "pic":"6.jpg", "email": "aligori@example.com", "phone": "(234) 555-6789", "parent":2},
{"key":7, "name":"Dot Stubadd", "title":"Sales Rep", "dept": "Sales", "pic":"7.jpg", "email": "dstubadd@example.com", "phone": "(234) 555-6789", "parent":3},
{"key":8, "name":"Les Ismore", "title":"Project Mgr", "dept": "Production", "pic":"8.jpg", "email": "lismore@example.com", "phone": "(234) 555-6789", "parent":5},
{"key":9, "name":"April Lynn Parris", "title":"Events Mgr", "dept": "Marketing", "pic":"9.jpg", "email": "aparris@example.com", "phone": "(234) 555-6789", "parent":6},
{"key":10, "name":"Xavier Breath", "title":"Engineering", "dept": "Engineering", "pic":"10.jpg", "email": "xbreath@example.com", "phone": "(234) 555-6789", "parent":4},
{"key":11, "name":"Anita Hammer", "title":"Process", "dept": "Production", "pic":"11.jpg", "email": "ahammer@example.com", "phone": "(234) 555-6789", "parent":5},
{"key":12, "name":"Billy Aiken", "title":"Software", "dept": "Engineering", "pic":"12.jpg", "email": "baiken@example.com", "phone": "(234) 555-6789", "parent":10},
{"key":13, "name":"Stan Wellback", "title":"Testing", "dept": "Engineering", "pic":"13.jpg", "email": "swellback@example.com", "phone": "(234) 555-6789", "parent":10},
{"key":14, "name":"Marge Innovera", "title":"Hardware", "dept": "Engineering", "pic":"14.jpg", "email": "minnovera@example.com", "phone": "(234) 555-6789", "parent":10},
{"key":15, "name":"Evan Elpus", "title":"Quality", "dept": "Production", "pic":"15.jpg", "email": "eelpus@example.com", "phone": "(234) 555-6789", "parent":5},
{"key":16, "name":"Lotta B. Essen", "title":"Sales Rep", "dept": "Sales", "pic":"16.jpg", "email": "lessen@example.com", "phone": "(234) 555-6789", "parent":3}
 ]
}

this forces the font to load in Chromium browsers

GoJS Features in this sample

Table Panels

The "Table" Panel, Panel.Table, arranges objects in rows and columns. Each object in a Table Panel is put into the cell indexed by the value of GraphObject.row and GraphObject.column. The panel will look at the rows and columns for all of the objects in the panel to determine how many rows and columns the table should have. More information can be found in the GoJS Intro.

Related samples

Tree Layout

This predefined layout is used for placing Nodes of a tree-structured graph in layers (rows or columns). For discussion and examples of the most commonly used properties of the TreeLayout, see the Trees page in the Introduction. More information can be found in the GoJS Intro.

Related samples

Context Menus

A GoJS context menu is an Adornment that is shown when the user context-clicks (right mouse click or long touch hold) an object that has its GraphObject.contextMenu set. The context menu is bound to the same data as the part itself.

It is typical to implement a context menu as a "ContextMenu" Panel containing "ContextMenuButton"s, as you can see in the code below in the assignment of the Node's GraphObject.contextMenu and Diagram.contextMenu properties. Each "ContextMenu" is just a "Vertical" Panel Adornment that is shadowed. Each "ContextMenuButton" is a Panel on which you can set the GraphObject.click event handler. In the event handler obj.part will be the whole context menu Adornment. obj.part.adornedPart will be the adorned Node or Link. The bound data is obj.part.data, which will be the same as obj.part.adornedPart.data.

More information can be found in the GoJS Intro.

Related samples

Buttons

GoJS defines several Panels for common uses. These include "Button", "TreeExpanderButton", "SubGraphExpanderButton", "PanelExpanderButton", "ContextMenuButton", and "CheckBoxButton". "ContextMenuButton"s are typically used inside of "ContextMenu" Panels; "CheckBoxButton"s are used in the implementation of "CheckBox" Panels.

These predefined panels can be used as if they were Panel-derived classes in calls to GraphObject.make. They are implemented as simple visual trees of GraphObjects in Panels, with pre-set properties and event handlers.

More information can be found in the GoJS Intro.

Related samples

Data Inspector

Using a premade GoJS extension, you can create an HTML-based inspector that displays and allows editing of data for the selected Part (if any), or for a particular JavaScript object, or for the shared Model.modelData object, which exists even if there are no nodes or links.

The inspector code lies in DataInspector.js and DataInspector.css. This code is meant to be a starting point for making your own model data inspector.

A generic demonstration of this extension can be found in the GoJS Intro.

Related samples

Theming

GoJS allows diagrams to be themed. This is commonly used to provide a light and dark mode for diagrams.

The Diagram.themeManager handles themes within a Diagram. The ThemeManager can by shared by multiple diagrams, and is responsible to managing the current theme and default theme, along with any theme updates. More information can be found in the GoJS Intro.

Related samples