 |
| Fully Customizable Organisational Chart Plugin With jQuery - OrgChart |
OrgChart is a very fully, flexible and easily customizable javascript (jQuery) org chart plugin js that allows you to display the organizational structure, as well as the relationships between sections and their positions/tasks in a modern, elegant way.
Installation:
# NPM $ npm install orgchart --save # Bower $ bower install orgchart --save
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.
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.4.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 = {
'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 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',
'visibleLevel': 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',
'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 methods.
// 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) // returns the parent node getParent($node) // returns the sibling nodes getSiblings($node) // returns the child nodes getChildren($node) // Set the scale setChartScale($chart, newScale) // Exports the current orgchart as png or pdf file. export(exportFilename, exportFileextension)
Live Demo
See the Pen Untitled by Teguh Sigit (@teguhsigit) on CodePen.
File Info
- File Name :
- OrgChart-master.zip
- Size :
- 468KB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT