Fields

There are two types of fields, node fields and link fields, you can define unlimeted number of fields. To do that you have to override the template.

Node text fields

In the following example we are going to demonstrate how to add four text fields. Define 4 fields in the template:

 
      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>';
  
    

Then define the binding:

 
 var chart = new OrgChart(document.getElementById("tree"), {
        nodeBinding: {
            field_0: "name",
            field_1: "title",
            field_2: "phone",
            field_3: "email"
        },
    ...
});
    

Here is the result:

Edit in BALKAN Code

Note that the email in the last node is missing, the fields are not mandatory in the JSON object.

Node image fields

In the following example we are going to demonstrate how to add two image fields. Define two fields in the template:

 
     OrgChart.templates.ana.img_0 = 
        '<image preserveAspectRatio="xMidYMid slice" xlink:href="{val}" x="20" y="-15" width="80" height="80"></image>';
     OrgChart.templates.ana.img_1 = 
        '<image preserveAspectRatio="xMidYMid slice" xlink:href="{val}" x="150" y="-15" width="80" height="80"></image>';

    

Then define the binding:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        nodeBinding: {
            field_0: "name",
            img_0: "photo1",
            img_1: "photo2",
        },    
        ...
    });
    

Edit in BALKAN Code

Node SVG fields

The nodes are not limited to text and image fileds, you can define any svg element as field. In the following example we are going to demonstrate how to add webcall.me, linkedin and facebook icons with links. Define 3 fields in the template:

 
    OrgChart.templates.olivia.webcallMe = '<g transform="matrix...';
    OrgChart.templates.olivia.linkedIn = '<g transform="matrix...';
    OrgChart.templates.olivia.facebook = '<g transform="matrix...';
    

Then define the binding:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        nodeBinding: {
            field_0: "name",
            webcallMe: "webcallMe",
            linkedIn: "linkedIn",
            facebook: "facebook"
        },      
        ...
    });
    

Here is the result:

Edit in BALKAN Code

Node HTML fields

In some cases you will need to add HTML tags inside the node.

In the following example we are going to demonstrate how to add HTML tags into the html. Define new field in the template:

 
     OrgChart.templates.ana.html = 
        '<foreignobject class="node" x="10" y="10" width="200" height="100">{val}</foreignobject>';

    

Then define the binding:

 
    var chart = new OrgChart(document.getElementById("tree"), {
        nodeBinding: {
            field_0: "name",
            html: "html"
        },
        ...
    });
    

Here is the result:

Edit in BALKAN Code

Another example could be if spefic css property is not supported in SVG, the demo below demostrates how to flip nodes with perspective css property:

Edit in BALKAN Code

Link text field

Adding clickable link with that will open another page. Here is an example:

 
     chart.on('field', function(sender, args){
       	var name = args.data["name"];
        var link = args.data["link"];
   		args.value = '<a target="_blank" href="' + link + '">' + name +  '</a>';
    });
    

Edit in BALKAN Code

Labels

Also you can add link labels. Here is an example:

 
    var  chart = new  OrgChart(document.getElementById("tree"), {
        linkBinding: {
            link_field_0: "createdAt"
        },    
        ...
    });
    

Edit in BALKAN Code