WebAppers

/ best free open source web resources /

Shopify

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.

jquery-tree

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

4 Comments
  • http://th3silverlining.com 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.

    http://th3silverlining.com/2011/12/01/jquery-org-chart-a-plugin-for-visualising-data-in-a-tree-like-structure/

    Thanks

  • http://fedmich.com/works/ Fedmich

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

  • http://www.dhtmlextreme.net/ Ogundipe Anthony

    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

    Hi,

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

    Regards,
    Fellow programmer !

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons