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.

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.

[…] 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. […]

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

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”)

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.

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.

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 🙂

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.

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?

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…

[…] 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. […]

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!

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.

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.

[…] 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: https://th3silverlining.com/2011/12/01/&#8230; 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 OrgChart – 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. […]

[…] jQuery OrgChart – 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. […]

[…] 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. […]

[…] on tablets and smartphones, is lightweight (only 6K), and is easy to manipulate.jQuery Org ChartjQuery Org Chart is a plugin that lets you render tree-like structures with nested elements. Data is entered in a […]

Pranath, that should be easily doable by giving your parent node (that is, your very first LI element) a class=”collapsed” before rendering it with the plugin. That way only that node will be initially displayed.

[…] jQuery Org Chart – a plugin for visualising data in a tree-like structure « The Silver Lining Like this: Be the first to like this post. Source code with an example is available here . 59 Responses […]

So i put a blank div tag underneath the whole and changed the defaults chart list from body to div and that worked but if I leave it as body it deletes everything inside the body after the first drag and drop. Anyway. I’ve never worked with and orgchart plugin before. Would there be any chance in you making a short tutorial on making something that uses this dynamically. I really like the functionality of it but I can’t figure out how to actually use it dynamically.

And then the other stuff I want to accomplish is just at the VERY end of the plug-in. Basically I just want a “+” button in each node that lets the user make a new child node. Thats the first step. Later I want to add a functionality that lets the user enter the input for the node (the text, a link, picture, yada yada). But i think if you show me how i could just do the first step I could do the rest myself.

Had a quick look and I can the issue. The button is being copied from the ULs into the new tree mark up so you have 2 copies of the button. One that you can’t see that’s in the UL structure and the other one that is visible in the tree. This is a tricky approach and I’d advise against it. It’d be better to modify the plugin to add the buttons to the tree markup as it builds itself. These buttons then need to node where to put the new LI in the current UL so I’d suggest using IDs on the LIs. In short you need:

– to generate the buttons in the tree from within the plugin
– develop a way in which the buttons know which UL they’re adding LIs to
– “reload” the plugin once the new LI is added

This isn’t trivial so I can’t help you more than this in the shortterm.

So, I have been trying to get something different to come out on the screen but still no luck. Where in the plug-in should I edit stuff to show up in the nodes?
I used:
.append(“input{type=\”button\” value=\”+\”}”);
at the end of the $nodeDiv = …

[…] library that uses jQuery and Raphaël to make drawing time-series graphs easy. Morris.js →jQuery Org ChartjQuery OrgChart is a plugin that allows you to render structures with nested elements in a […]

Is it possible to develop the tree in vertically instead of horizontally?. Mecesitaría a tree of structure of a primary level, 5 secondary ones and of each of these, other 5 salesmen, so that in horizontal it would be very broad. Thank you.

This is awesome, a little too awesome. Now my people want to print it out and since it is really wide the browser cuts off the pages instead of printing more pages. Any suggestions. My best thought was to generate an image then they could save it. But then I looked at what would be involved in creating an image with java and my head started hurt especially when trying to do it with this plugin.

Never mind its working now, i moved my other javascripts before ”
jQuery(document).ready(function() {
$(“#org”).jOrgChart(…”.
NICE Plugin!!! i was planing to do it from Scratch before i found this plugin, saved me a lot of time!
thanks.

i don’t know why but i can’t select anchore element inside a node( like in the “Vegetables Click me” node from the jOrgChart example) with $(‘a’).hover(function(e) { console.log(‘Hovered’); });
but the $(‘a’) selector works for anchores that are out side of a node, any resone why this isn’t working when using this plugin?

Never mind again lol, its working now
if any one is having problem selecting elements from the tree nodes use $(window).load(…);
example:
$(window).load(function () {
$(‘a’).hover(function(e) { console.log(‘Hovered’); });
});

it took me 2 days to figure it out and i hope this can be helpful to anyone who is having the same problem

first of all thanks for this plugin. it saved me hours of researching.
However i have one question. is it possible to have a tree node that connects to the tree trunk and is shown horizontal (a example image for this can be found here http://unfold.gr/work/temp/screen.jpg)?

I was just wondering if you knew of or have a way to allow the tree to go horizontally instead of vertically. Our website only has limited width, but with the OrgChart going vertically, when there are too many categories in one row, it goes too wide.

So we were trying to see if there was a way to make it go sideways instead?

I was just wondering if you knew of or have a way to allow the tree to go horizontally instead of vertically. Our website only has limited width, but with the OrgChart going vertically, when there are too many categories in one row, it goes too wide.

So we were trying to see if there was a way to make it go sideways instead?

this is great plugin , saves lot of time , i was working on this plugin and tried to extend its functionality by enabling the user to use the JSON data using jquery using $getJSON method and then parse that data and change it to the HTML CODE in form of a unordered list and append it to the BODY of the page using jquery like $(“body”).append(“”);…..but the HTML code is appeneded to the BODY but nothing is displayed , even there is no error while inspecting the element , also otherwise it works …dont know what the problem…?

[…] 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. […]

note the id of the div. I created a composite ID that is a combination fo the level you are currently on and the id of the original element, separated by a | character.

Now I can iterate through each node like…

$(“.node”).each(function() {

myid = $this.attr(“id”);

});

and then split myid on the | character and do whatever is necessary to save the location back. You can keep track of the parent ID for each level nested so if I am on level 2, foe example, I can have saved the last level 1 id for reference. Also, the level items come in in order so if your database has a field for ‘order’ it can be updated.

The result? You can load a chart, drag and drop it and then save it back. If someone could make this mod to the source in GitHub, it would be available for everyone. Then folks would only have to add ids to their source and parse the results on button click as I suggest above.

[…] 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. […]

I’m dealing with a hierarchical structure in my web application, the structure can have n-levels: DepartmentID Name ParentID What is a good UI pattern to manage this kind of data (show, delete, move, update). Some possibilities I’ve seen are treeview…

I am willing to pay for someone to integrate this into WordPress/BuddyPress… In a nutshell I would like the top tier (parent) to be the registered WP user, he can then (preferably by drag and drop) or by clicking on 10 circles below to add or invite via email 5 other users (or drag 5 existing users) into 2nd tier, they will be his “children”, who in return can do the same and so fort build a “tree” that links all parents to the children.

If you are willing to discuss please contact me on greg@imediate.co.za or skype greg.mcewan.marriott, Urgent is someone is willing

This is excellent work – thank you. I would like to know if anyone has been successful in implementing a dynamic version that includes add and remove? For example, add nodes from another tree (or from a list), remove / delete nodes, either by dragging away or clicking on a button.

Is there anyway to construct the node containers (line 98) to be vertical and not collect side by side horizontal? I thought I could simply just add multiple itemitem2 but it only shows the first and it ignores the rest.

Salesforce Handbook

Jeff Douglas and I have recently completed our comprehensive guide to salesforce.com and the Force.com Platform. The book targets both developers and administrators who use the platform, or are looking to get into it. For more information feel free to peruse the listing by clicking on the button below.