make orgchart in oracle apex using pl sql dynamic content - plsql

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 internet I got JavaScript based orgchart sourcehere ,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;