Installation Guide

To use jOrgChart, you need to include jQuery and the plugin's JavaScript and CSS files in your HTML page. If you plan to use the drag-and-drop functionality, you will also need to include jQuery UI.

Prerequisites

  1. jQuery: jOrgChart is a jQuery plugin, so the jQuery library is required. You can download it or link to it from a CDN.
  2. jQuery UI (Optional): Required only if you want to enable the dragAndDrop feature.

Step 1: Include CSS

Include the core stylesheet for jOrgChart in the <head> of your HTML document. This file contains the essential styles for rendering the tree lines and basic node layout.

<head>
  <!-- Core jOrgChart CSS -->
  <link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
</head>

Step 2: Include JavaScript

Include the necessary JavaScript libraries before the closing </body> tag. The order is important: jQuery must be included before the jOrgChart plugin.

Basic Setup (without Drag-and-Drop)

For a basic chart, you only need jQuery and the jOrgChart plugin script.

<body>
  <!-- Your chart HTML will go here -->

  <!-- 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>
</body>

Full Setup (with Drag-and-Drop)

If you need drag-and-drop functionality, you must also include the jQuery UI library. Place it after jQuery and before the jOrgChart plugin.

<body>
  <!-- Your chart HTML will go here -->

  <!-- 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="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  <script type="text/javascript" src="jquery.jOrgChart.js"></script>
</body>

With these files included, you are ready to create your HTML data structure and initialize the plugin. See the Quick Start guide for the next steps.