4

i am using google org chart visualization API and i want to have the vertical alignment set to top on the cells. (i am showing multiple people in each org chart box so i want every "level" to align to the top instead of the middle. So in the example, where you have Alice which is vertically centered. i want it to valign="top". is this possible to do using the google visualization api ??

leora
  • 188,729
  • 360
  • 878
  • 1,366

5 Answers5

4

You can style the elements within the Org Chart. Here's how I did it...

My mistake at first was to add the css block above the Google Javascript code. Once I moved it down, I could change pretty much 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>
xBoarder
  • 106
  • 2
  • 5
2

For those looking for a simple, open-source Javascript Organizational Chart library:

I've just published lib_gg_orgchart. It uses a JSON input and draws the 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 it useful, please let me know.

Gorka Llona
  • 124
  • 4
  • New web home for lib_gg_orgchart is http://librerias.logicas.org/lib_gg_orgchart. New version will come soon, fixing some bugs and integrating collaborator's changes. – Gorka Llona Feb 04 '13 at 15:14
0

I'm not sure if there is a simple way to do that with Google API but you can achieve that with simple CSS;

Instead of

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

you can write

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

If you want, you can also write a JavaScript code to calculate that cell's height and assign it to that cell's div tag.

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

.google-visualization-orgchart-node {vertical-align:top;}
Burak Erdem
  • 19,630
  • 7
  • 36
  • 56
  • isn't that vertically aligning within the div (not within the table itself) ?? – leora Jan 30 '11 at 23:27
  • Yes it's aligning the div. But if you don't want to vertically align the div but the TD element then you can write a custom CSS; .google-visualization-orgchart-node {vertical-align:top;} – Burak Erdem Jan 30 '11 at 23:54
-1

Elzo had a suggestion but instead of using valign: top; you need to use vertical-align: top like below

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

blurfus
  • 13,485
  • 8
  • 55
  • 61
-2

You can adjust CSS by cell with setProperty function:

// for 0 row 0 column
data.setProperty(0, 0, "style", "valign:top;");
Elzo Valugi
  • 27,240
  • 15
  • 95
  • 114