Quick Start Guide
This guide will walk you through creating your first organizational chart in just three simple steps.
Step 1: Create the HTML Structure
The foundation of a jOrgChart is a nested unordered list (<ul>). Each <li> element represents a node in the chart. Create an HTML file and add a list like the one below. We give the root <ul> an ID (e.g., org-data) so we can easily select it with jQuery. It's a common practice to hide the original list with style="display:none".
<ul id="org-data" style="display:none">
<li>
CEO
<ul>
<li>VP of Engineering</li>
<li>
VP of Marketing
<ul>
<li>Marketing Manager</li>
</ul>
</li>
<li>VP of Sales</li>
</ul>
</li>
</ul>
<!-- This is where the chart will be rendered -->
<div id="chart-container"></div>
Step 2: Initialize the Plugin
Now, add a <script> tag to your HTML and use jQuery to select your list by its ID and call the .jOrgChart() method. This will generate the chart and append it to the <body> by default. For better control, we can specify where to render the chart using the chartElement option.
jQuery(document).ready(function() {
$("#org-data").jOrgChart({
chartElement : '#chart-container'
});
});
Step 3: Putting It All Together
Here is a complete, runnable HTML file that combines the required libraries, the HTML structure, and the jQuery initialization call.
<!DOCTYPE html>
<html>
<head>
<title>jOrgChart Quick Start</title>
<link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
<style type="text/css">
/* A little custom styling for the nodes */
.jOrgChart .node {
border: 2px solid lightblue;
background-color: #f0f8ff;
color: #333;
border-radius: 4px;
}
</style>
</head>
<body>
<!-- The data source for the chart -->
<ul id="org-data" style="display:none">
<li>
CEO
<ul>
<li>VP of Engineering</li>
<li>
VP of Marketing
<ul>
<li>Marketing Manager</li>
</ul>
</li>
<li>VP of Sales</li>
</ul>
</li>
</ul>
<!-- The container for the rendered chart -->
<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() {
$("#org-data").jOrgChart({
chartElement : '#chart-container'
});
});
</script>
</body>
</html>
Save this file as mychart.html, ensure jquery.jOrgChart.js and jquery.jOrgChart.css are in the correct paths, and open it in your browser. You should see your first interactive organization chart!