The ExOrgChart/JS component permits the totally automatic generation of organigrams. An organigram generally provides a clear picture of the hierarchical position of the various actors. The control shows a hierarchical display of nodes, each one having an HTML caption, pictures and icons aligned to any side of the node. Each node can have child-nodes, assistant-nodes or group-nodes. The ExOrgChart/JS is a HTML standalone-component, written in JavaScript, that uses no third-party libraries.

OrgChart
Zoom/Fit
Move
Keys
Images
Flow-Links
Filter
Shuffle
Properties
Events
Your browser does not support the HTML5 canvas tag.
Click a node to select it. Double-click the node to expand/collapse it. Click, drag and drop to scroll. CTRL + click to select one or more nodes. SHIFT + click, drag and drop select nodes from frame. Roll the mouse-wheel to vertical scroll, or SHIFT + roll the mouse-wheel to horizontal scroll.
Your browser does not support the HTML5 canvas tag.
Click wheel + drag or CTRL + Click wheel + drag magnifies a portion of the control. CTRL + roll wheel forward/toward. Double-Click wheel set zoom back to 100% or CTRL + Double-Click wheel fits the control.
Your browser does not support the HTML5 canvas tag.
Drag the node and drop to a new-parent. Drag the node over a sibling node for 1 second to change its position. Press ESC to cancel the operation.
Your browser does not support the HTML5 canvas tag.
Click a node and press Insert, A or G key to insert a new child, assistant or group node. Select multiple nodes (SHIFT or CTRL) and press Delete key to remove the selection.
Your browser does not support the HTML5 canvas tag.
Click, drag and drop to scroll. Click wheel + drag or CTRL + Click wheel + drag magnifies a portion of the control. CTRL + roll wheel forward/toward. Double-Click wheel set zoom back to 100% or CTRL + Double-Click wheel fits the control.
Your browser does not support the HTML5 canvas tag.
Double-click the control, change the filter-mask, and so only nodes that match the filter will be displayed. The filter-mask can include wild-characters such as *, #, ? or [a-z].
Your browser does not support the HTML5 canvas tag.
Move the mouse in-out of the control.
Your browser does not support the HTML5 canvas tag.
Click the ◂ (top-right arrow) to show the source-code. Click the ▴ (bottom-left arrow) to show the help. ✔ Check/uncheck options to include/exclude the property. Change the option's value according to the below description.
Your browser does not support the HTML5 canvas tag.
here goes the events
Click, drag, drop or roll the mouse-wheel to get for the control's events.