Organizational Chart

This is the N4V FOR WEBI Wiki page for the Organizational Chart widget.

Since Need4Viz 2025.2.10

Diagram showing graphically the relations of one official to another, or others, of a company

• Dimension 1 : ID
• Dimension 2 : PID
• Dimension 3 : Name (name of the person. Displayed on the first line of the node/tooltip)
• Dimension 4 : [Optional] List of options to customize the node. Expected format is [option1_name:option1_value],[option2_name:option2_value],…,[optionN_name:optionN_value]
  • Options available are the following :
    • node-information : Text displayed in the tooltip of the node
    • node-title : Title of the person. Displayed on the second line of the node/tooltip
    • node-image : Icon/Photo displayed on the left part of the tile. Expected value is a full URL
    • node-color : Specific background color of the node. Expected value is a RGB hexa code (ex. : #E077FF)
    • node-layout : If 'hanging' is set, node's children will hang below their parent. It is recommanded to set 'hanging' on all the nodes of a same line. For a classic display, set 'normal' as value.
    • node-column : Column index of where to place the node (top of the column index is 0). Note that this option is counter intuitive in vertical organizational chart where “columns” are horizontal.
    • node-offset : Horizontal (for vertical layout) or vertical (for horizontal layout) offset to move the node. The value can be expressed in pixels (eg. [node-offset: -150]) or as a percentage via a string (eg. [node-offset: '-50%']).
    • node-name : Name of the person, overload the Dimension 3 value.
    • label-color : Specific color of the node label. Expected value is a RGB hexa code (ex. : #E077FF)

• Display the information in a tooltip when you move the mouse over the nodes.
• Hover a node to highlight the parent and children nodes.
• Click on a node to collapse the node or expand the children

You can find instructions for accessing settings for Need4viz graphics: Format Custom Element.

For the Organizational chart, the available parameters are:

Global

• Palette and Style
  • General : You can use the palette tool to define the colors used to build the graph.

Extended parameters

• Global → See the user guide for the “Global” section here

• Menu → See the user guide for the “Menu” section here

• Options
  • Chart Layout : Define here an horizontal or vertical chart. Set the size of the levels (set a height in pixels for vertical layout or a width for a horizontal layout), this setting will expand the chart and add scrollbars if needed. The size of the nodes (width for vertical layout, height for horizontal layout) can also be fixed, this setting will expand the chart and add scrollbars if needed. You can also disable the collapse/expand node.
  • Node colors : This setting allows you to define the global behavior of nodes colors. This setting can be overloaded for a specific node with the node-color option (Dimension 4).
  • Node labels : This setting allows you to set the label options in the nodes. The label color can be overloaded for a specific node with the label-color option (Dimension 4).
  • Borders : Define here the border of the nodes (color and thickness).
  • Links : This setting allows you to set layout of the links (color and thickness).

• Selection → See the user guide for the “Selection” section here

• Controls → See the user guide for the “Selection” section here

Export SharePoint → See the user guide for the “Export SharePoint” section here

Export HTML → See the user guide for the “Export HTML” section here

Export FTP → See the user guide for the “Export FTP” section here