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
The visualization of the employee is defined by an svg-template which is interpreted by
the node style using the
The demo also shows how a FilteredGraphWrapper can be used to display a
subgraph of the model graph.
The organization chart is arranged automatically with the TreeLayout and
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
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 to hide and show the children, you can
hide children by clicking on
and you can
show children by clicking on
Right click on the node to see the context menu. For the selected
node you can:
- 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 Show All nodes by clicking on
To load your own data into the demo, replace the data in the
./model/orgchart-data.ts file. If your data is structured differently,
buildGraph() function in the
./model/data-loading.ts file and/or the
To disable interactivity, remove the
initializeInteractivity() call in
To use the collapsing feature in your own application, copy the
./CollapsibleTree.ts file and, for interactivity, the
To use the search feature in your own application, copy the