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
can be used to display a subgraph of the model graph.
The organization chart is arranged automatically with the
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
by clicking on
and you can
by clicking on
Right click on the node to see the
. 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
nodes by clicking on
To load your own data into the demo, replace the data in the
file. If your data is structured differently, change the
function in the
file and/or the
To disable interactivity, remove the
To use the collapsing feature in your own application, copy the
file and, for interactivity, the
To use the search feature in your own application, copy the