Overview
jQuery OrgChart is a plugin that allows you to render structures with nested elements in a easy-to-read tree structure. To build the tree all you need is to make a single line call to the plugin and supply the HTML element Id for a nested unordered list element that is representative of the data you’d like to display. Features include:
- Very easy to use given a nested unordered list element.
- Showing/hiding a particular branch of the tree by clicking on the respective node.
- Nodes can contain any amount of HTML except
<li>and<ul>. - Easy to style.
Expected Markup & Example Usage
All documentation can be found on github.
Demo
You can view a demo of this here.
Sourcecode
Source code with an example is available here.
Hi, I like this solution for making an interactive organizational chart. I have a question though, would it be possible to include more data in each box fo example an image or a link to someone’s profile..
Thanks a lot for the great work.
Yip, 2 of the nodes in the example contain HTML – you should check them out. Have a look here: https://github.com/wesnolte/jOrgChart
Yes, that is right I just didn’t see that before. I am planning to create a dynamic wordpress plugin using your script. Thanks again.
Love this, thank you.
I’d really like to see more tree views done in this manner, it’s a much ‘richer’ EU experience IMO.
Woow.. Thats great, simple and nice look.
Making simple to create Org Chart for my web based application.
Thanks a lot for this stuff.
thanks alot for doing this, I’ve been looking for this for ages … using code from google visualisation, there is also possible to create orgchart, but less styl-able and not that easy as here
good job !
Thank you very much, this is a great jQuery plugin, very good work, plan to use it in my website.
[...] Website | tquilamockingbird.wordpress.com/2011/11/13/tquila-commons-jorgchart-a-jquery-plugin-for-visualising-… [...]