OrgChart JS

OrgChart JS | BALKANGraph

by denvit

HTML

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

CSS

html, body {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            overflow: hidden;
            text-align: center;
            font-family: Helvetica;
        }

        #tree {
            width: 100%;
            height: 100%;
            position: relative;
        }

JavaScript

var chart = new OrgChart(document.getElementById("tree"), {   
            collapse: {
                level: 3
            },
            nodeBinding: {
                field_0: "id",
                field_1: "pid",
            },
            nodes: [
                { id: 1},
                { id: 2, pid: 1},
                { id: 3, pid: 1},
                { id: 4, pid: 2},
                { id: 5, pid: 2},
                { id: 6, pid: 3},
                { id: 7, pid: 3},
                { id: 8, pid: 3},
                { id: 9, pid: 3},
                { id: 10, pid: 4},
                { id: 11, pid: 4},
            ]
        });