Vertical Display of Leaves in Org Chart about google-visualization-issues HOT 78 OPEN

These steps can make the org chart go vertical pretty easily.  This method seems to
work pretty well with little effort.

This potentially could work for all browsers.  I haven't done lots of investigation
on that.  I'm assuming the user is using the small org chart.

Add these styles to the container used for the org chart:
#my_chart {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
float:left;
height:1800px; /* this should be the css value from the chart's width. you could set
this programmatically with javascript or just take a good guess */
}

add an element after your container to fix the float issue like <br style="height:1%;clear:both"
/>

add these css class styles:
.google-visualization-orgchart-node {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
/* another way to shrink the chart is to use a smaller font which can be styled in
this class */
}

.google-visualization-orgchart-space-small {
/* adjust this height as needed since this is really based on the width of your tree's
root element */
height:20px;
}

.google-visualization-orgchart-connrow-small {
/* again this will vary base on how wide your elements are */
height:42px;
}

Wow, five years without this adjustment, Google is losing space.

  google.charts.load('current', {packages:["orgchart"]});
  google.charts.setOnLoadCallback(drawChart);

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

    // For each orgchart box, provide the name, manager, and tooltip to show.
    data.addRows([
      [{v:'U.1', f:'Oliver'},'', ''],
      [{v:'U.2', f:'Jack'},'U.1', ''],
      [{v:'U.3', f:'Noah'}, 'U.2', ''],
      [{v:'G.1', f:'<div data-group="G.1"></div>'}, 'U.2', ''],
      [{v:'U.5', f:'Jacob'}, 'U.3', ''],
      [{v:'U.6', f:'Charlie'}, 'U.1', '']
    ]);

    var nodes = [
            [{v:'U.7', f:'<div>Harry</div>'}, 'G.1', ''],
        [{v:'U.8', f:'<div>Joshua</div>'}, 'G.1', ''],
        [{v:'U.9', f:'<div>James</div>'}, 'G.1', ''],
        [{v:'U.10', f:'<div>Ethan</div>'}, 'G.1', '']
      ];

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

    $("div[data-group]").each(function ()
        {
            var parent = $(this).parent();
    $(this).css('position', 'absolute');
    $(this).css('padding-top', '0');
            parent.removeClass("google-visualization-orgchart-node");
            parent.removeClass("google-visualization-orgchart-node-medium");
    parent.css('vertical-align', 'top');
            parent.css('min-width', '120px');
            parent.css('vertical-align', 'top');
    parent.css('padding-top', '0');

    var group = $(this).data('group');
            if(group !== undefined) 
            {
      for(var i=0; i < nodes.length; i++)
                {
        var node = nodes[i];
        if(node[1] === group) 
        {
            $(this).append(node[0].f); 
        }
                }
      $('div', this).addClass("google-visualization-orgchart-node");
      $('div', this).addClass("google-visualization-orgchart-node-medium");
      $('div', this).css('margin-bottom','5px');
            $('div', this).css('width', '100px');
            }
        });


  }

What would be needed to increase the priority of this item?

I am using the org chart in SharePoint. I have done some tweaking to make the org 
chart look better. For example, when the parent node collapses, remove all the white

spaces below the parent node (ie condense the chart). But, still for org chart with

many child nodes (> 10), you have to go across the page to view the child nodes.

My suggestion is to provide the option to make the child nodes display vertically 
when you reach certain level in the chart.

This feature is highly desirable by our company.

Thank you!

Radial Tree is better.  Vertical should be cake, the sooner the better.

Need to display Org Charts vertically,it will space log of space incase if we have
lot of data need to be shown,Please let me know if anything similar to this.

regards
Gangadhar

This Org Chart component works very well for a small department or organization. It

really would benefit from the ability to display leaf nodes vertically. If there is

a manager with 15 direct reports (none of whom have people reporting to them), then

the option to display those folks vertically would keep the overal chart from being

too wide.

need to display org charts vertically,since i have lot of data when it was showned
horizantally page is getting wider and wider....... any help on this ......


need to disply in vettically ....plz refer in attachment..

Bump this priority up! Found this tool extremely useful but became way too wide on the
page. Vertical display when no direct reports or fully vertical flow would be ideal...

As a backup solution, I was able to get this to display vertically with some javascript.
1) Idetify if the person has any direct reports.
2) If they dont, have them "report" to the top most person under that manager. 
I accomplished this by having an array of Associate/Manager. I sorted my manager. When
I sent the Associate/Manager rows to the chart, I checked if the associates had any
direct reports. If they didnt, the first person I had report to the manager, then everyone
else I had them report to the person above them--associate -1.

Hope to see this as a function though...

I see that the priority of this has been set to LOW, but for a company that has 500
employees, the priority needs to be raised.  You have to scroll forever to see the
employees, and don't even try to print it.  Isn't there something that can be done
here?

Marcus, would you care to share?

I found something similar here http://code.google.com/intl/ro-RO/apis/visualization/documentation/gallery/orgchart.html

Sure, let’s see... Don’t have time to explain much but maybe the code posted might help.
It uses jQuery so if you haven’t referenced that, be sure to.

-------------
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
function theDo(){
    var theArray = new Array();
    //These next two should be an already sorted (on manager) pair of Associate/Managers

    var colAssociate = $('.theAssociate'); //collection of associates
    var colManager = $('.theManager'); //collection of their respective managers.   //Next,
loop through everyone. "Trick" the org chart to place them differently if they have
multiple reports
    for( var i = 1 ; i < colAssociate.length ; i++ ) { 
        if( colManager.find(':contains("' + colAssociate[i].innerText + '")').length == 0
&&
                colManager[i].innerText == colManager[i-1].innerText ) { 
            theArray[theArray.length] = [colAssociate[i].innerText , colAssociate[i-1].innerText
 ]; //Report to the last person reporting to the manager causing the downward look
        } else {
            theArray[theArray.length] = [colAssociate[i].innerText , colManager[i].innerText
]; //Report to the manager
        }
    }
    drawChart2(theArray); //do the regular chart drawing
}

function drawChart2(theArray) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Manager');
    data.addRows(theArray);
    var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
    chart.draw(data, {allowHtml:true});
}
</script>
-------------

Slow on large orgs but does the trick :)

Marcusperez, thank you for sharing your code, but I was unable to get it to work. I
totally understand being unable to explain it, but could you post a complete working
sample?

For example, when is theDo() called?
is it --  google.setOnLoadCallback(theDo);

You don't show any sample data, etc.

Sure, just add this to your body:


    <div class="theAssociate">Manager1</div>
    <div class="theManager"></div>

    <div class="theAssociate">Lacky1</div>
    <div class="theManager">Manager1</div>

    <div class="theAssociate">Lacky2</div>
    <div class="theManager">Manager1</div>

    <div class="theAssociate">Lacky3</div>
    <div class="theManager">Manager1</div>

Full working code:

<html>

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>

<script type="text/javascript">
google.load('visualization', '1', {packages:['orgchart']});
//google.setOnLoadCallback(drawChart2);


function theDo(){
    var theArray = new Array();
    //These next two should be an already sorted (on manager) pair of Associate/Managers

    var colAssociate = $('.theAssociate'); //collection of associates
    var colManager = $('.theManager'); //collection of their respective managers.   //Next,
loop through everyone. "Trick" the org chart to place them differently if they have
multiple reports
    for( var i = 1 ; i < colAssociate.length ; i++ ) { 
        if( colManager.find(':contains("' + colAssociate[i].innerText + '")').length == 0
&&
                colManager[i].innerText == colManager[i-1].innerText ) { 
            theArray[theArray.length] = [colAssociate[i].innerText , colAssociate[i-1].innerText
 ]; //Report to the last person reporting to the manager causing the downward look
        } else {
            theArray[theArray.length] = [colAssociate[i].innerText , colManager[i].innerText
]; //Report to the manager
        }
    }
    drawChart2(theArray); //do the regular chart drawing
}

function drawChart2(theArray) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Manager');
    data.addRows(theArray);
    var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
    chart.draw(data, {allowHtml:true});
}
</script>

</head>

<body onload="theDo()">

<div class="theAssociate">Manager1</div>
<div class="theManager"></div>

<div class="theAssociate">Lacky1</div>
<div class="theManager">Manager1</div>

<div class="theAssociate">Lacky2</div>
<div class="theManager">Manager1</div>

<div class="theAssociate">Lacky3</div>
<div class="theManager">Manager1</div>

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

That's not really what I was looking for.  Yes, the leaves need to be vertical, however,
the connector lines need to go down the left or right side, not down the middle.  In
your example above, it looks like Manager1 is the manager of Lacky1, Lacky1 is the
manager of Lacky2, and Lacky2 is the manager of Lacky3, when in fact, Manager1 is over
Lacky1, Lacky2 and Lacky3.

Seimour,
The link you provided is the Org Chart that we are discussing here.  The only web browser
that I've found to support more than 999 in a colspan is Google Chrome, go figure...
 Maybe that's why they're not fixing it.

Dear j.saterf... ,
this sounds very interesting. I would like to use your code with the org-chart API.

I tried to get the code from google running 90 degrees rotated. But adding the webkit
rotate(-90) doesn't have any effect if used in the header of my html-file.
What's my container if i using the following code:
http://code.google.com/intl/de/apis/visualization/documentation/gallery/orgchart.html

In this code example, there aren't css files supported or included. Where should i
reference to the i.e. ".google-visualization-orgchart-node" class in this example?

I tried the following implementation but didn't get a satisfying chart, i get a blank
page :-D
I hope you are able to help ;-)
Thanks !

<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);
      -webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
float:left;
height:1800px; /* this should be the css value from the chart's width. you could set
this programmatically with javascript or just take a good guess */
      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', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ]);
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        chart.draw(data, {allowHtml:true});
      }
      .google-visualization-orgchart-node {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
/* another way to shrink the chart is to use a smaller font which can be styled in
this class */
}

.google-visualization-orgchart-space-small {
/* adjust this height as needed since this is really based on the width of your tree's
root element */
height:20px;
}

.google-visualization-orgchart-connrow-small {
/* again this will vary base on how wide your elements are */
height:42px;
}

    </script>
    <br style="height:1%;clear:both" />
  </head>
  <body>
    <div id='chart_div'></div>
  </body>
</html>

The solution j.saterf... provides is interesting! But, is there why to make the children
under the node go vertical if let say there is more than 2 children? See attached.
If I were to use j.saterf... solution for nodes with more than 2 children then some
of the children will be leveled higher than their parent.

This is a continuation of my previous comment. 

Hossein,

The orgchart.png that you included (in comment 18) is exactly what I was originally
looking for when I first created this thread.

Kris

I like the rotate idea. If this could simply be added as a parameter to orgchart i.e.
rotate=-90 or -180 or 90 this would be fantastic! I'm trying to create pedigree charts
for a friend in a way that they can maintain them (the start with the child on the
left and both sets of parents to the right of the child) the following addRows makes
their maintenance easy using orgchart, but the direction is wrong. I'd love for this
to get a higher priority since the rotated version could also be used for geneology
as well.  

data.addRows([
          [{v:'lvl1', f:'<a href="www.amadha.ca/index.html">Mike</a><div style="color:red;
font-style:italic">CJfK</div>'}, '', ''],
          [{v:'lvl2m', f:'<a href=""></a>Sue (m)<div style="color:red; font-style:italic">Oxford</div>'},
'lvl1', ''],
          [{v:'lvl2s', f:'<a href=""></a>Frank (s)<div style="color:red; font-style:italic">CJfK</div>'},
'lvl1', ''],
          [{v:'lvl2m3m', f:'<a href=""></a>Alice (m)<div style="color:red; font-style:italic">CJfK</div>'},
'lvl2m', ''],
          [{v:'lvl2m3s', f:'<a href=""></a>Ted (s)<div style="color:red; font-style:italic">CJfK</div>'},
'lvl2m', ''],
          [{v:'lvl2s3m', f:'<a href=""></a>Molly (m)<div style="color:red; font-style:italic">Fancy
Seats</div>'}, 'lvl2s', ''],
          [{v:'lvl2s3s', f:'<a href=""></a>Bob (s)<div style="color:red; font-style:italic">Rolling
Hills</div>'}, 'lvl2s', ''],
      [{v:'lvl2m3m4m', f:'<a href=""></a>Mary (m)<div style="color:red; font-style:italic">CJfK</div>'},
'lvl2m3m', ''],
          [{v:'lvl2m3m4s', f:'<a href=""></a>Theodore (s)<div style="color:red; font-style:italic">CJfK</div>'},
'lvl2m3m', ''],
          [{v:'lvl2m3s4m', f:'<a href=""></a>Margarete (m)<div style="color:red; font-style:italic">Fancy
Seats</div>'}, 'lvl2m3s', ''],
          [{v:'lvl2m3s4s', f:'<a href=""></a>Doug (s)<div style="color:red; font-style:italic">Rolling
Hills</div>'}, 'lvl2m3s', ''],
      [{v:'lvl2s3m4m', f:'<a href=""></a>Rose (m)<div style="color:red; font-style:italic">CJfK</div>'},
'lvl2s3m', ''],
          [{v:'lvl2s3m4s', f:'<a href=""></a>Thunder (s)<div style="color:red; font-style:italic">CJfK</div>'},
'lvl2s3m', ''],
          [{v:'lvl2s3s4m', f:'<a href=""></a>Peaches (m)<div style="color:red; font-style:italic">Fancy
Seats</div>'}, 'lvl2s3s', ''],
          [{v:'lvl2s3s4s', f:'<a href=""></a>Rocky (s)<div style="color:red; font-style:italic">Rolling
Hills</div>'}, 'lvl2s3s', '']

an alternative http://www.headjump.de/article/arrows-and-boxes

A controllable orgchart like orgchart.png is exactly what I need to

Need to display Org Charts vertically too.

The ability to display the root at left with child nodes fanning out to right would
be *extremely* useful!

+1 for wanting control of the orientation of children elements.  Something like a "child_orientation"
property which could be "vertical" or "horizontal" should fix most, if not all, of
the mentioned problems.

Would love to see an option for child orientation as well. Horizontal orientation is
pretty useless when you have dozens of nodes on level 3. 

Is it possible to make them like this? What I'm trying to do is using orgchart to make
a family tree. :D

Issue 893 has been merged into this issue.

Issue 893 was about displaying the whole thing horizontally, see the attachment

I would like to see this implemented sa well.

Yes please.  This is the one feature stopping me using OrgChart to make a dynamic org
chart for my business.  For now I keep having to edit drawings.

Issue 136 has been merged into this issue.

Hi..Actually i am trying to implement the vertial scenario as displayed in the snapshot.I
could implement the horizontal scenario,but i require only the vertical structure to
be implemented in my project.Any little help or pointers would be of great help.Thanks
in advance.

how to get the data using for loop to draw org chart.I have json array

HI  I want a vertical organization chart, and  I am  trying to  implement it. 
I want chart  like (IMAGE:1), it  is  working  fine  in simple HTML.  but  as  I implement
 it  on JSP Page the  node is  also moved and the  text come out  from the box and
it lokk  like this (IMAGE 2)

+1 | orgchart.png in comment 18 would be perfect.

Horizontal only is a real limitation when you have a relatively flat structure.  Span
of 1:7 gets 49 wide with only 2 layers, and the view is unusable.  a nice 7*7 grid
would look great.

I would LOVE to see a solution to make a org chart exactly like the one in the screenshot
on comment #18.

Pressed start for comment #18

I am also looking for something similar to comment 18... Horizontal and then Vertical
org chart

@#36 [email protected]

Would you be open to sharing the html code for your project. Lots of folks here could
benefit from your work.  

Thanks mate!

Hi All, 
we tried to modify the original OrgChart to make it Vertical, it works with adding
the code below to the id #ogrChart on the Local CSS file:
rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform:
rotate(-90deg); transform: rotate(-90deg); -sand-transform: rotate(90deg)

But... 
based on the Attachment, it looks like OrgChart inherited some styles from the CSS
on:

https://ajax.googleapis.com/ajax/static/module/gviz/1.0/orgchart/orgchart.css AND
https://www.google.com/uds/api/visualization/1.0/950a5d78e27fa6645530230567434bd0/ui+en.css

My question is: 'Is there any way to MODIFY or TURN OFF some code on those CSS?'

many thanks for your help, when the OrgChart is ready we're glad to share it with the
community. 
Regards!

Also vote for implemeting the feature.

It's been 4 years....I think it's time to upgrade this Org Chart creation tool. 

is there an alternative tool that people recommend that is maintained a bit more?

The org chart has been a very low priority for us compared to other charts.  This is
partly because of the complexity of the large number and variety of network/graph layout
algorithms, but also because it is quite different from most of the other charts, which
are more about mapping numbers to visualizations.

However, we are investigating a new general network chart, which would likely be usable
for org charts.  No specific plans for a release schedule at this time, but this general
capability is a moderately high priority.

But this is a very popular request by the community :) And, thanks for the nice charts.

<div id="my_chart_div"></div>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// <![CDATA[

    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {packages: ['orgchart']});
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    function drawChart()
    {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Name');
      data.addColumn('string', 'parent');
      data.addColumn('string', 'tooltip');

      data.addRows([
          [{v:"1", f:"Mike<div style='color:red; font-style:italic'>President</div>"},
"", "The President"],
          [{v:"2", f:"Jim<div style='color:red; font-style:italic'>Vice President</div>"},
"1", "VP"],
          [{v:"3", f:"Alice<div style='color:red; font-style:italic'>Vice President</div>"},
"1", "VP"],
          [{v:"4", f:"Bob Sponge<div style='color:red; font-style:italic'>Director</div>"},
"2", "Director"],
          [{v:"5", f:"Carol<div style='color:red; font-style:italic'>Program Manager</div>"},
"4", "PM"],
          [{"v":"6", "f":"John Smith<div style='color:red; font-style:italic'>Program
Manager</div>"},"4","PM"],
          [{"v":"3-1", "f":"<div class='rowspanmyparent' style='border: 1px solid #3388dd
!important;padding:4px 4px 4px 0px !important;margin:-2px 0px 0px -2px !important;overflow:hidden;'><table
cellpadding=0 cellspacing=0 border=0 style='padding:0px important;margin: 0px 0px 0px
-2px !important;border:0px !important;'><tr><td class='google-visualization-orgchart-linenode
google-visualization-orgchart-linebottom'> </td><td rowspan='2' colspan='2' style='padding:0px
!important;margin:0px !important;'><table cellpadding=0 cellspacing=0 style='padding:0px
!important;margin:4px 0px !important;'><tr><td name='emps' class='google-visualization-orgchart-node
google-visualization-orgchart-node-medium' title='Bob Jones'>Bob Jones<div style='color:red;
font-style:italic'>Consultant</div></td></tr></table></td></tr><tr><td class='google-visualization-orgchart-linenode'
style='border:none !important;'> </td></tr><tr><td class='google-visualization-orgchart-linenode
google-visualization-orgchart-linebottom'> </td><td rowspan='2' colspan='2' style='padding:0px
!important;margin:0px !important;'><table cellpadding=0 cellspacing=0 style='padding:0px
!important;margin:4px 0px !important;'><tr><td name='emps' class='google-visualization-orgchart-node
google-visualization-orgchart-node-medium' title='Daniel Jones'>Daniel Jones<div style='color:red;
font-style:italic'>Consultant</div></td></tr></table></td></tr><tr><td class='google-visualization-orgchart-linenode'
style='border:none !important;'> </td></tr><tr><td class='google-visualization-orgchart-linenode
google-visualization-orgchart-linebottom'> </td><td rowspan='2' colspan='2' style='padding:0px
!important;margin:0px !important;'><table cellpadding=0 cellspacing=0 style='padding:0px
!important;margin:4px 0px !important;'><tr><td name='emps' class='google-visualization-orgchart-node
google-visualization-orgchart-node-medium' title='Kevin Jones'>Kevin Jones<div style='color:red;
font-style:italic'>Consultant</div></td></tr></table></td></tr><tr><td class='google-visualization-orgchart-linenode'
style='border:none !important;'> </td></tr><tr><td class='google-visualization-orgchart-linenode
google-visualization-orgchart-linebottom'> </td><td rowspan='2' colspan='2' style='padding:0px
!important;margin:0px !important;'><table cellpadding=0 cellspacing=0 style='padding:0px
!important;margin:4px 0px !important;'><tr><td name='emps' class='employee google-visualization-orgchart-node
google-visualization-orgchart-node-medium' title='Steve Jones'>Steve Jones<div style='color:red;
font-style:italic'>Consultant</div></td></tr></table></td></tr><tr><td class='google-visualization-orgchart-linenode'
style='border:none !important;'> </td></tr><tr><td class='google-visualization-orgchart-linenode
google-visualization-orgchart-linebottom'> </td><td rowspan='2' colspan='2' style='padding:0px
!important;margin:0px !important;'><table cellpadding=0 cellspacing=0 style='padding:0px
!important;margin:4px 0px !important;'><tr><td name='emps' class='employee google-visualization-orgchart-node
google-visualization-orgchart-node-medium' title='Vern Jones'>Vern Jones<div style='color:red;
font-style:italic'>Consultant</div></td></tr></table></td></tr><tr><td class='google-visualization-orgchart-linenode'
style='border:none !important;'> </td></tr></table></div>"},"3",""],
          [{"v":"6-1", "f":"<div class='rowspanmyparent' style='border: 1px solid #3388dd
!important;padding:4px 4px 4px 0px !important;margin:-2px 0px 0px -2px !important;overflow:hidden;'><table
cellpadding=0 cellspacing=0 border=0 style='padding:0px important;margin: 0px 0px 0px
-2px !important;border:0px !important;'><tr><td class='google-visualization-orgchart-linenode
google-visualization-orgchart-linebottom'> </td><td rowspan='2' colspan='2' style='padding:0px
!important;margin:0px !important;'><table cellpadding=0 cellspacing=0 style='padding:0px
!important;margin:4px 0px !important;'><tr><td name='emps' class='google-visualization-orgchart-node
google-visualization-orgchart-node-medium' title='Bob Smith'>Bob Smith<div style='color:red;
font-style:italic'>Consultant</div></td></tr></table></td></tr><tr><td class='google-visualization-orgchart-linenode'
style='border:none !important;'> </td></tr><tr><td class='google-visualization-orgchart-linenode
google-visualization-orgchart-linebottom'> </td><td rowspan='2' colspan='2' style='padding:0px
!important;margin:0px !important;'><table cellpadding=0 cellspacing=0 style='padding:0px
!important;margin:4px 0px !important;'><tr><td name='emps' class='google-visualization-orgchart-node
google-visualization-orgchart-node-medium' title='Daniel Smith'>Daniel Smith<div style='color:red;
font-style:italic'>Consultant</div></td></tr></table></td></tr><tr><td class='google-visualization-orgchart-linenode'
style='border:none !important;'> </td></tr><tr><td class='google-visualization-orgchart-linenode
google-visualization-orgchart-linebottom'> </td><td rowspan='2' colspan='2' style='padding:0px
!important;margin:0px !important;'><table cellpadding=0 cellspacing=0 style='padding:0px
!important;margin:4px 0px !important;'><tr><td name='emps' class='google-visualization-orgchart-node
google-visualization-orgchart-node-medium' title='Kevin Smith'>Kevin Smith<div style='color:red;
font-style:italic'>Consultant</div></td></tr></table></td></tr><tr><td class='google-visualization-orgchart-linenode'
style='border:none !important;'> </td></tr><tr><td class='google-visualization-orgchart-linenode
google-visualization-orgchart-linebottom'> </td><td rowspan='2' colspan='2' style='padding:0px
!important;margin:0px !important;'><table cellpadding=0 cellspacing=0 style='padding:0px
!important;margin:4px 0px !important;'><tr><td name='emps' class='employee google-visualization-orgchart-node
google-visualization-orgchart-node-medium' title='Steve Smith'>Steve Smith<div style='color:red;
font-style:italic'>Consultant</div></td></tr></table></td></tr><tr><td class='google-visualization-orgchart-linenode'
style='border:none !important;'> </td></tr><tr><td class='google-visualization-orgchart-linenode
google-visualization-orgchart-linebottom'> </td><td rowspan='2' colspan='2' style='padding:0px
!important;margin:0px !important;'><table cellpadding=0 cellspacing=0 style='padding:0px
!important;margin:4px 0px !important;'><tr><td name='emps' class='employee google-visualization-orgchart-node
google-visualization-orgchart-node-medium' title='Vern Smith'>Vern Smith<div style='color:red;
font-style:italic'>Consultant</div></td></tr></table></td></tr><tr><td class='google-visualization-orgchart-linenode'
style='border:none !important;'> </td></tr></table></div>"},"6",""]
        ]);

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

      $("[class*='rowspanmyparent']").each( function()
      {
        var item = $(this).parent();
        item.attr("rowspan",1000);
        item.removeClass("google-visualization-orgchart-node");
        item.removeClass("google-visualization-orgchart-node-medium");
        item.css('width','130px');
        item.css('vertical-align','top');
      });

      $("#my_chart_div > table > tbody > tr:last").after("<tr><td colspan=1000><div
style='height:800px;'> </div></td></tr>");
    }
// ]]>
</script>

<style type="text/css">
    .google-visualization-orgchart-node {
       width: 130px;
       box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5) !important;
       background-color: #edf7ff !important;
       background: -webkit-gradient(linear, left top, left bottom, from(#edf7ff), to(#cde7ee))
!important;
       background: -moz-linear-gradient(top, #edf7ff, #cde7ee) !important;
    }
</style>

(No text was entered with this change)

PLEASE MAKE THIS HAPPEN

I would suggest alternative Jquery graph plugins that support the vertical org chart
 function, there a lot out there that are way better than googles chart api. Google
just isn't interested.

Solved mine issue with yEd editor

This is also a challenge for us with a large organization.

This is also a challenge for us with a large organization.

 return [
        {
              v: `Linked Under ${row.code}`,
              f: `Linked Under ${row.code}<div style="color:blue; font-style:italic">${row.details}</div>`,
       },
       `${row.code}`,
       'Account Details',
 ]