Back to post

OrgCharts is a lightweight and easy to use jQuery plugin that allows you to create structures with nested elements tree view chart. Just add the nested elements with simple <ul>, <li> structure and it will automatically convert this to <table> structure and rendered within the page perfectly. Also supported drag and drop features, you will just need to enable it.

Features:

How to use it:

1. Include the Javascript jquery.jOrgChart.js at the bottom of the web page.

<script src="path/to/jquery.jOrgChart.js"></script>

2. Include the CSS jquery.jOrgChart.css in the header of the page.

<link rel="stylesheet" href="path/to/jquery.jOrgChart.css">

Include jQuery UI for Drag and Drop features.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

3. Add the basic HTML to the page.

<ul id="org" style="display:none">
  <li>
    Food
    <ul>
      <li id="beer">Beer</li>
      <li>Vegetables
        <a href="#" target="_blank">Click me</a>
        <ul>
          <li>Pumpkin</li>
          <li>
             <a href="#" target="_blank">Aubergine</a>
             <p>A link and paragraph.</p>
          </li>
        </ul>
      </li>
      <li class="fruit">Fruit
        <ul>
          <li>Apple
            <ul>
              <li>Granny Smith</li>
            </ul>
          </li>
          <li>Berries
            <ul>
              <li>Blueberry</li>
              <li><img src="../assets/images/berry.jpg" alt="Raspberry"/></li>
              <li>Cucumber</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>Bread</li>
      <li class="collapsed">Chocolate
        <ul>
          <li>Topdeck</li>
          <li>Reese's Cups</li>
        </ul>
      </li>
    </ul>
  </li>
  </ul>
<div id="chart" class="orgChart"></div>

4. Initialize the plugin and we're ready to go. 

jQuery(document).ready(function() {
  $("#org").jOrgChart({
    chartElement : '#chart'
  });
});

Plugin's default options:

Name Default Description
chartElement 'body' used to specify which HTML element you'd like to append the OrgChart markup to.
depth -1 tells the code what depth to parse to. The default value of "-1" instructs it to parse like it's 1999.
chartClass 'jOrgChart' the name of the style class that is assigned to the generated markup.
dragAndDrop false determines whether the drag-and-drop feature of tree node elements is enabled.

Default example

HTML structure

<ul id="org" style="display:none">
   <li>
      Food
      <ul>
        <li id="beer">Beer</li>
        <li>Vegetables
          <a href="#" target="_blank">Click me</a>
          <ul>
            <li>Pumpkin</li>
            <li>
               <a href="#" target="_blank">Aubergine</a>
               <p>A link and paragraph.</p>
            </li>
          </ul>
        </li>
        <li class="fruit">Fruit
          <ul>
            <li>Apple
              <ul>
                <li>Granny Smith</li>
              </ul>
            </li>
            <li>Berries
              <ul>
                <li>Blueberry</li>
                <li><img src="../assets/images/berry.jpg" alt="Raspberry"/></li>
                <li>Cucumber</li>
              </ul>
            </li>
          </ul>
        </li>
        <li>Bread</li>
        <li class="collapsed">Chocolate
          <ul>
            <li>Topdeck</li>
            <li>Reese's Cups</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
<div id="chart" class="orgChart"></div>

Script

jQuery(document).ready(function() {
  $("#org").jOrgChart({
    chartElement : '#chart'
  });
});