Getting Started - OrgChart JS

by Rogério Saraceni

HTML

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

CSS

html, body{
  width: 100%;
  height: 100%;
  padding: 0;
  margin:0;
  overflow: hidden;
  font-family: Helvetica;
}
#tree{
  width:100%;
  height:300px;
  background-color: red;
}

JavaScript

var chart = new OrgChart(document.getElementById("tree"), {
	mouseScrool: OrgChart.action.none,
 			orientation: OrgChart.orientation.left,
            enableSearch: false,
            
            nodeBinding: {
                field_0: "name"
            },
            nodes: [
                { id: 1, name: "box1" },
                { id: 2, pid: 1, name: "box2" },
                { id: 3, pid: 2,name: "box3" },
                { id: 4, pid: 2, name: "box4" },
            ]
        });