Basic Usage - OrgChart JS | BALKANGraph

OrgChart JS is a powerful widget which allows you to visualize and edit nodes. It provides a variety of options about how to present and perform operations over the underlying data. author(s): BALKAN Software Plamen Peshev

by denvit

HTML

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>

<div id="tree"></div>

CSS

html,
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#tree {
  width: 100%;
  height: 100%;
  font-family: 'Open Sans', cursive;
}

/*partial*/
.node.NOK rect {
    fill: #32CD32;
}

.node.OK rect {
    fill: #039BE5;
}

.node.PROD rect {
    fill: #FF1919;
}

.img_0 {
  width: 200px;
  height: 120px;
}

JavaScript

window.onload = function() {
	var nodes = [{
        id: 1,
        name: "Denny Curtis",
        title: "CEO",
        img: "https://balkangraph.com/js/img/2.jpg"
      },
      {
        id: 2,
        pid: 1,
        name: "Ashley Barnett",
        title: "Sales Manager",
        img: "https://balkangraph.com/js/img/3.jpg"
      },
      {
        id: 3,
        pid: 1,
        name: "Caden Ellison",
        title: "Dev Manager",
        img: "https://balkangraph.com/js/img/4.jpg"
      },
      {
        id: 4,
        pid: 2,
        name: "Elliot Patel",
        title: "Sales",
        img: "https://balkangraph.com/js/img/5.jpg"
      },
      {
        id: 5,
        pid: 2,
        name: "Lynn Hussain",
        title: "Sales",
        img: "https://balkangraph.com/js/img/6.jpg"
      },
      {
        id: 6,
        pid: 3,
        name: "Tanner May",
        title: "Developer",
        img: "https://balkangraph.com/js/img/7.jpg"
      },
      {
        id: 7,
        pid: 3,
        name: "Fran Parsons",
        title: "Developer",
        img: "https://balkangraph.com/js/img/8.jpg"
      }
    ];
    
    for (var i = 0; i < nodes.length; i++) {
        var node = nodes[i];
        switch (node.title) {
            case "CEO":
                node.tags = ["NOK"];
                break;
            case "Developer":
            		node.tags = ["OK"];
                break;
            case "Sales":
            		node.tags = ["PROD"];
                break;
        }
    }

  var chart = new OrgChart(document.getElementById("tree"), {
    enableSearch: false,
    onClick: function(sender, node) {
      window.location.replace("https://jsfiddle.net/");
      return false; //cancel nodeMouseClick action
    },
    enableDragDrop: false,
    toolbar: false,
    nodeBinding: {
      field_0: "name",
      field_1: "title",
      img_0: "img",
    },
    nodes: nodes    
  });
};