BALKAN OrgChartJS

• Added new event

chart.on('field', function(sender, args){    
    //args.element - svg element of the filed, can be changed in the event
    //args.value - value of the filed, can be changed in the event
    //args.name - name of the field
    //args.node - the node
    //args.data - node data json object

   //return false; to hide the filed in specified node
});

• Field functions will be depreciate in future releases, the code bellow will not work:

    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>'
            }
        },
        ...
    });

OrgChart JS

• Fixed - Set as root and search issue

OrgChart JS

• Fixed an issue with empty chart, the user was not able to add first chart
• Fixed an issue with duplicated slink labels

OrgChart JS

• Fixed an issue with layouts

OrgChart JS

• new event "layout": Change the layout with condition

Usage:

OrgChart.events.on('layout', function (args) {    
    if (args.pnode.id == 100){
        args.layout = OrgChart.treeLeftOffset;
    }    
    else if (args.pnode.id == 200){
        args.layout = OrgChart.tree;
    }
    else if (args.pnode.id == 300) {
        args.layout = OrgChart.treeRightOffset;
    }
    else if (args.pnode.id == 400) {
        args.childrenIds = ["401", "402"];
    }
    else if (args.pnode.id == 500) {
        args.layout = OrgChart.normal;
    }
});

Demo:
https://jsfiddle.net/BALKANGraph/wecvfojn/

OrgChart JS

• new const OrgChart.FIXED_POSITION_ON_CLICK - when it is true the chart is not moving on expand

OrgChart JS

• fixed labels

OrgChart JS

• minor fix

OrgChart JS

• new method: chart.magnify(id, scale, front, anim, callback)
• new method: chart.magnifyBack(id, anim, callback)

Demo: https://jsfiddle.net/BALKANGraph/1pcog5y6/

Signature: chart.magnify(id, scale, front, anim, callback)

• id: is the node id we want to highlight or magnify
• scale: scale of the magnified node
• front: true or false, display magnified node in front of other nodes if it is true
• anim: animation effect for the magnified node, if not set the default is chart.config.anim
• callback: callback function before the animation start

Signature: chart.magnifyBack(id, anim, callback)

• id: is the node id we want to highlight or magnify
• anim: animation effect for the magnified node, if not set the default is chart.config.anim
• callback: callback function after the animation ends

OrgChart JS

• Fixed subLevels with mixed layouts