Organization Chart Demo

This demo shows how to create an interactive organization chart from JSON data.

The source data is easily converted to a yFiles graph using class TreeBuilder.

The visualization of the employee is defined by an svg-template which is interpreted by the node style using the Vue 2 framework.

The demo also shows how a FilteredGraphWrapper can be used to display a subgraph of the model graph.

Automatic Layout

The organization chart is arranged automatically with the TreeLayout and the CompactSubtreePlacer which determines the best arrangement strategy for each node in order to achieve a compact and clear layout.

Organization Chart View

Mouse Wheel

Changes the zoom level of the view.

Click on Employee

Selects the employee in the chart and shows the corresponding data in the properties view.

Properties View

Click on a superior, subordinate, or colleague link to select and zoom to the corresponding node in the organization chart.

Things to Try

• Click on the port in the bottom center of a node to hide and show the children. Hide children by clicking on . Show children by clicking on .
• Right-click on the node to open the context menu. For the selected node, you have the following options:
  • Hide parent: hides the parent of the currently selected employee.
  • Show parent: shows the parent of the currently selected employee.
  • Hide children: hides the children of the currently selected employee.
  • Show children: Shows the children of the currently selected employee.
  • Show all: show all employees
• In the toolbar, you can expand_all Show All nodes.
• Change the zoom level to switch between three different levels of detail for node visualization.

Developer Information

• To load your own data into the demo, replace the data in the ./model/orgchart-data.ts file. If your data is structured differently, change the buildGraph() function in the ./model/data-loading.ts file and/or the Employee type.
• To disable interactivity, remove the initializeInteractivity() call in ./input.ts.
• To use the collapsing feature in your own application, copy the ./CollapsibleTree.ts file and, for interactivity, the ./input.ts and ./ui/orgchart-context-menu.ts files.
• To use the search feature in your own application, copy the ./OrgChartGraphSearch.ts and ../utils/GraphSearch.ts files.