jquery organization chart - pan & zoom

orgchart plugin is a simple and direct jquery solution for orgchart or any other tree-like charts

by mrjordy

HTML

<script src="https://rawgit.com/dabeng/OrgChart/master/dist/js/jquery.orgchart.js"></script>
<div id="chart-container"></div>

<a id="github-link" href="https://github.com/dabeng/OrgChart" target="_blank"><i class="fa fa-github-square"></i></a>

CSS

#github-link {
  position: fixed;
  top: 0px;
  right: 10px;
  font-size: 3em;
  color: #fff;
}

.orgchart {
  background: rgba(0, 0, 0, 0.5);
}

.orgchart .node .title {
  background-color: #fff;
  color: #000;
}

.orgchart .node .content {
  border-color: transparent;
  border-top-color: #333;
}

.orgchart .node:hover {
  background-color: rgba(255, 255, 0, 0.6);
}

.orgchart .node.focused {
  background-color: rgba(255, 255, 0, 0.6);
}

.orgchart .node .edge {
  color: rgba(0, 0, 0, 0.6);
}

.orgchart .edge:hover {
  color: #000;
}

.orgchart td.left,
.orgchart td.top,
.orgchart td.right {
  border-color: #fff;
}

.orgchart td>.down {
  background-color: #fff;
}

JavaScript

(function($) {
  $(function() {
    var ds = {
      'name': 'Lao Lao',
      'title': 'general manager',
      'children': [
        { 'name': 'Bo Miao', 'title': 'department manager' },
        { 'name': 'Su Miao', 'title': 'department manager',
          'children': [
            { 'name': 'Tie Hua', 'title': 'senior engineer' },
            { 'name': 'Hei Hei', 'title': 'senior engineer',
              'children': [
               { 'name': 'Pang Pang', 'title': 'engineer' },
               { 'name': 'Xiang Xiang', 'title': 'UE engineer' }
              ]
            }
          ]
        },
        { 'name': 'Hong Miao', 'title': 'department manager' },
        { 'name': 'Chun Miao', 'title': 'department manager' }
      ]
    };

    $('#chart-container').orgchart({
      'data' : ds,
      'nodeContent': 'title',
      'pan': true,
      'zoom': true
    });

  });
})(jQuery);