building family tree using google visualization org chart

567 views
Skip to first unread message

nara...@legendsconsulting.in

unread,
Apr 18, 2014, 2:59:44 AM4/18/14
to google-visua...@googlegroups.com


Hi all,


         i am trying to build family tree using org Chart. i used below code
---------------------

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['orgchart']});
      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([
          ['Mike',                                                                 null,      'The President'],
          [{v: 'husband', f: 'husband<br/><i><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRycBa_i2lFoSCSZwHcSQF8vUNeDw3JeOVBnmebiL8K-Fknbg2gsA"/><i>'}, 'Mike',    null],
         // ['Alice',                                                                'Mike',    null],
           [{v: 'wife', f: 'wife<br/><i><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSpZDjqzbuHEoqggyVqsrUnhnVkVBxHJUzDs3It_MFkgpuphOHCgg"/><i>'}, 'Mike',    null],
          ['child1',                                                                  'husband',     'Bob Sponge'],
          ['child2',                                                                'wife',     null],
            // ['Ravi',                                                                'Alice',     null],
           // ['Ram',                                                                'Alice',     null]
        ]);
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        chart.draw(data, {allowHtml:true});
      }
    </script>
  </head>

  <body>
    <div id='chart_div'></div>
  </body>
</html>

------------------------------------------------
which results into

But requirement is to build tree like how can i achieve this pls guide me




Andrew Gallant

unread,
Apr 18, 2014, 9:19:00 AM4/18/14
to google-visua...@googlegroups.com
The OrgCharts cannot build a tree like that.

nara...@legendsconsulting.in

unread,
Apr 18, 2014, 9:24:25 AM4/18/14
to google-visua...@googlegroups.com
Thanks

@Andrew Gallant. for your suggestion.
 is there any way to achieve this.. ?

Andrew Gallant

unread,
Apr 18, 2014, 10:50:24 AM4/18/14
to google-visua...@googlegroups.com
There's nothing in the Visualization API that can build a tree like that.  You might have some luck with other API's, but I don't know of any that will do trees like that off the top of my head.
Reply all
Reply to author
Forward
0 new messages