OrgChart JS lets developers to create simple, flexible and highly customizable organization chart for presenting structural data in an elegant way.

System requirements
OrgChart JS runs on any server that supports HTML. You can even run OrgChart.js locally from a filesystem.

OrgChart JS does not depend on any third party jаvascript library.

OrgChart JS works in all modern browsers and uses SVG for the graphics rendering.

OrgChart JS support the following export formats:

PDF - A PDF file can be viewed, shared, and printed on any platform provided that users have Adobe Acrobat, Adobe Reader, or a PDF-compatible reader installed on their computers. A PDF file can also be uploaded to an intranet or the Web. You can also export an individual node with his children or an entire OrgChart JS to a PDF file.
PNG - A PNG file is an image file stored in the Portable Network Graphic (PNG) format. It contains a bitmap of indexed colors and uses lossless compression, similar to a .GIF file but without copyright limitations. PNG files are commonly used to store graphics for web images.
SVG - SVG images and their related behaviors are defined in XML text files which means they can be searched, indexed, scripted and compressed. Additionally this means they can be created and edited with any text editor and with drawing software.
CSV - A Comma Separated Values (CSV) file is a plain text file that contains a list of data. These files are often used for exchanging data between different applications. For example, databases and contact managers often support CSV files.

OrgChart JS visual components
You can change the look and feel of the following OrgChart JS components.

Node
Fields
Image
Link
Node menu button
Expand/Collapse button
Export menu button
Move icon


Installation
Unzip the file and add it to you root directory.
In your html document between the head tags include the code bellow, and then OrgChart.js will be installed.

<script src="www.[yourdomain].com/OrgChart.js"></script>

Your first OrgChart JS project
With OrgChart.js included in your webpage you are ready to create your first OrgChart JS.

Add a div in your webpage. Give it an id and set a specific width and height which will be the width and height of your OrgChart.

<div style="width:100%; height:700px;" id="orgchart"/>

Add script tags anywhere in a webpage, containing the following code:

    <script>
        var chart = new OrgChart(document.getElementById("orgchart"), {
            nodeBinding: {
                field_0: "name"
            },
            nodes: [
                { id: 1, name: "Amber McKenzie" },
                { id: 2, pid: 1, name: "Ava Field" },
                { id: 3, pid: 1, name: "Peter Stevens" }
            ]
        });
    </script>