File: /home/imensosw/www/imenso.co/demo/org-chart/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>org-chart</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="../lib/tree_maker-min.css">
<script type="text/javascript" src="../lib/tree_maker-min.js"></script> -->
<link rel="stylesheet" href="style/tree_maker.css">
<script type="text/javascript" src="src/tree_maker.js"></script>
<link rel="stylesheet" href="style/bootstrap.min.css">
</head>
<body>
<section class="main">
<div class="action-btn">
<div class="d-flex justify-content-end">
<div class="zoom zoomin">
<img src="images/zoom.svg" />
<input type="hidden" id="zoomin_input" value="1">
</div>
<div class="zoom zoomreset">
<img src="images/zoom.svg" />
</div>
<div class="zoom zoomout">
<img src="images/zoom.svg" />
<input type="hidden" id="zoomin_out" value="1">
</div>
<div class="mr-4">
<select class="form-control">
<option>Role</option>
</select>
</div>
<div>
<button class="btn btn-primary btn-block" id="btn"><img src="images/pdf.svg" class="pdf-icon mr-2" /> Export PDF</button>
</div>
</div>
</div>
<div class="slidecontainer">
<input type="range" id="myRange" class="slider" min="-100" max="100" style="background-color: #00aec8;">
</div>
<div id="downloadable">
<div class="header">
<div class="container-fluid">
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<div class="brand-logo mr-3">
<img src="images/logo-adib.png">
</div>
<h1 class="mb-0 border-left pl-3">Organisation Chart</h1>
<a href="#" class="btn btn-secondary ml-3">Import File</a>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div id="my_tree"></div>
</div>
</div>
</section>
<!-- <div class="export-filter">
<div class="container-fluid">
<div class="d-flex justify-content-end">
<div class="mr-4">
<select class="form-control">
<option>Role</option>
</select>
</div>
<div>
<button class="btn btn-primary btn-block" id="btn"><img src="images/pdf.svg" class="pdf-icon mr-2" /> Export PDF</button>
</div>
</div>
</div>
</div> -->
<script src="js/jquery.min.js"></script>
<script src="js/html2canvas.js"></script>
<script src="js/jspdf.debug.js"></script>
<script src="js/custom.js"></script>
<script>
$(function() {
var tree = {
1: {
2: '',
3: {
6: {
8:
{9: '',
},
},
7: '',
},
4: '',
5: ''
},
};
var treeParams = {
1: {trad: '<span class="nm">Olive Yew</span> <span class="dgn">CEO</span> <span class="code">11023020</span>'},
2: {trad: '<span class="nm">Aida Bugg</span> <span class="dgn">Sals Manager</span> <span class="code">11023020</span>'},
3: {trad: '<span class="nm">Maureen Biologist</span> <span class="dgn">Hr Manager</span> <span class="code">11023020</span>'},
4: {trad: '<span class="nm">Teri Dactyl</span> <span class="dgn">Marketing Manager</span> <span class="code">11023020</span>'},
5: {trad: '<span class="nm">Peg Legge</span> <span class="dgn">Opeation Manager</span> <span class="code">11023020</span>'},
6: {trad: '<span class="nm">Allie Grater</span> <span class="dgn">Exeutive Officer</span> <span class="code">11023020</span>'},
7: {trad: '<span class="nm">Liz Erd</span> <span class="dgn">Exeutive Officer</span> <span class="code">11023020</span>'},
8: {trad: '<span class="nm">A. Mused</span> <span class="dgn">Exeutive Officer</span> <span class="code">11023020</span>'},
9: {trad: '<span class="nm">Constance Noring</span> <span class="dgn">Jr. Officer</span> <span class="code">11023020</span>'},
};
$.ajax({
method: "GET",
url: "api/data.php",
dataType:'json'
}).done(function(response){
tree = response.tree;
treeParams = response.tree_result;
console.log(treeParams);
showtree();
})
function showtree(){
treeMaker(tree, {
id: 'my_tree', card_click: function (element) {
console.log(element);
},
treeParams: treeParams,
'link_width': '2px',
'link_color': '#2199e8',
});
}
});
</script>
</body>
</html>