Create Organizational Chart with Pure JavaScript – js-orgChart-2

Preview:

Description:

A multi-purpose JavaScript library that lets you generate a highly customizable organizational chart on your web page. You can find more interactive examples in the zip.

How to use it:

Load the js-orgchart-2.js JavaScript library in the html page.

<script src="path/to/js-orgchart-2.js"></script>

Create an empty element that will serve as the container for your organizational chart.

<div id="orgchart"></div>

Create params for the organizational chart.

var chartParams = {
    options: {
        top: 12,
        left: 12,
        line: {
          size: 2,
          color: "#3388dd"
        },
        node: {
          width: 128,
          height: 128,
          maxWidth: 128,
          maxHeight: 128,
          template: "<div id=\"{id}\"><img class=\"node-image\" src=\"images/avatar/{imgAvatar}\" /></div>"
        }
    },
    event: {
        node: {
          onProcess: function(node, nodes) {
              console.log("node.onProcess");
          },
          onClick: function() {
              console.log("node.onClick");
          },
          onMouseMove: function() {
              console.log("node.onMouseMove");
          },
          onMouseOver: function() {
              console.log("node.onMouseOver");
          },
          onMouseOut: function() {
              console.log("node.onMouseOut");
          }
        },
        onCreate: function() {
          console.log("onCreate");
        },
        onError: null,
        onFinish: function() {
          console.log("onFinish");
        }
    },
    nodes: pOrgNodes
};

Create OrgChartV2.

var pChart = new OrgChartV2(chartParams);

Initialization.

pChart.render();