Tquila Commons: jQuery Org Chart – a plugin for visualising data in a tree-like structure


Overview

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.
  • 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.

jQuery OrgChart


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.

Tagged , , , , , , , ,

8 thoughts on “Tquila Commons: jQuery Org Chart – a plugin for visualising data in a tree-like structure

  1. Musta says:

    Hi, I like this solution for making an interactive organizational chart. I have a question though, would it be possible to include more data in each box fo example an image or a link to someone’s profile..

    Thanks a lot for the great work.

  2. Musta says:

    Yes, that is right I just didn’t see that before. I am planning to create a dynamic wordpress plugin using your script. Thanks again.

  3. 😀
    Love this, thank you.
    I’d really like to see more tree views done in this manner, it’s a much ‘richer’ EU experience IMO.

  4. Ofidz Al-akadarnya says:

    Woow.. Thats great, simple and nice look.
    Making simple to create Org Chart for my web based application.
    Thanks a lot for this stuff.

  5. thanks alot for doing this, I’ve been looking for this for ages … using code from google visualisation, there is also possible to create orgchart, but less styl-able and not that easy as here 🙂 good job !

  6. chionyoo says:

    Thank you very much, this is a great jQuery plugin, very good work, plan to use it in my website.

    🙂

  7. […] Website | tquilamockingbird.wordpress.com/2011/11/13/tquila-commons-jorgchart-a-jquery-plugin-for-visualising-… […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: