Fully Customizable Organisational Chart Plugin With jQuery - OrgChart

Fully Customizable Organisational Chart Plugin With jQuery - OrgChart
File Size: 170 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

OrgChart is a simple, flexible and highly customizable organization chart plugin for presenting the structure of your organization and the relationships and relative ranks of its parts and positions/jobs in an elegant way.

Features:

  • Supports both local data and remote data (JSON).
  • Ajax enabled.
  • On-demand data loading.
  • Fully customizable structure & nodes.
  • CSS3 based smooth transition effects.
  • Expandable and collapsible.
  • Avatars supported as well.
  • Font Awesome 4 based icons.

Basic usage:

1. Load Font Awesome 4 and the jQuery OrgChart plugin's style sheet in the head section of your document.

<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 other required resources at the end of the document so the page loads faster.

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

4. Prepare your data following the structure like this.

var datascource = {
    'name': 'Lao Lao',
    'title': 'general manager',
    'relationship': { 'children_num': 8 },
    'children': [
      { 'name': 'Bo Miao', 'title': 'department manager', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
      { 'name': 'Su Miao', 'title': 'department manager', 'relationship': { 'children_num': 2, 'parent_num': 1,'sibling_num': 7 },
        'children': [
          { 'name': 'Tie Hua', 'title': 'senior engineer', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 1 }},
          { 'name': 'Hei Hei', 'title': 'senior engineer', 'relationship': { 'children_num': 2, 'parent_num': 1,'sibling_num': 1 },
            'children': [
              { 'name': 'Pang Pang', 'title': 'engineer', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 1 }},
              { 'name': 'Xiang Xiang', 'title': 'UE engineer', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 1 }}
            ]
          }
        ]
      },
      { 'name': 'Yu Jie', 'title': 'department manager', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
      { 'name': 'Yu Li', 'title': 'department manager', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
      { 'name': 'Hong Miao', 'title': 'department manager', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
      { 'name': 'Yu Wei', 'title': 'department manager', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
      { 'name': 'Chun Miao', 'title': 'department manager', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }},
      { 'name': 'Yu Tie', 'title': 'department manager', 'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 7 }}
    ]
};

5. The JavaScript to render a basic organization chart inside the container you just created.

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

6. Load data from a remote JSON file via AJAX request.

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

7. Dynamically load data into the organization 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 options.

'nodeTitle': 'name',
'nodeId': 'id',
'nodeChildren': 'children',
'toggleSiblingsResp': false,
'depth': 999,
'chartClass': '',
'exportButton': false,
'exportFilename': 'OrgChart',
'parentNodeSymbol': 'fa-users',
'draggable': false,
'direction': 't2b',
'pan': false,
'zoom': false

Change logs:

2017-03-06

  • Refactor the method showChildren

2017-03-05

  • Users are allowed to set a zoom-in&zoom-out limit

2017-02-09

  • Fix export button default click event

2016-10-13

  • Allow functions in AjaxURLS option
  • CSS update
  • v1.2.6

2016-10-09

  • node will not be selected when users expand/collapse the nodes

2016-09-22

  • v1.2.3: Enable option zoom on mobile device

2016-09-21

  • Fix-bug: resolve the collision between option direction and draggable

2016-09-20

  • Fix-bug: if orgchart has been transformed, the ghost image is out of shape when drag&drop

2016-09-12

  • js update

2016-08-30

  • Fix-bug: drag and drop in IE is not working

2016-07-29

  • remove the option nodeChildren

2016-07-16

  • JS & CSS update

2016-06-28

  • append option dropCriteria

2016-06-27

  • fix-bug: export doesn't work well when chart-container has overflow:hidden

2016-06-24

  • split option panzoom into pan and zoom

2016-06-23

  • v1.0.9

2016-06-14

  • set dataType to json for all ajax

2016-05-23

  • added a new options: 'panzoom'

2016-05-11

  • added a new options: 'pan'

2016-05-07

  • bugfix: GetHierarchy method doesn't work properly when draggable option is on

2016-04-27

  • fix-bug: drag&drop feature doesn't work in FireFox

2016-04-26

  • bugfix

2016-04-22

  • JS update

2016-04-14

  • refactor the function buildJsonDS()

2016-04-09

  • refactor the method addParent()

2016-03-31

  • reduce plugin size.

2016-03-18

  • refactor the internal structure of orgchart plugin

2016-03-06

  • bugfix

This awesome jQuery plugin is developed by dabeng. For more Advanced Usages, please check the demo page or visit the official website.