/ best free open source web resources /

Graphic Resources

Visualizing Data into Tree Structure with jQuery OrgChart

Posted · Category: CC License, Charts

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.

You can show/hide a particular branch of the tree by clicking on the respective node. It is very easy to style using CSS. If drag-and-drop is enabled you’ll be able to reorder the tree which will also change the underlying list structure.


Requirements: jQuery Framework
Demo: http://dl.dropbox.com/u/4151695/html/jOrgChart/example…
License: Creative Commons 3.0 License

  • Wes

    Hi, I’m the creator of this plug-in. Please could you link to the new blog link which is more up-to-date.



  • Hi Wes,
    Just wanted to say great job on the plugin! :)

  • This is one of the best jquery plugins i have ever seen. Right now i dont need it, but i will archive it, and will find a use for it.

  • Harsha Gaming


    Is it possible to display the last nodes (the ones not having any children) in a single div? i.e., in the example,bluberry,rasperry and cucumber come under vegetables.Instead of 3 seperate nodes, can  all three be put inside a single div and attach that div to “vegetables”?

    Fellow programmer !

Supported By


Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons