make orgchart in oracle apex using pl sql dynamic content

Question

Hello all hope you all will be fine. I am working on oracle apex and I want to make an organization chart.after exploring inte.net I got JavaScript based orgchart source here ,but I want to make chart query based and got succeed here is code

declare
cursor c1 is 
select m.srno,t.empname,t.desig,m.parent_id,t.phone,t.email

 from table1 m ,table2 t,table3 p 
     where t.pk=m.fk
     and p.cond=m.cond;
Begin
for i in c1 loop 

htp.p('<div id="tree"/>');
Htp.p('
<script src="https://balkan.app/js/OrgChart.js"></script>
<script>
OrgChart.templates.ana.field_0 = ''<text class="field_0" style="font-size: 20px;" fill="#ffffff" x="125" y="30" text-anchor="middle">{val}</text>'';
OrgChart.templates.ana.field_1 = ''<text class="field_1"  style="font-size: 14px;" fill="#ffffff" x="125" y="50" text-anchor="middle">{val}</text>'';
OrgChart.templates.ana.field_2 = ''<text class="field_2"  style="font-size: 14px;" fill="#ffffff" x="125" y="70" text-anchor="middle">{val}</text>'';
OrgChart.templates.ana.field_3 = ''<text class="field_3"  style="font-size: 14px;" fill="#ffffff" x="125" y="90" text-anchor="middle">{val}</text>'';
var chart = new OrgChart(document.getElementById("tree"), {
    mouseScrool: OrgChart.action.none,
    template: "ana",
    enableSearch: false,
    nodeBinding: {
        field_0: "Name",
        field_1: "Designation",
        field_2: "phone",
        field_3: "email"
    },
  
    nodes: [
    
        { id: "'||i.srno||'", Name: "'||i.empname||'", Designation: "'||i.desig||'", phone: "'||i.phone||'", email: "'||i.mail||'" }
    ]
});
</script>');
End Loop;
end;

But problem is that it is showing only node. where is the issue??

Answer 1

Haven't tested but this seems wrong. The loop is outside of the div - that would mean you're expecting one div per node. In the example code it is showing

    nodes: [
        { id: "1", name: "Amber McKenzie", title: "CEO", phone: "878 108 255", email: "amber.mcKenzie@gmail.com" },
        { id: "2", pid: "1", name: "Ava Field", title: "IT Manager", phone: "554 484 126", email: "ava.field@live.com" },
        { id: "3", pid: "1", name: "Peter Stevens", title: "HR Manager", phone: "897 112 444" }
    ]

so it is expecting an array of nodes. I'd think you need something like this (untested, but you'll get the point)

declare
cursor c1 is 
select m.srno,t.empname,t.desig,m.parent_id,t.phone,t.email

 from table1 m ,table2 t,table3 p 
     where t.pk=m.fk
     and p.cond=m.cond;
Begin
htp.p('<div id="tree"/>');
Htp.p('
<script src="https://balkan.app/js/OrgChart.js"></script>
<script>
OrgChart.templates.ana.field_0 = ''<text class="field_0" style="font-size: 20px;" fill="#ffffff" x="125" y="30" text-anchor="middle">{val}</text>'';
OrgChart.templates.ana.field_1 = ''<text class="field_1"  style="font-size: 14px;" fill="#ffffff" x="125" y="50" text-anchor="middle">{val}</text>'';
OrgChart.templates.ana.field_2 = ''<text class="field_2"  style="font-size: 14px;" fill="#ffffff" x="125" y="70" text-anchor="middle">{val}</text>'';
OrgChart.templates.ana.field_3 = ''<text class="field_3"  style="font-size: 14px;" fill="#ffffff" x="125" y="90" text-anchor="middle">{val}</text>'';
var chart = new OrgChart(document.getElementById("tree"), {
    mouseScrool: OrgChart.action.none,
    template: "ana",
    enableSearch: false,
    nodeBinding: {
        field_0: "Name",
        field_1: "Designation",
        field_2: "phone",
        field_3: "email"
    },
  
    nodes: [
';


for i in c1 loop 
htp.p('{ id: "'||i.srno||'", Name: "'||i.empname||'", Designation: "'||i.desig||'", phone: "'||i.phone||'", email: "'||i.mail||'" }');
End Loop;
htp.p('
    ]
});
</script>');
end;