In any case, for vertical alignment of fields in the visualization of google org diagrams

Question

I am using the google org chart visualization API and I want the vertical alignment to be set on top of the cells. (I show a few people in each box of the org diagram, so I want each “level” to align with the top, not the middle. Thus, in the example where you have Alice , which is vertically centered. I want him valign = "top". Can this be done using google api visualization ??

Answer 1

You can style elements in the Org Chart. Here is how I did it ...

My mistake at the beginning was to add a css block above the Google Javascript code. Once I moved it, I could change almost any visual property.

<script type='text/javascript'> google.load('visualization', '1', {packages:['orgchart']}); google.setOnLoadCallback(drawChart); function drawChart() { /*GOOGLE MUMBO JUMBO GOES HERE*/ var chart = new google.visualization.OrgChart(document.getElementById('chart_div')); chart.draw(data, {allowHtml:true}); } </script> <style type="text/css"> .google-visualization-orgchart-node { width: 240px; } .google-visualization-orgchart-node-medium { vertical-align: top; } </style> 

Answer 2

For those looking for a simple open source Javascript organization chart library:

I just published lib_gg_orgchart. It uses JSON input and draws a chart using Raphael.

Take a look at the site for some examples and download:

http://www.fluxus.com.ve/gorka/lib_gg_orgchart

If you find this helpful, let me know.

Answer 3

I'm not sure if there is an easy way to do this with the Google API, but you can achieve this with simple CSS;

Instead

 ['Alice', 'Mike', ''], 

You can write

 ['<div style="height:50px;vertical-align:top">Alice</div>', 'Mike', ''], 

If you want, you can also write JavaScript code to calculate the height of the cell and assign it to the cell tag.

EDIT: If you want to vertically align the TD element, you can write your own CSS;

 .google-visualization-orgchart-node {vertical-align:top;} 

Answer 4

Elzo had a suggestion, but instead of using valign: top; you need to use vertically align: up as below

data.setProperty(0, 0, "style", "vertical-align:top;");

Answer 5

You can customize CSS by cell using setProperty :

 // for 0 row 0 column data.setProperty(0, 0, "style", "valign:top;");