Vertical Display of Leaves in Org Chart

[orwant]

What would you like to see us add to this API?

I would like to see the ability for the Org Chart to display leaf nodes
both horizontally and vertically.  Currently, the Org Chart only supports
horizontal layout.  But to save space (especially for printing), it would
be nice if the leaf nodes (nodes without children) would all display
directly below their parent with their connector line attaching to the box
on the left side.

What component is this issue related to (PieChart, LineChart, DataTable,
Query, etc)?

Org Chart

*********************************************************
For developers viewing this issue: please click the 'star' icon to be
notified of future changes, and to let us know how many of you are
interested in seeing it resolved.
*********************************************************

Original issue reported on code.google.com by khenneman on 2009-09-08 18:15:40

[orwant]

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

Original issue reported on code.google.com by pmail.tmail on 2010-01-20 15:28:47

[orwant]

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!

Original issue reported on code.google.com by Hossein.FLorida on 2010-02-26 20:47:40

[orwant]

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

Original issue reported on code.google.com by dan.mcdanielar.com on 2010-03-26 06:55:06

[orwant]

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

Original issue reported on code.google.com by maligangadhar.m on 2010-05-11 09:04:21

[orwant]

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.

Original issue reported on code.google.com by johnmvincent on 2010-05-21 14:33:07

[orwant]

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..

Original issue reported on code.google.com by maligangadhar.m on 2010-05-25 12:12:22

---

• Attachment: d.JPG

[orwant]

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...

Original issue reported on code.google.com by marcusperez on 2010-10-21 17:09:58

[orwant]

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?

Original issue reported on code.google.com by khenneman on 2010-11-22 13:01:42

[orwant]

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

Original issue reported on code.google.com by seimour.birkoff on 2010-11-22 13:17:12

[orwant]

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 :)

Original issue reported on code.google.com by marcusperez on 2010-12-07 01:24:47

[orwant]

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.

Original issue reported on code.google.com by johnmvincent on 2010-12-07 16:03:13

[orwant]

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>

Original issue reported on code.google.com by marcusperez on 2010-12-08 20:54:48

[orwant]

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>

Original issue reported on code.google.com by marcusperez on 2010-12-08 21:00:26

[orwant]

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.

Original issue reported on code.google.com by khenneman on 2010-12-08 21:10:26

[orwant]

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.

Original issue reported on code.google.com by khenneman on 2010-12-08 21:14:13

[orwant]

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;
}

Original issue reported on code.google.com by j.saterfiel on 2011-03-04 05:12:35

---

• _Attachment: org_chart_vertical.png
  _

[orwant]

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>

Original issue reported on code.google.com by andi.schmid1210 on 2011-03-15 09:19:45

[orwant]

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.

Original issue reported on code.google.com by Hossein.FLorida on 2011-03-21 16:22:56

---

• Attachment: orgchart.png
  

[orwant]

This is a continuation of my previous comment. 

Original issue reported on code.google.com by Hossein.FLorida on 2011-03-21 16:26:21

---

• _Attachment: orgchart_bad.png
  _

[orwant]

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

Original issue reported on code.google.com by khenneman on 2011-03-21 18:50:04

[orwant]

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', '']

Original issue reported on code.google.com by AllinghamD on 2011-05-18 04:49:40

[orwant]

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

Original issue reported on code.google.com by seimour.birkoff on 2011-05-18 06:03:52

[orwant]

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

Original issue reported on code.google.com by david@scottfamily.co.uk on 2011-05-18 16:31:23

[orwant]

Need to display Org Charts vertically too.

Original issue reported on code.google.com by bondario on 2011-08-19 11:29:08

[orwant]

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

Original issue reported on code.google.com by steve.boxersoft on 2011-08-23 12:48:18

[orwant]

+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.

Original issue reported on code.google.com by dylan.anderson on 2011-11-03 17:35:10

[orwant]

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. 

Original issue reported on code.google.com by valentin.hussong on 2011-11-11 15:28:56

[orwant]

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

Original issue reported on code.google.com by adan.ahmad on 2011-12-17 02:13:53

---

• Attachment: tree.png
  

[orwant]

Issue 893 has been merged into this issue.

Original issue reported on code.google.com by metula on 2012-05-01 05:59:52

[orwant]

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

Original issue reported on code.google.com by tjeerd@projectie.com on 2012-05-01 09:46:28

---

• _Attachment: tech_tree3.jpg_

[orwant]

I would like to see this implemented sa well.

Original issue reported on code.google.com by mgoutah on 2012-05-28 12:03:53

[orwant]

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.

Original issue reported on code.google.com by daniel.barron@smoothwall.net on 2012-06-11 09:36:42

[orwant]

Issue 136 has been merged into this issue.

Original issue reported on code.google.com by jinji.viz on 2012-06-11 09:40:09

[orwant]

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.

Original issue reported on code.google.com by kalyansusanth.alapati on 2012-06-20 16:28:40

---

• Attachment: Expected.jpg

[orwant]

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

Original issue reported on code.google.com by sswapnasprl on 2012-08-13 07:23:55

[orwant]

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)

Original issue reported on code.google.com by kr.abhishek11 on 2012-09-11 07:28:58

---

• Attachment: [IMAGE 1.jpg](https://storage.googleapis.com/google-code-attachments/google-visualization-api-issues/issue-47/comment-36/IMAGE 1.jpg)
• Attachment: [IMAGE 2.jpg](https://storage.googleapis.com/google-code-attachments/google-visualization-api-issues/issue-47/comment-36/IMAGE 2.jpg)

[orwant]

+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.

Original issue reported on code.google.com by stuart.leitch@skyscanner.net on 2013-01-15 11:27:37

[orwant]

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

Original issue reported on code.google.com by sandravogt on 2013-01-21 20:20:01

[orwant]

Pressed start for comment #18

Original issue reported on code.google.com by ottokosk on 2013-01-30 08:38:49

[orwant]

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

Original issue reported on code.google.com by epenalba@dattobackup.com on 2013-02-13 14:53:33

[orwant]

@#36 kr.abhis...@gmail.com

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

Thanks mate!

Original issue reported on code.google.com by dridma on 2013-03-27 16:39:29

[orwant]

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!

Original issue reported on code.google.com by DanLuevano on 2013-12-18 16:51:17

---

• Attachment: ORgChart.png
  

[orwant]

Also vote for implemeting the feature.

Original issue reported on code.google.com by aragorna on 2014-04-04 09:48:42

[orwant]

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

Original issue reported on code.google.com by dutch.masta on 2014-04-11 16:11:38

[orwant]

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

Original issue reported on code.google.com by akantrowitz on 2014-04-12 10:35:24

[orwant]

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.

Original issue reported on code.google.com by dlaliberte@google.com on 2014-05-20 14:18:04

[orwant]

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

Original issue reported on code.google.com by Hossein.Aarabi.Work on 2014-07-11 19:00:51

[orwant]

<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>

Original issue reported on code.google.com by neil.p.miller on 2014-08-24 18:19:03

[orwant]

(No text was entered with this change)

Original issue reported on code.google.com by neil.p.miller on 2014-08-24 22:10:46

---

• Attachment: orgchart.jpg

[orwant]

PLEASE MAKE THIS HAPPEN

Original issue reported on code.google.com by ferrettihosting on 2014-10-08 00:51:02