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.
The Silver Lining 
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
me to 😦
Önder
February 1, 2013 at 9:46 am
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
Any luck? I’m in the process now of trying to do this.
Marcus
May 21, 2012 at 7:19 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: https://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
[…] 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. […]
Tweet Heat - The hottest Tweets of the Month [Feb 2012] | Inspired Magazine
February 29, 2012 at 3:36 pm
[…] 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. […]
Tweet Heat – The hottest Tweets of the Month [Feb 2012] | CS5 Design
March 2, 2012 at 9:46 am
Thank you very much. Its a perfect plugin.
jsonx
March 4, 2012 at 12:21 pm
awesome. =)
kmdino
March 9, 2012 at 11:51 am
[…] 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. […]
Developer Tools - Open Source Web Development Tools
March 12, 2012 at 2:58 pm
[…] jQuery Org Chart is a plugin that lets you render tree-like structures with nested elements. Data is entered in a nested unordered list, making it incredibly easy to use. […]
What’s new for designers, March 2012
March 12, 2012 at 6:06 pm
[…] 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 […]
What’s new for designers, March 2012 | Webdesigner Depot
March 13, 2012 at 2:59 am
Is there any option for bydefault collapsed all child nodes, to show only root node.
Please help me
Pranath
March 13, 2012 at 3:04 pm
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.
njsden
March 13, 2012 at 6:54 pm
[…] jQuery Org Chart is a plugin that lets you render tree-like structures with nested elements. Data is entered in a nested unordered list, making it incredibly easy to use. […]
What’s new for designers, March 2012 |
March 15, 2012 at 8:39 am
[…] jQuery Org Chart — представляет собой плагин, который позволяет сделать древовидные структуры с вложенными элементами. Данные вводятся во вложенный неупорядоченный список, что делает его невероятно простым в использовании. […]
Что нового для дизайнеров, Март 2012 | DesignerPost
March 19, 2012 at 7:55 pm
[…] jQuery Org Chart – a plugin for visualising data in a tree-like structure « The Silver Lining […]
jQuery Org Chart – a plugin for visualising data in a tree-like structure « The Silver Lining » Web Design
March 22, 2012 at 11:04 pm
[…] jQuery Org Chart is a plugin that lets you render tree-like structures with nested elements. Data is entered in a nested unordered list, making it incredibly easy to use. […]
What’s new for designers, March 2012 | Top website Designing Company in India
March 25, 2012 at 12:19 am
[…] jQuery Org Chart […]
26 New & Awesome Resources For Designers & Developers « The Creative Project
March 25, 2012 at 3:09 am
[…] jQuery Org Chart […]
26 New & Awesome Resources For Designers & Developers « CSS Tips
March 25, 2012 at 11:19 am
[…] jOrgChart is a jQuery plugin which converts nested unordered lists into tree menus but with an organization chart-like output. […]
Takula » jOrgChart – A Plugin For Creating Interactive Organization Charts With jQuery » Takula
March 25, 2012 at 1:57 pm
Great plugin.. Love it… Thanks a lot for your great work…
James
March 29, 2012 at 11:14 am
[…] on any item, it also allows drag ‘n’ dropping elements from one node to another. Download […]
60 Best jQuery Plugins to Enhance Your Web Experience | Sky Tech Geek
April 6, 2012 at 9:44 am
[…] Hier gehts zur Website […]
jQuery Org Chart | PM Design Blog
April 7, 2012 at 10:47 pm
[…] 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 […]
JS & JQ | Pearltrees
April 8, 2012 at 6:06 am
[…] jOrgChart is a jQuery plugin which converts nested unordered lists into tree menus but with an organization chart-like output. […]
The Web logix Blog » Blog Archive » jOrgChart – A Plugin For Creating Interactive Organization Charts With jQuery
April 8, 2012 at 3:38 pm
Why is it that when I drag and drop a node, it renders out the thus making it so that it wont render a second drop? Please help!
Max
April 10, 2012 at 9:22 pm
Hi Max, the example works so I’m not sure. Do you have a link to your code?
Wes
April 11, 2012 at 10:36 am
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.
Max
April 11, 2012 at 2:19 pm
It depends what you mean by dynamic. If you have a code sample or (even better) code that I can see in action that would help me understand.
Wes
April 11, 2012 at 2:25 pm
Yeah sure, check this out. http://jsfiddle.net/8VGVG/2/
I put this in the end of the plug-ing where the (link not collapse) code is so the “+” button wouldn’t collapse the tree:
$nodeDiv.children(‘input{class=\”add_child\”‘).click(function(e){
console.log(e);
e.stopPropagation();
});
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.
Thank You for the speedy responses, let alone any responses at all!
Max
April 11, 2012 at 10:36 pm
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.
Wes
April 12, 2012 at 9:50 am
Hey thanks for the reply. Yeah I am new to all of this. I figured it was just making a copy. Ill give what you said a try.
Max
April 13, 2012 at 3:03 am
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 = …
could you maybe hold my hand a little longer? 😦
Max
April 14, 2012 at 2:12 am
hey, so i got the “+” and “-” button to show up by appending
“”
before and after the .append(content).
First, why does this stop the drag and drop from working?
Second, is there a way to position the “+” button at the very bottom of the node?
Thanks man and sorry fro so many questions
Max
April 15, 2012 at 1:04 am
I forgot to attach the jsfiddle
http://jsfiddle.net/cwCwe/
Max
April 15, 2012 at 1:27 am
[…] 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 […]
40 Recently Released jQuery Plugins
April 11, 2012 at 8:37 am
[…] jQuery OrgChart is a plugin that allows you to render structures with nested elements in a easy-to-read tree structure.jQuery Org Chart → […]
40 Recently Released jQuery Plugins | auto
April 11, 2012 at 6:03 pm
[…] jQuery Org Chart […]
Wordpress Leaks » 40 Recently Released jQuery Plugins
April 13, 2012 at 6:08 pm
Hey Honorable Efforts… But can u plz tell me how can i add the data below the heading eg.fruit,banana etc. such as characteristics etc. on the page…. Nice anyway! 🙂
Codebaba
April 14, 2012 at 4:10 pm
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.
juanjosear
April 16, 2012 at 10:33 pm
I would like to develop a vertical tree as well – can it be done?
akb
June 28, 2012 at 9:07 pm
[…] jQuery Org Chart […]
40 Recently Released jQuery Plugins
April 17, 2012 at 2:39 am
[…] DOWNLOAD […]
60 MELHORES PLUGINS JQUERY « THIAGO MUNHOZ DEVELOPER
April 19, 2012 at 8:05 pm
[…] Download […]
60 Best jQuery Plugins to Enhance Your Web Experience | Web Help 101
May 4, 2012 at 6:42 pm
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.
Marcus
May 10, 2012 at 10:32 pm
Printing is a natural step 🙂 Unfortunately it’s not that easy to generate an image, but what if you printed the HTML page to PDF? Most (all?) browsers have this capability.
Wes
Wes
May 11, 2012 at 12:07 pm
I’m not having any luck finding a pdf generator that will do what I am looking for. How hard would it be to get the tree to generate left to right instead of top down?
Thanks for the quick response
Marcus
May 21, 2012 at 6:48 pm
Oh sorry I see the left to right thing was addressed earlier.
Marcus
May 21, 2012 at 7:16 pm
I ended up using jsPlumb instead which allows the user to move the nodes wherever they want. Thanks though.
Marcus
May 30, 2012 at 7:07 pm
why doesn’t my other javascripts won’t work after calling $(“#org”).jOrgChart(…). anyone, any idea ?
NaG8toR
May 15, 2012 at 12:51 am
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.
NaG8toR
May 15, 2012 at 1:50 pm
[…] Source Demo […]
Recently Released jQuery Plugins | Developer Junk
May 16, 2012 at 5:39 pm
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?
NaGaa
May 16, 2012 at 11:15 pm
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
NaGaa
May 17, 2012 at 3:15 pm
[…] jOrgChart is a jQuery plugin which allows to converts nested unordered lists elements into tree structure. but with an organization chart-like output. […]
20 Super jQuery Plugins | Web Help 101
May 18, 2012 at 6:29 pm
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)?
Thank you in advance
Andreas T
May 20, 2012 at 7:56 pm
[…] jQuery Org Chart is a plugin that lets you render tree-like structures with nested elements. Data is entered in a nested unordered list, making it incredibly easy to use. […]
» What’s new for designers, March 2012
May 23, 2012 at 9:47 am
This is a great plugin. Thanks for this.
Is there a way to generate the tree for a data source? I wonder how could it be done?
Dave Q
June 7, 2012 at 7:27 pm
No problem. Sure, it could be modified to accept a JSON payload. If I didn’t require money to live I’d totally add the feature in 🙂
Wes
June 7, 2012 at 8:04 pm
I have added a function to it, for getting and updating mysql data, if u would like it, just let me know.
TimP
June 26, 2012 at 5:02 am
Hi Tim, can you share the code? Wes, do you reiceved this enhancement?
Domenico Milano
October 31, 2012 at 12:42 am
Hay Wes, Thanks for the great efforts, you really saved my day 🙂
I’m wondering if the tree can be built vertically instead of horizontally?
Wes your response in highly appreciated
Thank you
itsmindgame
June 12, 2012 at 7:32 am
[…] Demo || Details […]
60 jQuery Plugins You Should Try Today | 网络钻头
June 13, 2012 at 9:10 am
First of all – great plugin!
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?
aSida
June 14, 2012 at 11:55 pm
First of all – great plugin!
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?
aSiDa
June 14, 2012 at 11:55 pm
Is possible generate tree similar to http://forum.jquery.com/viewImage.do?fileId=14737000000745666&forumGroupId=14737000000003003 ?
tryhp3
June 15, 2012 at 12:04 pm
brilliant job!
egidio cs
June 18, 2012 at 4:26 pm
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…?
Kapil Jhamb
June 25, 2012 at 10:32 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. […]
Awesome jQuery plugins for representing data in Tree Structure — Pranav on .NET
June 27, 2012 at 6:04 pm
I added a mod to add ids to each div so I could save out the new configuration after drag and drop. Here is the simple process…
First, add ids to each LI in your source. In my case, these are the database unique IDs for each element the chart was build from. This is so I can update that ID later.
Second, find the line that looks like this (in buildNode):
$nodeDiv = $(”).addClass(“node”).data(“tree-node”, nodeCount).append($nodeContent);
I changed it like this:
$nodeDiv = $(”).addClass(“node”).data(“tree-node”, nodeCount).append($nodeContent);
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.
Hope this helps!
Doug Wolfgram
July 4, 2012 at 5:15 am
just realized my post removed the divs… inside the $(“”) quotes the first line had a div and the second one had a div with an id that consists of level + | + $(this).attr(“id”);
Doug Wolfgram
July 4, 2012 at 5:17 am
[…] jQuery Org Chart- a Plugin for Visualising Data in a Tree-like Structure @wesnolte How to get your data to appear in a tree structure. […]
Force Feed 12-5-2011 | Delivered Innovation Blog
July 17, 2012 at 8:11 pm
[…] Demo || Details […]
60 jQuery Plugins You Should Try Today « C++
July 18, 2012 at 2:22 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. […]
jQuery Organization Chart
July 18, 2012 at 9:05 pm
To squeeze up those invisible boxes on contraction I’m using:
tr.contracted + tr,
tr.contracted + tr + tr,
tr.contracted + tr + tr + tr {
display: none;
}
.contracted div: after {
content: ‘+’
}
It’s not very pretty, but it seems to work alright.
Nate
July 23, 2012 at 10:17 pm
Help!!!
I’ve downloaded the whole source code but somehow the drag-n-drop feature just won’t work on any kind of browser, but your demo works perfectly fine for me…
Did I miss any step?
Ailun
August 8, 2012 at 10:24 pm
is this available as a plugin for wordpress users?
Des
August 14, 2012 at 6:04 pm
Is there a way to have some kind of visual cue if the node is collapsed? Like an upside down triangle in the lower corner?
n2design1
August 16, 2012 at 8:13 am
What are some design patterns for managing hierarchical data?…
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…
Quora
August 29, 2012 at 2:47 pm
The demo comes up a blank green checked screen. I am not sure if something else is required to see a demo of this plugin
Charlie R Chisholm
September 1, 2012 at 4:03 pm
It works incorrect in ie 7-9 (( Is anybody find answer?
Ann
September 6, 2012 at 7:11 pm
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
gregmcewan
September 23, 2012 at 11:36 pm
[…] CSS3 to work properly. It is compatible with Chrome & Safari 6 only.5. Chart & Graph PluginsjQuery Org ChartIt allows rendering structures with nested elements in a really cool tree structure.Morris.js This […]
25 Essential jQuery Plugin ToolKit for Developers
September 27, 2012 at 12:54 pm
god bless you friend , you saved me a lot of time , ، Thank You Sooo Much
shahram
October 6, 2012 at 1:16 pm
Do you have in plan updating this class to be able to also connect the nodes (for a diagram).
Andrei
October 12, 2012 at 12:51 am
god bless you friend , you saved me a lot of time , ، Thank You Sooo Much
liuting
October 15, 2012 at 8:55 am
you saved me a lot of time , ، Thank You Sooo Much
liuting
October 15, 2012 at 8:56 am
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.
Nic D
October 24, 2012 at 7:57 pm
I was having problems with getting it to work for my company’s IE8/IE7 browser… after a long search I found that if you add:
if (!window.console) console = {log: function() {}};
To the top of the page (Or above the “jQuery(document).ready(function() {” in the example) it will allow this to work with IE7/8 of a special kind (Like my company’s).
Hope this may help someone.
Thank you Wes, I will use this!
Rob
October 29, 2012 at 9:11 pm
THank you for you wonderful tool. Did you have a way of adding and/removing a node? I think I can add the html to add the ul or li tags, but I cannot get the org chart to re-draw.
Thanks!!
zz2z41
November 3, 2012 at 3:57 am
The component is Great!!! but not even the demo works on the Internet Explorer IE.. any version, is there a tweak to meke it work, it does not display te tree
Jorge Navarro
November 6, 2012 at 10:21 pm
[…] 23- jQuery Org Chart […]
25 Fabulous Essential jQuery Plugin ToolKit for Developers | Smashing Spy
November 15, 2012 at 8:42 am
I had problems with it loading in IE9. The fix was to comment out the //console.log($node); on line 213 of the jquery.jOrgChart.js file. Hope this help someone else.
Vito Pellicano
November 28, 2012 at 4:34 pm
Thanks man! This helped me a bunch! You should submit a pull request with this fix. I might try and do it and give you credit.
The New Mr
November 4, 2013 at 3:30 pm
Hello it’s a really great plug-in but i want to ask if you can fix a issue with IE 8,7,6 i’m getting this error(open link )
http://k43.kn3.net/taringa/5/1/4/1/7/6//shavo2/B9C.jpg?8654
i hope you can fix it i really want to use this plug-in
Kevin Jennings
November 29, 2012 at 3:38 pm
Example looks great in FF and Chrome, but does not work in IE9. Is this an issue with the example html or the plug-in itself?
Brad
December 4, 2012 at 4:55 pm
[…] Demo || Details […]
Best jQuery Plugins You Should Try | iGeeki
December 22, 2012 at 9:04 am
[…] （21）JQuery OrgChart是一个JQuery插件，可以帮助你快速实现树状的组织架构图 […]
jQuery学习资料分享 | JSUED · 视觉设计 · 前端开发 · 交互设计 · 用户研究
January 9, 2013 at 3:34 am
[…] jQuery Org Chart […]
w3talks 50 полезных плагинов JQuery 2012 года » w3talks
January 13, 2013 at 12:20 pm
Does it work when put it under html code on google site?
vee
January 14, 2013 at 8:21 am
[…] jQuery Org Chart […]
50 Most Useful jQuery Plugins from 2012
January 28, 2013 at 2:53 am
Hello,
In their a way I can install this in WordPress as a plugin?
Kind Regards,
Bianca
Bianca
January 31, 2013 at 6:22 am
Hi All,
The plugin is really good and helpful
but its not working in Firefox 3.6.6
please help me to solve this…
Karuna
February 12, 2013 at 6:19 am
[…] jQuery Org Chart […]
Learn Anything @ Funkarachi – 50 Most Useful jQuery Plugins from 2012
March 9, 2013 at 6:56 am
[…] jOrgChart jQuery的创建可视化组织结构图 […]
20个令人敬畏的jQuery插件
March 11, 2013 at 8:40 am
Image(jpg, png..) or file(pdf..) conversion JorgChart?
skytiger
March 12, 2013 at 3:15 pm
has anyone found a horizontal solution to show this sideways? something like this:
http://www.yworks.com/products/yfilessilverlight/Demo.yFiles.Graph.Collapse.html
..but without flash or silverlight?
dridma
March 27, 2013 at 6:18 pm
[…] jQuery Org Chart […]
jqueryexample.com » jquery plugins 2012 – 2013 » jqueryexample.com
March 28, 2013 at 7:01 pm
Hi, you should delete the console.log so that it works on IE 😉
Really nice job btw 🙂
Mouton
April 5, 2013 at 2:33 pm
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.
dbrandusa
May 1, 2013 at 3:44 pm
It parsed out my html code. I had UL LI LI UL, UL LI LI UL, etc but it only shows the first set of UL’s in the list.
dbrandusa
May 1, 2013 at 3:45 pm
how i can save data into DB with ajax?
Firdavs
May 3, 2013 at 7:10 pm
[…] jOrgChart is a jQuery plugin which allows to converts nested unordered lists elements into tree structure. but with an organization chart-like output. […]
20+ Superb jQuery Plugins | jQuery | Design Blog
May 28, 2013 at 11:31 am
Has anyone found the solution to “Add new node and delete existing node” enhancement for this plugin?
bruceWayne
June 14, 2013 at 1:05 pm
Very nice work
Cleophas Opande
June 20, 2013 at 10:03 pm
[…] Demo || Details […]
Powerful jQuery Plugins
July 10, 2013 at 12:38 pm
너무나 훌륭한 코드네요. 기발한 아이디어와 함께. 잘 사용하겠습니다.
Jkun
July 12, 2013 at 5:35 am
[…] jQuery Org Chart […]
网站项目开发最有用的50款 jQuery 插件集锦——《图表和排版篇》 - jQuery教程 - 开发者
July 23, 2013 at 11:51 am
I could really use this, but I also need to be able to add new nodes from a parent node….
Steve Haran
July 26, 2013 at 3:37 pm
It is possible to have more that one root?
Mihai
August 7, 2013 at 3:24 pm
[…] Source […]
Best jQuery Chart Libraries for Building Interactive Charts | EagleTuts
September 6, 2013 at 10:02 am
[…] Plugin Homepage Demo […]
Free Jquery Charts and Graphs Plugins | Designyea
September 11, 2013 at 7:21 pm
[…] Demo || Details […]
60 jQuery Plugins You Should Try Today - SloDive
September 25, 2013 at 1:52 pm
i need children node with with multiple parents. pls suggest.
Venkat Reddy
November 5, 2013 at 8:00 am
[…] View Chart […]
37 Free jQuery Or Javascript Chart Libraries - Cube3x
November 22, 2013 at 7:21 am
[…] I’am using this plugin: https://th3silverlining.com/2011/12/01/jquery-org-chart-a-plugin-for-visualising-data-in-a-tree-like-… […]
jQuery org chart how to sort the items? | javascript - TrauBo.Net
February 10, 2014 at 5:15 am
[…] I’am using this plugin: https://th3silverlining.com/2011/12/01/jquery-org-chart-a-plugin-for-visualising-data-in-a-tree-like-… […]
jQuery org chart how to sort the items? | QueryPost.com
February 10, 2014 at 7:11 am
[…] jQuery OrgChart […]
Charting and Data Visualization Tools and Libraries | Chok Leong's Thoughts
April 29, 2014 at 3:00 pm
[…] 12. jOrgChart […]
20 Best Drag and Drop jQuery Plugins
May 2, 2014 at 4:04 pm
[…] jQuery Org Chart（需翻墙才能查看DEMO） […]
前端ING » 2款jQuery图表插件
May 16, 2014 at 7:16 am
[…] Source […]
20 Best Drag and Drop jQuery Plugins for Your Website
May 16, 2014 at 7:51 am
[…] https://th3silverlining.com/2011/12/01/jquery-org-chart-a-plugin-for-visualising-data-in-a-tree-like-… […]
[RESOLVED]How draw lines using graphics in ASP.NET | ASP Questions & Answers
July 2, 2014 at 6:29 pm
[…] https://th3silverlining.com/2011/12/01/jquery-org-chart-a-plugin-for-visualising-data-in-a-tree-like-… […]
[RESOLVED]How draw lines using graphics in ASP.NET | ASP Web Form Data Control
July 4, 2014 at 2:02 pm
[…] https://th3silverlining.com/2011/12/01/jquery-org-chart-a-plugin-for-visualising-data-in-a-tree-like-… […]
[RESOLVED]How draw lines using graphics in ASP.NET | ASP.NET MVC
July 5, 2014 at 8:56 pm
[…] a nested unordered list element that is representative of the data you’d like to display. Source […]
Best jQuery Chart Libraries for Building Interactive Charts - Code Geekz
December 29, 2014 at 6:29 am