API Reference

jOrgChart has a simple API centered around a single jQuery plugin method for initialization.

Primary Method: .jOrgChart(options)

This is the core method used to create and render the organization chart.

jQuery(selector).jOrgChart(options);

Parameters

  • selector

    • Type: jQuery Selector
    • Description: A selector that targets the root <ul> or <li> element containing the hierarchical data for the chart. The plugin will recursively parse the children of this element to build the tree.

  • options

    • Type: Object
    • Description: An optional JavaScript object containing key-value pairs to configure the chart's behavior. For a full list of available options, please see the Configuration Guide.

Return Value

The method returns the original jQuery object to allow for chaining.

Behavior

When called, the method performs the following actions: 1. Reads the configuration options, merging them with the defaults. 2. Recursively traverses the DOM structure of the selected list element. 3. Generates a new HTML structure using <table> elements to visually represent the tree. 4. Appends the generated chart to the element specified by the chartElement option (or <body> by default). 5. If dragAndDrop is enabled, it initializes the necessary jQuery UI draggable and droppable handlers on the chart nodes.

If the method is called multiple times on the same element, it will redraw the chart. This is used internally after a drag-and-drop operation to reflect the updated structure.

Events

jOrgChart does not emit its own custom events. However, when dragAndDrop is enabled, it leverages standard jQuery UI events. You can bind to these events on the .node elements for advanced customization.

  • dragstart: Fired when the user starts dragging a node.
  • dragstop: Fired when the user stops dragging a node.
  • drop: Fired on a target node when a dragged node is dropped on it.

Example of hooking into a drag event:

// Initialize the chart first
$("#org").jOrgChart({
  chartElement: '#chart-container',
  dragAndDrop: true
});

// Then, bind to events on the generated nodes
$('#chart-container').on('dragstop', '.node', function(event, ui) {
  console.log('A node was just moved!');
});