Press "Enter" to skip to content

Simple and Direct Organization Chart Plugin | OrgChart

OrgChart is a simple, flexible, and highly customizable organization chart plugin to present your organization’s structure, relationships, and relative ranks of its parts and locations/functions in an elegant way.

Features:

  • It supports both local data and remote data (JSON).
  • Smooth expand/collapse effects based on CSS3 transitions
  • Align the chart in 4 directions.
  • It allows the user to change the structure of the organizational chart by dragging/dropping the contract.
  • It allows users to dynamically edit the organization chart and save the final hierarchy as a JSON object.
  • Supports exporting chart as image or pdf document.
  • Supports panning and zooming.
  • It allows users to customize the internal architecture of each node.
  • Users can adopt multiple solutions to build a massive organization chart (refer to multi-layer or mixed planning sections).
  • A touchscreen plugin for mobile devices.

Easy Interface Javascript Chart Library Based on D3.js | billboard.js

How to make use of it:

Installation:

# NPM
$ npm install orgchart --save

# Bower
$ bower install orgchart --save

1. Load Font Awesome 4 and the jQuery OrgChart plugin’s model sheet within the head part of your doc.

<link rel="stylesheet" href="font-awesome.min.css">
<link rel="stylesheet" href="css/jquery.orgchart.css">

2. Create a container for your organization chart.

<div id="chart-container"></div>

3. Load jQuery library and different required assets on the finish of the doc so the web page masses quicker.

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/html2canvas.js"></script>
<script src="js/jquery.orgchart.js"></script>

4. Prepare your data following a structure like this.

var datascource = {
  'id': 'rootNode', // It's a optional property which will be used as id attribute of node
  // and data-parent attribute, which contains the id of the parent node
  'collapsed': true, // By default, the children nodes of current node is hidden.
  'className': 'top-level', // It's a optional property which will be used as className attribute of node.
  'nodeTitlePro': 'Lao Lao',
  'nodeContentPro': 'general manager',
  'relationship': relationshipValue, // Note: when you activate ondemand loading nodes feature,
  // you should use json datsource (local or remote) and set this property.
  // This property implies that whether this node has parent node, siblings nodes or children nodes.
  // relationshipValue is a string composed of three "0/1" identifier.
  // First character stands for wether current node has parent node;
  // Scond character stands for wether current node has siblings nodes;
  // Third character stands for wether current node has children node.
  'children': [ // The property stands for nested nodes.
    { 'nodeTitlePro': 'Bo Miao', 'nodeContentPro': 'department manager', 'relationship': '110' },
    { 'nodeTitlePro': 'Su Miao', 'nodeContentPro': 'department manager', 'relationship': '111',
      'children': [
        { 'nodeTitlePro': 'Tie Hua', 'nodeContentPro': 'senior engineer', 'relationship': '110' },
        { 'nodeTitlePro': 'Hei Hei', 'nodeContentPro': 'senior engineer', 'relationship': '110' }
      ]
    },
    { 'nodeTitlePro': 'Yu Jie', 'nodeContentPro': 'department manager', 'relationship': '110' }
  ],
  'otherPro': anyValue
};

5. The JavaScript to render a primary group chart inside the container you simply created.

$('#chart-container').orgchart({
  'data' : datascource,
  'depth': 2,
  'nodeTitle': 'name',
  'nodeContent': 'title'
});

6. Load information from a distant JSON file by way of an AJAX request.

$('#chart-container').orgchart({
  'data' : '/path/to/your/data',
  'visibleLevel': 2,
  'nodeTitle': 'name',
  'nodeContent': 'title'
});

7. Dynamically load information into the group chart on demand.

var datasource = {...}

var ajaxURLs = {
  'children': '/path/to/children/',
  'parent': '/path/to/parent/',
  'siblings': '/path/to/siblings/',
  'families': '/path/to/families/' 
};

$('#chart-container').orgchart({
  'data' : datascource,
  'ajaxURL': ajaxURLs,
  'nodeTitle': 'name',
  'nodeContent': 'title',
  'nodeId': 'id'
});

8. All default choices.

{
  'nodeTitle': 'name',
  'nodeId': 'id',
  'toggleSiblingsResp': false,
  'visibleLevel': 999,
  'chartClass': '',
  'exportButton': false,
  'exportFilename': 'OrgChart',
  'exportFileextension': 'png',
  'parentNodeSymbol': 'fa-users',
  'draggable': false,
  'direction': 't2b',
  'pan': false,
  'zoom': false,
  'zoominLimit': 7,
  'zoomoutLimit': 0.5
};

9. API strategies.

// Adds parent node(actullay it's always root node) for current orgchart.
instance.addParent(data)

// Adds sibling nodes for designated node.
addSiblings($node, data)

// Adds child nodes for designed node.
addChildren($node, data)

// Removes the designated node and its descedant nodes.
removeNodes($node)

// Gets the hierarchy relationships of orgchart for further processing. 
// For example, after editing the orgchart, you could send the returned value of this method to server-side and save the new state of orghcart.
getHierarchy(includeNodeData)

// Hides the parent node of any specific node(.node element).
hideParent($node)

// Shows the parent node of any specific node(.node element)
showParent($node)

// Hides the children of any specific node(.node element)
hideChildren($node)

// Shows the children of any specific node(.node element), if it has.
showChildren($node)

// Hides the siblings of any specific node(.node element), if it has.
hideSiblings($node, direction)

// Shows the siblings of any specific node(.node element), if it has.
showSiblings($node, direction)

// Returns the display state of related node of the specified node.
getNodeState($node, relation)

// Returns the nodes related to the specified node.
getRelatedNodes($node, relation)

// Set the scale
setChartScale($chart, newScale)

// Exports the current orgchart as png or pdf file.
export(exportFilename, exportFileextension)

Fully Customizable Organisational Chart Plugin, OrgChart Github


See Demo And Download

Official Website(dabeng): Click Here

This superior jQuery/javascript plugin is developed by dabeng. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *