Conditional Color - OrgChart JS | BALKANGraph

Conditional formatting quickly highlights important nodes in a OrgChart. author(s): BALKAN Software Plamen Peshev

by Cary Price

HTML

<link href="https://fonts.googleapis.com/css?family=Gochi+Hand" 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;
    font-family: Helvetica;
}

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


/*partial*/
.node rect {
    fill: gray;
}
/*
.node.Dev rect {
    fill: #039BE5;
}

.node.Marketing rect {
    fill: #cccccc;
}*/

JavaScript

window.onload = function () { 
    var 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: "Lexie Cole", title: "QA Lead", email: "[email protected]", img: "https://balkangraph.com/js/img/2.jpg" },
        { id: "3", pid: "1", name: "Janae Barrett", title: "Technical Director", img: "https://balkangraph.com/js/img/3.jpg" },
        { id: "4", pid: "1", name: "Aaliyah Webb", title: "Manager", email: "[email protected]", img: "https://balkangraph.com/js/img/4.jpg" },
        { id: "5", pid: "2", name: "Elliot Ross", title: "QA", img: "https://balkangraph.com/js/img/5.jpg" },
        { id: "6", pid: "2", name: "Anahi Gordon", title: "QA", img: "https://balkangraph.com/js/img/6.jpg" },
        { id: "7", pid: "2", name: "Knox Macias", title: "QA", img: "https://balkangraph.com/js/img/7.jpg" },
        { id: "8", pid: "3", name: "Nash Ingram", title: ".NET Team Lead", email: "[email protected]", img: "https://balkangraph.com/js/img/8.jpg" },
        { id: "9", pid: "3", name: "Sage Barnett", title: "JS Team Lead", img: "https://balkangraph.com/js/img/9.jpg" },
        { id: "10", pid: "8", name: "Alice Gray", title: "Programmer", img: "https://balkangraph.com/js/img/10.jpg" },
        { id: "11", pid: "8", name: "Anne Ewing", title: "Programmer", img: "https://balkangraph.com/js/img/11.jpg" },
        { id: "12", pid: "9", name: "Reuben Mcleod", title: "Programmer", img: "https://balkangraph.com/js/img/12.jpg" },
        { id: "13", pid: "9", name: "Ariel Wiley", title: "Programmer", img: "https://balkangraph.com/js/img/13.jpg" },
        { id: "14", pid: "4", name: "Lucas West", title: "Marketer", img: "https://balkangraph.com/js/img/14.jpg" },
        { id: "15", pid: "4", name: "Adan Travis", title: "Designer", img: "https://balkangraph.com/js/img/15.jpg" },
        { id: "16", pid: "4", name: "Alex Snider", title: "Sales Manager", img:...