Google Org Chart

Deskripsi

This plugin simplifies the generation of a Google org chart through the use of two shortcakes.

The shortcodes are [org_chart] and [org_chart_item].

The [org_chart_item] tag is used for the generation of each node in the chart and all [org_chart_item] tags should be enclosed between the opening [org_chart] and closing [/org_chart] tags.

[org_chart] has three attributes:

• width – set the width of the org chart drawing space (in pixels)
• height – set the height of the org chart drawing space (in pixels)
• collapsible – simply adding this word in the tag enables all parent nodes in the chart to be collapsible upon double-click

[org_chart_item] has four attributes:

• title – if the content attribute is not set, the title acts as a node ID and the node’s content
• content – if the content attribute is set, it will be placed as the node’s content while the title will simply act as the node ID
• parent – the ID of the parent node (if any); this is the parent node’s title, not the content
• hover – what should be displayed when someone hovers over the node

Example org chart (result is shown in the screenshots):

[org_chart width='400' height='300' collapsible]
[org_chart_item title='Testing']
[org_chart_item title='TFCN' content='The First Child Node' parent='Testing']
[org_chart_item title='TSCN' content='The Second Child Node' parent='Testing']
[org_chart_item title='Link' content='<a href="http://www.zelda.com/gba/link_light_legend.html">A Link to the Past</a>' parent='TFCN' hover='Zelda']
[org_chart_item title='Grandchild' parent='TFCN']
[org_chart_item title='Black Sheep' parent='TSCN']
[org_chart_item title='SDE' content='XXXXXXX' parent='TSCN' hover='Seven Deadly Exes']
[/org_chart]

PLEASE NOTE: The Google org chart API generates the org chart through tables. Depending on the theme you are using you may experience some stylistic issue which can be fixed with some custom CSS. There are currently no plans to include any additional styling in the plugin out of the box.