This sample shows an organizational chart diagram and uses an in-laid GoJS Overview to aid the user in navigation. The diagram uses a TreeLayout featuring TreeStyle.LastParents to allow for different alignments on the last parents. The data was taken from the UN web site in August 2009.
A search box demonstrates one way of finding and highlighting nodes whose data includes particular strings. Note that one can see all of the highlighted nodes in the Overview.
To learn how to build an org chart from scratch with GoJS, see the Getting Started tutorial.
If you want to have some "assistant" nodes on the side, above the regular reports, see the Org Chart Assistants sample, which is a copy of this sample that uses a custom TreeLayout to position "assistants" that way.
Flag images are from OpenMoji – the open-source emoji and icon project. License: CC BY-SA 4.0.
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.
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.
An Overview is a subclass of Diagram that is used to display all of the Parts of another diagram and to show where that diagram's viewport is relative to all of those parts. The user can also scroll the overviewed diagram by clicking or dragging within the overview.
The initialization of an Overview is just a matter of setting Overview.observed to refer to the Diagram that you want it to show. So there needs to be a DIV for your main diagram, for which you create a Diagram in the normal manner, and a separate DIV for your overview, for which you create the Overview in a very simple manner.
More information can be found in the GoJS Intro.