Generating Org Charts with Balkan OrgChart JS

Ask us anything How do I?
1

Looking for some guidance on this. In my Xano database I have a table with Users and their managers. I’m looking at dynamically generating Org Charts for any tenant organization using these relationships.

I found an interesting tool called Balkan Org Charts which allows you to really easily generate OrgCharts by including their JS function, I have verified this works in WeWeb

image
image1286×628 37.7 KB

image
image1208×712 9.41 KB

To generate the Org Chart, I need to generate the nodes that you see in the code below, but with my own data.

    <script>
        var chart = new OrgChart(document.getElementById("tree"), {
            nodeBinding: {
                field_0: "name"
            },
            nodes: [
                { id: 1, name: "Amber McKenzie" },
                { id: 2, pid: 1, name: "Ava Field" },
                { id: 3, pid: 1, name: "Peter Stevens" }  
            ]
        });
    </script>

Any idea on how I can query my database and generate this code in weweb to pull this off?