This example shows how the Dojo Diagram component can be used to display organization charts.
The following features of the Dojo Diagram component are shown in this example:
- Data Store Loading:
The organization data is described in a JSON data file read through a Dojo FileReadStore.
The same data store is shown in a standard Dojo Tree on the left.
- Node Template:
The Dojo Diagram component renders the nodes using a JSON template that defines the graphic contents of the nodes.
- Data Binding:
The node template contains data bindings that allow to easily get attributes from the data store item
and render them graphically in the node.
- Tree Layout:
A graph layout algorithm (here a tree layout) is performed automatically on the diagram once the data is loaded.
- Zoom and Pan:
The zoom level of the diagram can be changed using the buttons and spinner, or using the mouse wheel with the ctrl key down (shift key on Chrome or Safari).
The diagram can be scrolled using the scrollbars, or by grabbing the diagram background with the mouse with the shift key down.