SampleCode2 - OrgChart JS- AIMSjson

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: "AIMS", title: "A_Block"},  
            { id: 2, pid: 1, name: "RS_oncology", title: "Oncology", type: "RS"},
            { id: 3, pid: 1, name: "RS_Radiology", title: "Radiology"},
            { id: 4, pid: 1, name: "RS_Rectina", title: "Rectina Clinic"},

            { id: 5, pid: 3, name: "Roaster_101", title: "RAD_roaster1"},
          ...