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