Hi Tada Community!
Need some help. I’d like to integrate a dynamic organization chart component into an application. Specifically, the picture below represents the design that would be the targeted end result.
Any ideas?
Thanks much,
Adam
How do you have this data structured in your app?
Let’s say you have it all as simple list like this for example (left side), you can use this Javascript library to do this:
They have a lot of options and settings, so might be worthwhile looking into it.
To do the example above, I have the following code:
On the page with the chart I added an HTML component with the following custom code:
<ul id="ul-data">
<li>Lao Lao
<ul>
<li>Bo Miao</li>
<li>Su Miao
<ul>
<li>Tie Hua</li>
<li>Hei Hei
<ul>
<li>Pang Pang</li>
<li>Xiang Xiang</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<div id="chart-container"> </div>
In the Javascript of the page, I added this:
var flag = false;
function checkFlag() {
if(flag === false) {
if ($('#x_element_page_6_3') !== null) {
flag = true;
}
window.setTimeout(checkFlag, 100);
} else {
var orgLimit = 140;
$(function() {
$('#chart-container').orgchart({
'data' : $('#ul-data')
});
});
}
}
checkFlag();
In the header section of the app:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.10/css/jquery.orgchart.css">
In the footer section:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.10/js/jquery.orgchart.min.js"></script>
I can’t think of a way to do this dynamically with data from the database though.
Here’s a link to that repo/library:
https://dabeng.github.io/OrgChart/