SampleCode - OrgChart JS

by Nayana Das

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

JavaScript

window.onload = function () {

function callHandler() {
		console.log("inside call")
       // var nodeData = chart.get(nodeId);
        //var employeeName = nodeData["name"];
        window.open('https://www.google.com/maps','_blank');
}

function deleteHandler() {
		console.log("delete call")
    alert("Do u want to delete?")   
}


    var chart = new OrgChart(document.getElementById("tree"), {
    		//mouseScrool: OrgChart.action.none,
        template: "olivia",        
        enableDragDrop: true,
        nodeMenu: {
            //details: { text: "Details" },
            //edit: { text: "Edit" },
            //add: { text: "Add" },
            details: {
                    text: "Create"
                },
            remove: { text: "Delete" },
            
        },
        nodeContextMenu: {
        		//edit: { text: "Edit", icon: OrgChart.icon.edit(18, 18, '#039BE5')  },
            
            details: { text: "Create", //icon: OrgChart.icon.add(18, 18, '#FF8304'), onClick: callHandler 
            },
            remove: { text: "Delete", onClick: deleteHandler //icon: OrgChart.icon.edit(18, 18, '#039BE5')  
            },
        },
        dragDropMenu: {
            addInGroup: { text: "Add in group" },
            addAsChild: { text: "Add as child" }
        },
        menu: {
            pdf: { text: "Export PDF" },
            png: { text: "Export PNG" },
            svg: { text: "Export SVG" },
            csv: { text: "Export CSV" }
        },
        nodeBinding: {
            field_0: "name",
            field_1: "title",
            img_0: "img"
        },
        nodes: [
            { id: 1, name: "Billy Moore", title: "CEO", img: "https://cdn.balkan.app/shared/2.jpg" },  
            { id: 2, pid: 1, name: "Billie Rose", title: "Dev Team Lead", img: "https://cdn.balkan.app/shared/5.jpg" },
            { id: 3, pid: 1, name: "Glenn Bell", title: "HR", img: "https://cdn.balkan.app/shared/10.jpg" },
            { id: 4, pid: 1, name:...