BALKANGraph / OrgChartJS

OrgChart JS is a simple, flexible and highly customizable organization chart plugin for presenting the structure of your organization and the relationships in an elegant way.
https://balkan.app/orgchartjs
252 stars 84 forks source link

Parent can make relation #618

Closed rahmanrezaee closed 2 years ago

rahmanrezaee commented 3 years ago

image

rahmanrezaee commented 3 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);
}
ZornitsaPesheva commented 3 years ago

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