jQuery Org Chart – a plugin for visualising data in a tree-like structure
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.
- Drag-and-drop reorganisation of elements.
- 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.
Advertisement
Ok, this is just slick!
I’ve got some ideas to make the collapse and expanse of the nodes. More of a smooth transition. Not even sure if it would work but maybe I’ll do my first github fork.
Heads up that in the demo, firebug is throwing this error
handleDragStart is not defined
start : handleDragStart,
and the View Underlying List doesn’t seem to work. Using FF7.0.1
Jason
December 1, 2011 at 11:29 pm
Thanks J! Fork away, I’m accepting all pull requests
There are quite a few other niceties that I think are missing e.g. pulling the style class names/ element ids from the original ul/li and making the plug-in work with other data formats e.g. JSON. Hopefully I get some time to build them out. I’ll have a look at the bugs, thanks for the heads up.
Wes
December 1, 2011 at 11:45 pm
bugs fixed. Have fun!
Wes
December 2, 2011 at 2:49 pm
[...] 5 jQuery OrgChart is a plugin that allows you to render structures with nested elements in a easy-to-read tree [...]
Visualizing Data into Tree Structure with jQuery OrgChart | PHP Ocean
December 5, 2011 at 8:25 pm
[...] jQuery Org Chart – a plugin for visualising data in a tree-like structure → Elsewhere chart, javascript, jquery, link, tree ← BozoCrack MD5 Password Hash Cracker [...]
jQuery OrgChart | Bram.us
December 5, 2011 at 10:14 pm
Great Plugin who want to create tree or site map.
Amrinder Singh
December 7, 2011 at 1:39 pm
[...] 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. [...]
Visualizing Data into Tree Structure with jQuery OrgChart | uxstats
December 11, 2011 at 11:09 am
Very nice job!
Paul Vincent Craven
December 12, 2011 at 8:19 pm
Thanks
Wes
December 13, 2011 at 10:47 am
I also want to add or remove childs or parent dynamically. can this be possible?
Alok Agrawal
December 13, 2011 at 10:44 am
Yip, but you’ll need to write your own JavaScript to do it. Should be simple though…
Wes
December 13, 2011 at 10:47 am
I need some idea to do it. Can you help me on that?
Alok Agrawal
December 13, 2011 at 12:03 pm
seems like it has problem with IE6, have you test it on that old browser?
smith
December 15, 2011 at 2:05 am
I’d rather pretend it didn’t exist.
http://www.ie6death.com/
Wes
December 15, 2011 at 9:01 pm
Thank you for your great job, but I would suggest more functions be added to make it more flexible, for example, addNodes/removeNodes function to add/delete nodes dynamically, showDepth to make if some
level of nodes should be displayed/showed initially, onClick to fire event when some one do not want the
default show/hide nodes behavior…
For now, I have to modify your code code to accomplish these….
anyway, thank you very much for your efforts
smith
December 16, 2011 at 4:32 am
Hi,
honorable efforts !!!
can you help me with a little problem?
In fact, the horizontal rows, those black ones are not showing up when I test you script.
any advise or solution?
raouf
December 15, 2011 at 11:23 pm
Are you using IE7? I just submitted a fix for this, which Wes has already merged.
neilbowers
January 20, 2012 at 1:18 pm
What would it take to be able to create and delete items within the application?
Aaron
December 16, 2011 at 4:16 pm
Any chance you’d be willing to dual-license this? CC-BY-SA and the GPL family of licenses are mutually incompatible. (They both say “You must release derivative works under the same license and can’t apply additional restrictions”)
Stephan Sokolow
December 19, 2011 at 9:21 am
I might yes. What’s the use-case?
Wes
December 19, 2011 at 12:32 pm
For now, just using it.
From what little I’ve been able to find on the legal interpretations of copyleft licensing in the context of Javascript, I fear using BY-SA Javascript and GPL-family Javascript in the same application since either license could quite easily be interpreted to count the entire body of the Javascript loaded in a given page as the derivative work.
That’d mean that I’d be violating either your license or the other license were I to either distribute an open-source app containing your plugin and anything GPLed or LGPLed in the same page (and any apps I haven’t open-sourced will be eventually) or to simply use an AGPLed application which contains BY-SA code.
(The GPL’s provisions only kick in if you distribute a copy of your app to someone else (hence why Google has no problem using GPLed code on their servers) but the AGPL requires you to offer copies to anyone who uses it in. The AGPL is for when programmers want GPL-like protections on software that never needs to be distributed to the customer like Google Docs or Twitter. Hence why StatusNet, an open-source Twitter clone, uses it.)
I’ve got various potential apps which could use an editable org chart as a graphical representation of hierarchical data, but I normally don’t even trust BY-SA code to be on my list of useful resources because it’s too much extra bother to keep track of licensing compatibility. Yours, I’m making a minor exception for just to have on the list of potential resources because it’s the first editable org chart plugin I’ve ever run across.
Stephan Sokolow
December 19, 2011 at 1:32 pm
I’ll do it on one condition. You let me see the cool stuff you make with it
Wes
December 20, 2011 at 9:35 pm
At the moment, I’ve got a bunch of other projects prioritized because they’ll help free up more of my time for coding, but I can definitely add a note to that effect. Good enough?
Stephan Sokolow
December 20, 2011 at 9:42 pm
I just realised the other license you’re asking for is GPL, that’s my bad I meant to do that from the start :/ Oh and yes, that’s good enough. I find it rewarding to see my projects being used
Wes
December 20, 2011 at 9:55 pm
Hi Wes,
I simply bow to you and your development skills. This is exactly what I have been looking for. Could you please give me a hint on how I could modify nodes programatically…I know you mentioned we’d have to do it on our own but I’m begging for a bone here… please, Help me Obi Wan Kenobe, you’re my only hope.
Again, fantastic piece of brilliance. Thank you.
Methodical
January 9, 2012 at 11:47 pm
The great difficulty here is identifying the nodes and the easiest way I can think of doing that is assigning the list items id-values and then translating these into ids for the equivalent nodes. It’s not that hard to do but I’m running a business and maintaining several open source projects so I have very little time at the moment. If you could take a stab at this and issue a pull request I’d gladly send a telepathic-5 your way
Wes
January 19, 2012 at 5:13 pm
Yes, you’re right. So, I have been giving this a lot of thought – I’m not a great developer BTW – and I’ve managed to give the list items and id. You see, my list is brought in from a MySQL DB so I modified your script simply by making a DB call and creating an array which is then parsed out in the UL list format that your plugin requires. That works pretty good. I’ve attached a context menu to each node with another jquery plugin. The probem lies with the type of brilliance probably only you can provide surrounding the add/delete part. I’m also trying to save the list back to the DB but I can’t serialize the list properly. I’ve tried making the UL list ‘sortable’ and using the serialize function but I get no output… it’s frustrating not being so good at stuff. If I happen to get this to work – you have my word I’ll share it back to you… although you’d probably re-write my terribly lengthy code in a couple of lines
which would be a wonderful learning lesson to me… anyway I appreciate your input and let me know if you’d like me to share what I mentioned above.
Methodical
January 20, 2012 at 5:19 am
Checkout the github repo. Looks like someone awesome sorted this out
Wes
January 21, 2012 at 5:08 pm
Really solid plug-in!
I see that others have been interested in add/delete children. You might want to consider that functionality as an option. I’m going to add functions for my project, unless someone has already done so. Anybody done this elegantly?
Again, nice work.
dpclark
January 13, 2012 at 6:59 pm
Hey. I’ve been on a tiny island without internet for a few weeks so I’m still catching up on my messages
It shouldn’t be too tough but I’ve got thousands of emails to get through first. Will post back here when it’s done…
Wes
January 15, 2012 at 2:01 pm
Thanks Wes.
In the meantime, I’ll see what I can come up with.
dpclark
January 25, 2012 at 3:47 pm
I know we all wish death upon IE6, but doesn’t work correctly in ie7 either.
Nathan Sargent
January 19, 2012 at 4:45 pm
Sweet raven’s claw! That’s no good. Not having a windows machine is my only excuse
I’ll have a poke around at the weekend if I can find the time.
Wes
January 19, 2012 at 5:11 pm
In a most excellent turn of events, someone just fixed this. I’ve merged the code so you can grab it on github.
Wes
January 19, 2012 at 5:46 pm
This goes down as the single greatest example of customer service in history.
Nathan Sargent
January 19, 2012 at 7:56 pm
[...] 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. [...]
Qink | Visualizing Data into Tree Structure with jQuery OrgChart
January 30, 2012 at 9:25 am
[...] jQuery Plugin Org Chart erstellt aus einer unordered list ein Organigramm – so einfach kann es sein!
Das Design [...]
Organigramme in jQuery - Webworking
January 30, 2012 at 10:30 am
[...] jOrgChart is a jQuery plugin which converts nested unordered lists into tree menus but with an organization chart-like output. [...]
jOrgChart – A Plugin For Creating Interactive Organization Charts With jQuery | Web Design Startup
February 1, 2012 at 1:08 am
Hi,
I have included the diagram on my GSP page, no matter what the chart always gets displayed on the bottom part. Any Div I include below it, still gets displayed above in the generated gsp page.?
Priyank Devurkar
February 1, 2012 at 2:10 am
Hey, it sounds like you have a CSS issue. This isn’t related to the development of the plugin, sorry.
Wes
February 1, 2012 at 11:27 am
[...] jOrgChart is a jQuery plugin which converts nested unordered lists into tree menus but with an organization chart-like output. [...]
jOrgChart – A Plugin For Creating Interactive Organization Charts With jQuery | WebDesignBasis.com
February 1, 2012 at 7:34 am
Hello, I absolutely love this plug-in. I have a pretty stupid question, which I thought would be an easy fix… But, for the life of it, I can’t figure it out… Well, here it goes… IF I add an HTML link into a node that has child nodes, by clicking on the HTML link inside the node, it opens/closes it.
I really don’t want it to open/close (toggle) if I click on an link within the node… IS there an easy fix for this? Thank you in advance!
nc
nc
February 4, 2012 at 5:45 am
Sounds like a bug
Can you open an issue at http://github.com/wesnolte/jOrgChart please.
Wes
February 5, 2012 at 2:51 pm
Hi,
Is it possible to draw hierarchy in left-to-right orientation? Currently it is top-to-bottom and i don’ t get any handle for this
Plz help
Jawwad Farooq
February 9, 2012 at 9:08 am
It doesn’t at the moment, it’s a very interesting feature idea though!
Wes
February 9, 2012 at 11:47 am
Could you please give some hints how to modify the existing code for this add-on?
Jawwad Farooq
February 9, 2012 at 1:10 pm
Just the hints would take hours and possibly days of analysis. I suppose my suggestion is to read the source and attempt it yourself
Wes
February 9, 2012 at 1:14 pm
Hello,
Your tool is really interesting and well designed.
I wish I could make a change to a database when I do a drag and drop.
Is it possible to display the id of the “source” and “target” in the list
example: Beer returns me a 1.
The only information that appears is that between tags that can appear with .html() in the jquery.jOrgChart.js file.
Thank you!
Mitch
February 9, 2012 at 5:31 pm
Ideally the plugin needs be extended to:
1. Work with JSON
2. Handle events
That would be ideal but it will take some time to create those features, and unfortunately I don’t have time right now
Wes
February 18, 2012 at 11:38 am
Hi Wes,
Well, I may not be the best developer but I have come to realize that when someone is kind enough to put out there what they’ve done to help others it’s only the right thing to do to pass that on. I have been working feverishly on your #1 point, Work with JSON. I believe I have something that will help. I’ve got it to return a JSON object but the code isn’t rock solid yet. When I’ve got it good I’ll email you and let you have a look and then hopefully you can use it to further this project.
Thanks.
Methodical
February 21, 2012 at 4:42 pm
Glad to hear it, thanks for the help
Wes
February 21, 2012 at 4:58 pm
[...] 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. Home: http://th3silverlining.com/2011/12/01/… Demo: http://dl.dropbox.com/u/4151695/html/jOrgChart/example/example.html If you have found any issues with this resource please tell us about it → Report Resource Processing your request, Please wait…. [...]
jQuery Org Chart – A plugin for visualising data in a tree-like structure - CodeVisually
February 17, 2012 at 9:20 am
[...] HTML-Listen stellt ein jQuery-Plugin des Londoner Entwicklers Wes Nolte als Organigramm dar. Der Code sucht im HTML-Dokument nach den [...]
HTML-Liste mit jQuery als Chart visualisieren | XML-Ecke
February 19, 2012 at 9:45 am