1

I'm creating an org chart using google's code

    google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        data.addRows([
          [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'}, '', 'The President'],
          [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Alice2', 'Mike', ''],
          ['Alice3', 'Mike', ''],
//          ['Alice4', 'Alice3', ''],
//          ['Alice5', 'Alice3', ''],
//          ['Alice6', 'Alice3', ''],
//          ['Alice7', 'Alice3', ''],
//          ['Alice8', 'Alice3', ''],
//          ['Alice9', 'Alice3', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ]);

        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
          chart.draw(data, {allowHtml:true, allowCollapse:true});
      }

I want the space between nodes to be adjusted dynamically when they are collapsed, and not set to a pre-computed distance based on number of child nodes. To illustrate, I created 2 hierarchies in jsfiddle

In other words, when a node is collapsed, I want it to be displayed as if it had no children. Only when I expand the node, it should slide to the right and take up more space, similar to Mike Bostock's collapsible reingold tree

d-_-b
  • 761
  • 2
  • 11
  • 26
  • OrgCharts are rendered in pure HTML, a lot of ``'s, ``'s and a complex system of `colspan`'s, it would be very complicated to make a bullet proof javascript construct that reordered rows and cols and gave them new colspans in order to minimize space when nodes are expanding or collapsing. I say good luck! Why dont you just use d3 (as the "reingold tree" is based on)?? I'll bet it is easier to style the appearence of nodes in d3 than it is to override OrgChars basic behaviour and internal logic. – davidkonrad Jun 19 '15 at 09:35
  • yeah.. i'll probably go the D3 route, but that had some features missing, so I [asked another question](http://stackoverflow.com/questions/30926539/organization-chart-tree-online-dynamic-collapsible-pictures-in-d3) about it – d-_-b Jun 19 '15 at 16:41

0 Answers0