GetOrgChart Expanding nodes in IE

Question

I have an issue in IE and Edge where the nodes expand on top of the currently displayed chart.

This behavior is only in IE and Edge, Chrome and Firefox display the chart as expected.

var peopleElement = document.getElementById("people");
            var orgChart = new getOrgChart(peopleElement, {

            theme: "monica",
            primaryFields: ["Name", "Title", "Department", "Office", "Email", "Phone", "Mobile"],
            photoFields: ["Image"],
            enableEdit: false,
            enableSearch: true,
            enableMove: true,
            enablePrint: false,
            enableZoomOnNodeDoubleClick: true,
            layout: getOrgChart.MIXED_HIERARCHY_RIGHT_LINKS,
            expandToLevel: 2,
            dataSource: source

Answer 1

Fixed in version 2.5.2

This issue is caused in the following getOrgChart function:

getOrgChart.util._5 = function (a) {
  var b = a.getAttribute("transform");
  // Chome/FireFox value: matrix(1,0,0,1,265,100)
  // IE value: matrix(1 0 0 1 265 100)
  b = b.replace("matrix", "").replace("(", "").replace(")", "");
  b = getOrgChart.util._zJ(b);
  b = "[" + b + "]";
  // Chrome/Firefox value: [1,0,0,1,265,100]
  // IE Value: [1 0 0 1 265 100]
  b = JSON.parse(b);
  return b
}

The missing commas cause JSON to fail when parsing the array. Replace the function with the following code and it should work.

getOrgChart.util._5 = function (a) {
  var b = a.getAttribute("transform");
  // replace all spaces with commas to ensure compatibility in IE
  b = b.replace("matrix", "").replace("(", "").replace(")", "").replace(/ /g, ",");
  b = getOrgChart.util._zJ(b);
  b = "[" + b + "]";
  b = JSON.parse(b);
  return b
};