Links - OrgChart JS | BALKANGraph

Links and Link Labels. author(s): BALKAN Software Plamen Peshev

by Serhii Matrunchyk

HTML

<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%;
}

JavaScript

window.onload = function () {
        
    OrgChart.templates.mila.defs = '<marker id="arrow" viewBox="0 0 2 3" refX="10" refY="2" markerWidth="10" markerHeight="10" orient="auto-start-reverse"><line x1="0" y1="0" x2="0" y2="3" stroke="black" /><line x1="2" y1="0" x2="2" y2="3" stroke="black" /></marker><marker id="dotBlue" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5"> <circle cx="5" cy="5" r="5" fill="#039BE5" /></marker>';
 OrgChart.templates.mila.link = '<path marker-start="url(#dotBlue)" marker-end="url(#arrow)"   stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="M{xa},{ya} {xb},{yb} {xc},{yc} L{xd},{yd}" />';
 
 OrgChart.templates.mila.link_field_0 = '<text text-anchor="middle" fill="#039BE5" width="290" x="0" y="0" style="font-size:12px;">{val}</text>';
 
 
     var chart = new OrgChart(document.getElementById("tree"), {
         template: "mila",
         nodeBinding: {
             field_0: "name",
             field_1: "title",
             img_0: "img"
         },
         linkBinding: {
             link_field_0: "createdAt"
         },
         nodes: [
         { id: 1, name: "Denny Curtis", title: "CEO", img: "https://cdn.balkan.app/shared/2.jpg" },
         { id: 2, pid: 1, createdAt: "Since 08/08/2018", name: "Ashley Barnett", title: "Sales Manager", img: "https://cdn.balkan.app/shared/3.jpg" },
         { id: 3, pid: 1, createdAt: "Since 05/04/2018", name: "Caden Ellison", title: "Dev Manager", img: "https://cdn.balkan.app/shared/4.jpg" }
     ]    
   });
 };