Recent news

Sunday, 5 June 2016

OrgChart a jQuery Origination Chart Plugin Using CSS3




OrgChart is a jQuery origination structure display jQuery plugin. This plugin uses css3 ,jQuery and Dom to display the chart.

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.
  • Supports pan and zoom
How To Use

1. Add the below library reference

<script type="text/javascript" src="http://dabeng.github.io/OrgChart/js/jquery.min.js"></script>
<script type="text/javascript" src="http://dabeng.github.io/OrgChart/css/jquery.orgchart.css"></script>
<link rel="stylesheet" href="http://dabeng.github.io/OrgChart/css/jquery.orgchart.css">


2. Now add the below html tag.

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


3. Add the below code to perform operation

   $('#chart-container').orgchart({
        'data': $('#ul-data')
    });




Pranav Singh Author: Pranav Singh

Hello, I am Author of this blog. The main purpose of this blog is to provide all the jQuery plugins which is helpful in designing and developing a web application in a single location from the web.

Previous
Next Post »

E-mail Newsletter

Sign up now to receive breaking news and to hear what's new with us.

Recent Articles