I need help creating an organizational flow chart using treant.js. Below is my code snippet, but I'm encountering a 'Raphael is not defined' error that I can't seem to solve. Can someone please assist me with identifying the root cause of this issue?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/treant-js/1.0/Treant.css" integrity="sha256-oihWe0KdtBd8G96a/F7odmMuPQowZ9lsl1LZT7m51GM=" crossorigin="anonymous" />
</head>
<body>
<div onclick="spaLoad()">click</div>
<div id="tree-simple"></div>
<script type="text/javascript">
function spaLoad(){
var xhr = new XMLHttpRequest();
xhr.open("GET","https://api.myjson.com/bins/xf2rt",true);
xhr.send();
xhr.onreadystatechange=function () {
if(xhr.readyState === 4 && xhr.status === 200){
var obj = JSON.parse(xhr.responseText);
var orgChart = new Treant(obj);
}
}
}
</script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/treant-js/1.0/Treant.js" integrity="sha256-znpgHNqR9Hjjydllxj3UCvOia54DxgQcIoacHEXUSLo=" crossorigin="anonymous"></script> -->
<script type="text/javascript" src="Treant.js"></script>
</body>
</html>
JSON file:
{
"chart": {
"container": "#tree-simple"
},
"nodeStructure": {
"text": {
"name": "Parent node"
},
"children": [
{
"text": {
"name": "First child"
}
},
{
"text": {
"name": "Second child"
}
}
]
}
}