orgBuilder is a jQuery plugin for creating interactive orgcharts. jQuery UI is leveraged for various interface elements. Creating the default orgchart is as simple as the following code where "elem" is the selector for the element(s) which will contain the chart:

$( elem ).orgBuilder();

This default configuration produces a static orgchart with the leaf nodes stacked vertically and tooltips enabled. These options, as well as drag and drop behavior, can be overidden by passing their preferred values as an argument to the plugin initialization call as follows:

$( elem ).orgBuilder( { stackLayout:false, tooltips:false, draggable:true } );

After initialization, the 'addOption' method may be used to add new elements to the node option menu . The last argument for this method is a function to call when the option is clicked in the menu. Use any of the pre-defined methods to manipulate the orgchart or pass in your own functions. The possibilities abound.

$( elem ).orgBuilder( { stackLayout:false, tooltips:false, draggable:true } );

Supports all major browsers. See the various demos for more.

Before orgBuilder can be initialized, the HTML for the orgchart must exist within the container element. Every '.node' div is paired with an '.offspring' div, both of which are wrapped in a '.family' div. The node's children (also wrapped in '.family' divs) are appended to the node's companion '.offspring' div. Examine the graphic below and the source code of the demos to get an understanding of the structure required.

If your org data changes frequently over time you may choose to use a function to generate the HTML at runtime. See the 'Generating orgchart HTML' demo for an example of converting JavaScript data (in the form of arrays) into the HTML required for the orgchart. This example is suited to org data stored as columns in a table. Your ideal method of data conversion may vary depending on your source data.

Once the HTML is present, the nodes in the orgchart are arranged through a combination of CSS rules and the nested structure of the HTML elements. The 'float:left' property applied to all family divs achieves the basic form of an orgchart. Stacking of leaf nodes is achieved by removing this float property from the leaf node '.family' divs. The node connectors are appended to each node and positioned relatively by the 'connectNodes' method.

The plugin will also bind tooltip and drag/drop behaviors to all nodes depending on the option arguments used in the initialization function. The additional options found on the 'Options' tab can be used to adjust node size and the amount of nodes to show unminimized on page load. *Terminology note: Throughout the documentation and code, nodes that are collapsed into little circles will be referred to as 'minimized'. Nodes that are enlarged to show their content will be referred to as 'expanded'. Nodes that are in their default state (neither minimized nor expanded) will be referred to as 'unminimized'.

After init, the 'addOption' method can be used to assign functions to 'buttons' that will be added to the 'node option menu'. Each call to this method will create a new 'button' in the menu and bind a click event to it which invokes the function you have assigned. Simply assign an anonymous function to a variable and pass that as the second argument for the method. The function can use any of the pre-built methods for node traversal and manipulation or be entirely your own creation. Reference the node clicked to open the option menu by using the global variable 'nodeClicked'. The method calling syntax detailed on the 'Methods' tab is in place to allow for multiple instances of orgBuilder on a page: $( container ).orgBuilder( methodname, args );

Other Requirements:
   1) jQuery
   2) jQuery UI

Options are set on init like below:

$(elem).orgBuilder({
  stackLayout: false,
  draggable: true,
  tooltips: false
});

Where "elem" is the selector for the element(s) in which you wish to initialize the chart.

stackLayout: Vertically stacks any group of sibling nodes which have no child nodes collectively.
    Possible Values: true/false
    Default: true

draggable: Specifies whether nodes will be draggable and by extension droppable.
    Possible Values: true/false
    Default: true

tooltips: Attaches tooltips to the nodes. Helpful if names are too long to fit inside the area of the node.
    Possible Values: true/false
    Default: true

showMinimized: Displays minimized nodes as small dots or hides altogether.
    Possible Values: true/false
    Default: true

minAfterLevel: Minimizes all nodes after specified level/tier in orgchart on init.
    Possible Values: Positive whole numbers
    Default: 55

nodeWidth: Width in pixels of nodes that are "unminimized."
    Possible Values: Positive whole numbers
    Default: 94

nodeHeight: Height in pixels of nodes that are "unminimized."
    Possible Values: Positive whole numbers
    Default: 55

expandWidth: Width in pixels of nodes that are "expanded."
    Possible Values: Positive whole numbers
    Default: 300

expandHeight: Height in pixels of nodes that are "expanded."
    Possible Values: Positive whole numbers
    Default: 175

Methods can be called after init like below:

$(elem).orgBuilder( 'methodName', params );

Where "elem" is the jQuery selector for the element(s) in which the chart was initialized, methodName is one of the methods listed below, and params are any relevant parameters for the method.

bindDrag: Attaches jQuery UI draggable behavior to node(s).
    Parameters:
       1.) jQuery selector for node(s) to make draggable.

$(elem).orgBuilder( 'bindDrag', $( '.myNodes' ) );

bindDrop: Attaches jQuery UI droppable behavior to node(s).
    Parameters:
       1.) jQuery selector for node(s) to make droppable.

$(elem).orgBuilder( 'bindDrag', $( '.myNodes' ) );

bindClick: Attaches menu show/hide behavior to node(s).
    Parameters:
       1.) jQuery selector for node(s) to attach click event.

$(elem).orgBuilder( 'bindClick', $( '.myNodes' ) );

bindHover: Attaches hovering behavior for tooltips to node(s).
    Parameters:
       1.) jQuery selector for node(s) to attach hover event.

$(elem).orgBuilder( 'bindHover', $( '.myNodes' ) );

createNode: Creates a new node as a child of the specified parent.
    Parameters:
       1.) jQuery selector for node that will be parent to newly-created node.
       2.) Name for new node will be assigned as the name attribute and displayed as text within the node.

$(elem).orgBuilder( 'createNode', $( '#parentNode' ), 'My New Node' );

renameNode: Assigns supplied string as name attribute and display text of node.
    Parameters:
       1.) jQuery selector for node to rename.
       2.) New name will be assigned as the name attribute and displayed as text within the node.

$(elem).orgBuilder( 'renameNode', $( '#myNode' ), 'My New Name' );

deleteNode: Removes node(s) from org structure.
    Parameters:
       1.) jQuery selector for node(s) to remove.

$(elem).orgBuilder( 'deleteNode', $( '#myNode' ) );

addOption: Creates new option within node context menu and assign function to execute on click.
    Parameters:
       1.) Display text of the option within the context menu.
       2.) Function to execute when the added option is clicked.

$(elem).orgBuilder( 'addOption', $( '.myNodes' ), functionReference );

collectStack: Finds leaf nodes to be stacked vertically and assigns class of 'stacked'. The stacking of the layout is achieved through the CSS rules of this class.
    Parameters:
       none

$(elem).orgBuilder( 'collectStack' );

collectLeaves: Assigns "leaf" class to all leaf nodes. Used by connectNodes method and also to give leaf nodes a distinct background color.
    Parameters:
       none

$(elem).orgBuilder( 'collectLeaves' );

connectNodes: Appends connectors to all nodes.
    Parameters:
       none

$(elem).orgBuilder( 'connectNodes' );

initTooltip: Appends tooltip to container and attaches positioning behavior.
    Parameters:
       none

$(elem).orgBuilder( 'initTooltip' );

initDialog: Creates jQuery UI Dialog for later use. One dialog per page.
    Parameters:
       none

$(elem).orgBuilder( 'initDialog' );

openDialog: Opens dialog with the specified configuration.
    Parameters:
       1.) Object literal containing properties to configure dialog. Properties and possible values:

• title : 'String'
• bodyText : 'String'
• input : true/false
• inputValue : 'String'
• button : true/false
• buttonText : 'String'
• buttonAction : function(){ }

$(elem).orgBuilder( 'openDialog', {
  title : 'Dialog Title',
  bodyText : 'This text appears in dialog body above input',
  input : true,	// show input field
  inputValue : 'Default input value',
  button : true, // show button
  buttonText : 'Go!!!',
  buttonAction : function(){ 	// executes on button click
    var node = nodeClicked, userInput = $( '.field' ).val();
    // Do something interesting with node or userInput here
  }
});

closeDialog: Closes jQuery UI dialog.
    Parameters:
       none

$(elem).orgBuilder( 'closeDialog' );

destroy: Remove all orgBuilder events and connectors, leaving the elements in place.
    Parameters:
       none

$(elem).orgBuilder( 'destroy' );

findParentNode: Returns a jQuery object containing the immediate parent node of the given node.
    Parameters:
       1.) jQuery selector for node.

$(elem).orgBuilder( 'findParentNode', $( '#myNode' ) );

findChildNodes: Returns a jQuery object containing the immediate child node(s) of the given node.
    Parameters:
       1.) jQuery selector for node.

$(elem).orgBuilder( 'findChildNodes', $( '#myNode' ) );

findDescendentNodes: Returns a jQuery object containing all descendent nodes of the given node.
    Parameters:
       1.) jQuery selector for node.

$(elem).orgBuilder( 'findDescendentNodes', $( '#myNode' ) );

findSiblingNodes: Returns a jQuery object containing all sibling nodes of the given node.
    Parameters:
       1.) jQuery selector for node.

$(elem).orgBuilder( 'findSiblingNodes', $( '#myNode' ) );

findLeafNodes: Returns an array of jQuery objects representing all visible leaf nodes beneath the given node.
    Parameters:
       1.) jQuery selector for node.

$(elem).orgBuilder( 'findLeafNodes', $( '#myNode' ) );

findNodeGeneration: Returns an integer representing the given node's level in the hierarchy, starting with 1 for the root node and increasing by one per 'generation'.
    Parameters:
       1.) jQuery selector for node.

$(elem).orgBuilder( 'findNodeGeneration', $( '#myNode' ) );

ishiddenNode: Returns boolean whether given node is hidden. leaf nodes are considered always expanded.
    Parameters:
       1.) jQuery selector for node.

$(elem).orgBuilder( 'ishiddenNode', $( '#myNode' ) );

isLeafNode: Returns boolean whether given node is a leaf.
    Parameters:
       1.) jQuery selector for node.

$(elem).orgBuilder( 'findNodeGeneration', $( '#myNode' ) );

isLeafGeneration: Returns boolean whether given node's siblings are all leaves.
    Parameters:
       1.) jQuery selector for node.

$(elem).orgBuilder( 'isLeafGeneration', $( '#myNode' ) );