Templates - OrgChart JS | BALKANGraph

OrgChart JS predefined templates demo. author(s): BALKAN Software Plamen Peshev

by denvit

HTML

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

<select style="position: absolute;right: 30px;top: 30px;color: #7a7a7a;font-size: 14px;padding: 10px;background-color: #F57C00;color: #ffffff;width: 100px;z-index:2;" id="selectTemplate">
    <option>luba</option>
    <option>olivia</option>
    <option>derek</option>
    <option>diva</option>
    <option>mila</option>
    <option>polina</option>
    <option>mery</option>
    <option>rony</option>
    <option>belinda</option>
    <option>ula</option>
    <option>ana</option>
    <option>isla</option>
</select>

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

CSS

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

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

JavaScript

window.onload = function () {
    var chart = new OrgChart(document.getElementById("tree"), {
        template: "luba",
        layout: OrgChart.mixed,
        nodeBinding: {
            field_0: "name",
            field_1: "title",
            img_0: "img"
        },
        nodes: [
            { id: "1", name: "Jack Hill", title: "Chairman and CEO", email: "[email protected]", img: "https://balkangraph.com/js/img/1.jpg" },
            { id: "2", pid: "1", name: "Janae Barrett", title: "Technical Director", img: "https://balkangraph.com/js/img/3.jpg" },
            { id: "3", pid: "1", name: "Aaliyah Webb", title: "Manager", email: "[email protected]", img: "https://balkangraph.com/js/img/4.jpg" },
            { id: "4", pid: "1", name: "Elliot Ross", title: "QA", img: "https://balkangraph.com/js/img/5.jpg" },
            { id: "6", pid: "1", name: "Anahi Gordon", title: "QA", img: "https://balkangraph.com/js/img/6.jpg" },
            { id: "7", pid: "1", name: "Knox Macias", title: "QA", img: "https://balkangraph.com/js/img/7.jpg" },
            { id: "8", pid: "1", name: "Nash Ingram", title: ".NET Team Lead", email: "[email protected]", img: "https://balkangraph.com/js/img/8.jpg" },
            { id: "9", pid: "1", name: "Sage Barnett", title: "JS Team Lead", img: "https://balkangraph.com/js/img/9.jpg" },
            { id: "10", pid: "1", name: "Alice Gray", title: "Programmer", img: "https://balkangraph.com/js/img/10.jpg" },
            { id: "11", pid: "1", name: "Anne Ewing", title: "Programmer", img: "https://balkangraph.com/js/img/11.jpg" }
        ]
    });
    document.getElementById("selectTemplate").addEventListener("change", function () {
        chart.config.template = this.value;
        chart.draw();
    });
}