Main features:
- Supports ability to use any HTML code for nodes content;
- Can be used to create family tree, organizational charts and etc.;
- Nodes can be expanded/collapsed;
- Styles can be changed via custom CSS rules;
- No flash. Pure javascript and CSS;
- Compatible with Joomla! 1.5 - 3.x.
Example
See below example of a military organizational chart:Installation
The extension uses standard Joomla! installation procedure. The tutorial on how to install Joomla! extensions can be found here. Open "Extensions → Plugin Manager" page, when installation is completed, and find "ARI Org Chart" plugin. Open plugin settings page, configure parameter, enable plugin and save plugin settings. That's all. The plugin is configured and enabled and you can go to "Usage" section.Usage
Place a plugin code into an article or other content to create an org chart with help "ARI Org Chart" plugin. {orggchart} plugin tag is used for the plugin. The following plugin code creates a military org chart:
{orggchart allowCollapse="1"}
{node}
General
{node}
Colonel 1
{/node}
{node}
Colonel 2
{node}
Captain 1
{node}
Sergeant 1
{/node}
{/node}
{node}
Captain 2
{node}
Sergeant 2
{node}
Private 1
{/node}
{node}
Private 2
{/node}
{node}
Private 3
{/node}
{/node}
{/node}
{/node}
{/node}
{/orggchart}
Use {node} tag inside {orggchart} or {node} to define a node of a chart.
Plugin settings
The following parameters can be defined on plugin settings page ("Extensions → Plugin Manager → ARI Org Chart" page on Joomla! backend):
- Allow collapse determines if double click will collapse a node.
- Allow HTML if set to 'Yes', names that includes HTML tags will be rendered as HTML.
- Size specify nodes size.
- Node CSS class is a class name to assign to node elements. Apply CSS to this class name to specify colors or styles for the chart elements.
- Selected node CSS class is a class name to assign to selected node elements. Apply CSS to this class name to specify colors or styles for selected chart elements.
Plugin code syntax
The following attributes can be used for {orggchart} tag:
- allowCollapse is used to override "Allow collapse" parameter from plugin settings. Possible values: 0 or 1.
- allowHtml is used to override "Allow HTML" parameter from plugin settings. Possible values: 0 or 1.
- nodeClass is used to override "Node CSS class" parameter from plugin settings.
- selectedNodeClass is used to override "Selected node CSS class" parameter from plugin settings.
- size is used to override "Size" parameter from plugin settings.Possible values: small, medium or large.
The following attributes can be used for {node} tag:
- title is a node content. Can be defined between {node} and {/node} tags.
- tooltip is a tooltip for the node which will be shown on mouse over.