This is a work in progress of that implementation. We’re able to use record values dynamically to load into the Org Chart. The node connection is all coming from a single table with 3 additional fields.
We save the Record ID when records are created, and we also save the Record ID for the Parent Node. These fields are then referenced in the JavaScript to populate the Org Chart (thanks for the code @moe).
Overall, it’s not a super complicated implementation. Hopefully others here will find it useful and hopefully this concept can get built a bit more. I will update any progress here.
If people are interested, I’ll make a video on how to set this all up.
Top class Tim !! fantastic feature. I’ll be looking at using your solution in more detail with a view to applying to supply chain shared risk register which im currently building.
Has anyone managed to get the org charts up and running?
Tim - I was wondering if your setup video is available, I could do with some guidance on this one.
Oh no, thats a shame. The org chart feature would open up whole new dimension of opportunities beucase of the number of ways you could apply it. The org chart can be used fir its intended purpose but also it can be expanded for visual performance reporting against KPIs for example etc… If you and Tim had a go and couldnt get it up and running, means I would have no chance so not worth me trying i guess.
I do vaguely remember setting this up but it’s definitely a half-finished solution. My apologies for that.
Since we’ve release the Custom Component since this original post was made, there’s likely a much better way to implement this.
I’d love to find some time to revisit this but it’s not something I can prioritize at the moment. If you’d like, DM me your TB account email and I’d be happy to share the app with you.
I appreciate the follow up however I am also pressed for time on this option. However, I will send you a DM so I can review the app once I get some free time.
I wanted an Org Chart too last night. I looked at this approach but tried using the Google Org Chart (which is free) and, after much trial and error and with dogged persistence, I made it work in a Custom Component, based on a the User Table.
The three columns of data are Name, Manager (field_1569 in my App), and Tooltip (I have this one blank at present)
You need to call the script in inside the Javascript tab. <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
Otherwise the rest is in the Template tab.
<!DOCTYPE html>
<p id="xorg" style="display:none;"> [
{{#each records}}
["{{name}}","{{field_1569}}",""],
{{/each}}
["", "", ""]]</p>
<script>
google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
// For each orgchart box, provide the name, manager, and tooltip to show.
var element = document.getElementById("xorg").innerText
console.log(element);
data.addRows(JSON.parse(element));
// Create the chart.
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
// Draw the chart, setting the allowHtml option to true for the tooltips.
chart.draw(data, {'allowHtml':true});
}
</script>
<div id="chart_div"></div>
) asked about implementing an Org Chart for use with their app’s records. This is the Org Chart here 
https://balkan.app/OrgChartJS/Docs/GettingStarted
Thanks for sharing 
