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.
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:
Note that the email in the last node is missing, the fields are not mandatory in the JSON object.
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", }, ... });
Here is the result:
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.luba.webcallMe = '<g transform="matrix...'; OrgChart.templates.luba.linkedIn = '<g transform="matrix...'; OrgChart.templates.luba.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:
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="20" 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:
Adding clickable link with that will open another page. Here is an example:
var chart = new OrgChart(document.getElementById("tree"), { nodeBinding: { field_0: function (sender, node) { var data = sender.get(node.id); var name = data["name"]; var link = data["link"]; return '<a target="_blank" href="' + link + '">' + name + '</a>' } }, ... });
Also you can add link labels. Here is an example:
var chart = new OrgChart(document.getElementById("tree"), { linkBinding: { link_field_0: "createdAt" }, ... });