Example: Basic Chart

This example demonstrates the simplest possible implementation of jOrgChart, with text-only nodes and no special configuration.

Full HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>jOrgChart - Basic Example</title>
    <link rel="stylesheet" href="../css/jquery.jOrgChart.css"/>
    <style type="text/css">
      /* Basic node styling */
      body { font-family: sans-serif; }
      #chart-container { margin: 20px; }
      .jOrgChart .node {
        border: 1px solid #ccc;
        background-color: #f9f9f9;
        border-radius: 4px;
        padding: 5px;
        font-size: 14px;
        width: auto;
        height: auto;
        min-width: 80px;
      }
    </style>
</head>
<body>

    <!-- The data source for the chart (hidden from view) -->
    <ul id="org-data" style="display:none">
        <li>
            Board of Directors
            <ul>
                <li>
                    CEO
                    <ul>
                        <li>Director of Technology</li>
                        <li>Director of Sales</li>
                        <li>Director of Marketing</li>
                    </ul>
                </li>
                <li>CFO</li>
                <li>COO</li>
            </ul>
        </li>
    </ul>

    <!-- The container where the chart will be rendered -->
    <div id="chart-container"></div>

    <!-- JavaScript Libraries -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery.jOrgChart.js"></script>

    <script type="text/javascript">
        jQuery(document).ready(function() {
            // Initialize the chart
            $("#org-data").jOrgChart({
                chartElement : '#chart-container'
            });
        });
    </script>

</body>
</html>

Explanation

  1. CSS: We include the required jquery.jOrgChart.css and add some minimal custom styles to make the nodes look clean.
  2. HTML Data (#org-data): A standard nested <ul> defines the hierarchy. The content inside each <li> is plain text.
  3. HTML Container (#chart-container): An empty <div> is created to serve as the target for the rendered chart.
  4. JavaScript: We include jQuery and jquery.jOrgChart.js. The script then waits for the document to be ready, selects our data source (#org-data), and calls .jOrgChart(), telling it to render inside #chart-container.