Animated Organisational Tree Chart Plugin With jQuery OrgChart

by Posted on

Today I am going to introduce one more awesome jquery plugin to create Animated Organisational Tree Chart With jQuery OrgChart Plugin. This plugin is quite awesome for creating Organisational chart and displaying fancy MLM Tree View. You can dynamically assign user under other user and collapsed tree view at any part.
Organisational-Chart-Plugin-With-jQuery-OrgChart

Features:

  • Supports both local data and remote data (JSON).
  • Smooth expand/collapse effects based on CSS3 transitions.
  • Align the chart in 4 orientations.
  • Allows user to change orgchart structure by drag/drop nodes.
  • Allows user to edit orgchart dynamically and save the final hierarchy as a JSON object.
  • Supports exporting chart as a picture or pdf document.
  • Supports pan and zoom
  • Users can adopt multiple solutions to build up a huge organization chart(please refer to multiple-layers or hybrid layout sections)
  • touch-enabled plugin for mobile divice



Integrate Animated Organisational Chart Plugin On website

Integration of OrgChart is easy, you can directly use the standalone build by including jquery.orgchart.js and jquery.orgchart.css in your webapps.

Libraries

Include all the required JS+CSS libraries on page.

<!--CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" > 
  <link rel="stylesheet" href="jquery.orgchart.min.css">
 
<!--JS-->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.orgchart.min.js"></script>

HTML

Creating html div container for displaying organisational chart.

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

CSS

Added few custom stylesheet on page for styling chart container.

<style>
html,body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
 
body {
  font-family: Arial;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
}
 
#chart-container {
  position: relative;
  display: inline-block;
  top: 10px;
  left: 10px;
  height: 420px;
  width: calc(100% - 24px);
  border: 2px dashed #aaa;
  border-radius: 5px;
  overflow: auto;
  text-align: center;
}
</style>



JS

Now creating the array of employee as per organisational level and call plugin function to map employee as per organisational tree view.

<script type="text/javascript">
    $(function() {
    var datascource = {
      'name': 'Rohit Kumar',
      'title': 'general manager',
      'children': [
        { 'name': 'Manish Patel', 'title': 'department manager', 'collapsed': true,
          'children': [
            { 'name': 'Mohit Kumar', 'title': 'senior engineer', 'className': 'slide-up' },
            { 'name': 'Ankita Rana', 'title': 'senior engineer', 'collapsed': true, 'className': 'slide-up',
              'children': [
                { 'name': 'Rahul Singh', 'title': 'engineer', 'className': 'slide-up' },
                { 'name': 'Preeti Dixit', 'title': 'engineer', 'className': 'slide-up' },
                { 'name': 'Sonu Singh', 'title': 'engineer', 'className': 'slide-up' }
              ]
            }
          ]
        },
        { 'name': 'Rajeev Sukhla', 'title': 'department manager',
          'children': [
            { 'name': 'Anil Panda', 'title': 'senior engineer' },
            { 'name': 'Deepti Thakur', 'title': 'senior engineer', 'collapsed': true,
              'children': [
                { 'name': 'Paul Kenu', 'title': 'UE engineer', 'className': 'slide-up' },
                { 'name': 'Rishab Shukla', 'title': 'engineer', 'className': 'slide-up' },
                { 'name': 'Rizwan Ansari', 'title': 'engineer', 'className': 'slide-up' }
              ]
            }
          ]
        }
      ]
    };
    $('#chart-container').orgchart({
      'data' : datascource,
      'nodeContent': 'title'
    });
  });
  </script>

See live demo and download source code.

DEMO | DOWNLOAD

Click Here for more live demos

See official github repository for more information and follow for future updates. Don’t forget to read license for using above plugin in your commercial project.



Published by admin