Re: Issue 47 in google-visualization-api-issues: Vertical Display of Leaves in Org Chart

[google-visualiz...@googlecode.com]

Comment #37 on issue 47 by stuart.l...@skyscanner.net: Vertical Display of
Leaves in Org Chart
http://code.google.com/p/google-visualization-api-issues/issues/detail?id=47

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

[google-visualiz...@googlecode.com]

Comment #38 on issue 47 by sandrav...@gmail.com: Vertical Display of Leaves

in Org Chart
http://code.google.com/p/google-visualization-api-issues/issues/detail?id=47

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

[google-visualiz...@googlecode.com]

Comment #39 on issue 47 by ottok...@gmail.com: Vertical Display of Leaves

in Org Chart
http://code.google.com/p/google-visualization-api-issues/issues/detail?id=47

Pressed start for comment #18

[google-visualiz...@googlecode.com]

Comment #40 on issue 47 by epena...@dattobackup.com: Vertical Display of

Leaves in Org Chart
http://code.google.com/p/google-visualization-api-issues/issues/detail?id=47

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

[google-visualiz...@googlecode.com]

Comment #41 on issue 47 by dri...@gmail.com: Vertical Display of Leaves in
Org Chart
http://code.google.com/p/google-visualization-api-issues/issues/detail?id=47

@#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!

--
You received this message because this project is configured to send all
issue notifications to this address.
You may adjust your notification preferences at:
https://code.google.com/hosting/settings

[google-visualiz...@googlecode.com]

Comment #42 on issue 47 by chak...@gmail.com: Vertical Display of Leaves in
Org Chart
http://code.google.com/p/google-visualization-api-issues/issues/detail?id=47

e

[google-visualiz...@googlecode.com]

Comment #43 on issue 47 by vivekpon...@gmail.com: Vertical Display of

Leaves in Org Chart
http://code.google.com/p/google-visualization-api-issues/issues/detail?id=47

Hi,
I am facing an issue with the Orgnization chart in chrome browser, below is
the screen shot of it.

Attachments:
New Bitmap Image.bmp 5.9 MB

[google-visualiz...@googlecode.com]

Comment #44 on issue 47 by DanLuev...@gmail.com: Vertical Display of Leaves

in Org Chart
http://code.google.com/p/google-visualization-api-issues/issues/detail?id=47

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!

Attachments:
ORgChart.png 14.2 KB

[google-visualiz...@googlecode.com]

Comment #45 on issue 47 by arago...@gmail.com: Vertical Display of Leaves

in Org Chart
http://code.google.com/p/google-visualization-api-issues/issues/detail?id=47

Also vote for implemeting the feature.

[google-visualiz...@googlecode.com]

Comment #46 on issue 47 by dutch.ma...@gmail.com: Vertical Display of

Leaves in Org Chart
http://code.google.com/p/google-visualization-api-issues/issues/detail?id=47

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

[google-visualiz...@googlecode.com]

Comment #47 on issue 47 by akantrow...@gmail.com: Vertical Display of

Leaves in Org Chart
http://code.google.com/p/google-visualization-api-issues/issues/detail?id=47

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

[google-visualiz...@googlecode.com]

Comment #48 on issue 47 by juan_ce...@jabil.com: Vertical Display of Leaves

in Org Chart
http://code.google.com/p/google-visualization-api-issues/issues/detail?id=47

4 years a no answers yet?

[google-visualiz...@googlecode.com]

Updates:
Status: Accepted

Comment #49 on issue 47 by dlalibe...@google.com: Vertical Display of

Leaves in Org Chart
http://code.google.com/p/google-visualization-api-issues/issues/detail?id=47

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.

[google-visualiz...@googlecode.com]

Comment #50 on issue 47 by Hossein....@gmail.com: Vertical Display of

Leaves in Org Chart
http://code.google.com/p/google-visualization-api-issues/issues/detail?id=47

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

[google-visualiz...@googlecode.com]

Comment #51 on issue 47 by neil.p.m...@gmail.com: Vertical Display of
Leaves in Org Chart
https://code.google.com/p/google-visualization-api-issues/issues/detail?id=47

<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'>&nbsp;</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;'>&nbsp;</td></tr><tr><td
class='google-visualization-orgchart-linenode
google-visualization-orgchart-linebottom'>&nbsp;</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;'>&nbsp;</td></tr><tr><td
class='google-visualization-orgchart-linenode
google-visualization-orgchart-linebottom'>&nbsp;</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;'>&nbsp;</td></tr><tr><td
class='google-visualization-orgchart-linenode
google-visualization-orgchart-linebottom'>&nbsp;</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;'>&nbsp;</td></tr><tr><td
class='google-visualization-orgchart-linenode
google-visualization-orgchart-linebottom'>&nbsp;</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;'>&nbsp;</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'>&nbsp;</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;'>&nbsp;</td></tr><tr><td
class='google-visualization-orgchart-linenode
google-visualization-orgchart-linebottom'>&nbsp;</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;'>&nbsp;</td></tr><tr><td
class='google-visualization-orgchart-linenode
google-visualization-orgchart-linebottom'>&nbsp;</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;'>&nbsp;</td></tr><tr><td
class='google-visualization-orgchart-linenode
google-visualization-orgchart-linebottom'>&nbsp;</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;'>&nbsp;</td></tr><tr><td
class='google-visualization-orgchart-linenode
google-visualization-orgchart-linebottom'>&nbsp;</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;'>&nbsp;</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;'>&nbsp;</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>

[google-visualiz...@googlecode.com]

Comment #52 on issue 47 by neil.p.m...@gmail.com: Vertical Display of

Leaves in Org Chart
https://code.google.com/p/google-visualization-api-issues/issues/detail?id=47

(No comment was entered for this change.)

Attachments:
orgchart.jpg 62.6 KB

[google-visualiz...@googlecode.com]

Comment #53 on issue 47 by ferretti...@gmail.com: Vertical Display of

Leaves in Org Chart
https://code.google.com/p/google-visualization-api-issues/issues/detail?id=47

PLEASE MAKE THIS HAPPEN

[google-visualiz...@googlecode.com]

Comment #54 on issue 47 by jarred...@gmail.com: Vertical Display of Leaves

in Org Chart
https://code.google.com/p/google-visualization-api-issues/issues/detail?id=47

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.

[google-visualiz...@googlecode.com]

Comment #55 on issue 47 by fabioweb...@gmail.com: Vertical Display of

Leaves in Org Chart
https://code.google.com/p/google-visualization-api-issues/issues/detail?id=47

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

[google-visualiz...@googlecode.com]

Comment #56 on issue 47 by VaclavBl...@seznam.cz: Vertical Display of

Leaves in Org Chart
https://code.google.com/p/google-visualization-api-issues/issues/detail?id=47

Solved mine issue with yEd editor

[google-visualiz...@googlecode.com]

Comment #58 on issue 47 by erpconsu...@gmail.com: Vertical Display of

Leaves in Org Chart
https://code.google.com/p/google-visualization-api-issues/issues/detail?id=47

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