Closed rahmanrezaee closed 2 years ago
window.onload = function () {
var chart = new OrgChart(document.getElementById("tree"), {
nodeMouseClick: OrgChart.action.none,
nodeBinding: {
field_0: "name",
field_1: "title",
img_0: "img"
},
tags: {
ula: {
template: "ula"
}
}
});
nodes = [
{
"id": 1,
"tags": ["blue"],
"name": "King George VI",
"title": "Grand Father(Father)",
"serverId": "",
"img": "https://cdn.balkan.app/shared/f1.png"
},
{
"id": 2,
"pid":1,
"tags": ["partner"],
"name": "Queen Elizabeth",
"title": "Grand Mother(Father)",
"serverId": "",
"img": "https://cdn.balkan.app/shared/f2.png"
},
{
"id": 3,
"tags": ["blue"],
"name": "King George VI",
"title": "Grand Father(Mother)",
"serverId": "",
"img": "https://cdn.balkan.app/shared/f1.png"
},
{
"id": 4,
"pid":3,
"tags": ["partner"],
"name": "Queen Elizabeth",
"title": "Grand Mother(Mother)",
"serverId": "",
"img": "https://cdn.balkan.app/shared/f2.png"
},
{
"id":5,
"pid": 1,
"tags": ["bottom-partner"],
"ppid":2,
"serverId": "",
"name": "Father",
"title": "Father",
"img": "https://cdn.balkan.app/shared/f1.png"
},
{
"id":6,
"pid": 5,
"tags": ["partner"],
"ppid": 4,
"serverId": "",
"name": "Mother",
"title": "Mother",
"img": "https://cdn.balkan.app/shared/f2.png"
},
{
"id":7,
"pid":5,
"ppid":6,
"tags": ["blue"],
"serverId": "",
"name": "Me",
"title": "Me",
"img": "https://cdn.balkan.app/shared/f1.png"
},
];
chart.on('click', function(sender, args){
var data = sender.get(args.node.id);
console.log(data);
});
chart.load(nodes);
}
This is possible with our new product FamilyTree.js (still Beta):
https://balkan.app/js/FamilyTree.js https://www.npmjs.com/package/@balkangraph/familytree.js