Set level height for OrgChart

97 views
Skip to first unread message

hiddenstones

unread,
Dec 14, 2011, 12:20:38 AM12/14/11
to Google Visualization API
Is it possible to set height for certain node in the orgchart? For
example, with the same datatable in the orgchart example in the
playground (http://code.google.com/apis/ajax/playground/?
type=visualization#org_chart), how can I set Alice and Carol in the
same level?

asgallant

unread,
Dec 14, 2011, 9:38:28 AM12/14/11
to google-visua...@googlegroups.com
Assuming you want to keep 'Mike' as the parent node for 'Alice', there is no way to do that; all elements are placed in the row immediately below their parent elements.  You would have to change 'Alice's parent node to 'Bob' (in this example).

hiddenstones

unread,
Dec 14, 2011, 2:43:34 PM12/14/11
to Google Visualization API
I'm thinking... that I can set 'style' in setRowProperty to make empty
box look like a line!?! what a dirty workaround... lol... And the
funny thing that I found out that my vertical line is 1px offset
compared to the one from the root node... lol...

function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
data.addRows(7);
data.setCell(0, 0, 'Mike');
data.setCell(0, 2, 'The President');
data.setCell(1, 0,
'Jim', 'Jim<br/><font color="red"><i>Vice President<i></font>');
data.setCell(1, 1, 'Mike');
data.setCell(2, 0, '1', '');
data.setCell(2, 1, 'Mike');
data.setRowProperty(2, 'style', 'border-width: 0px; padding: 0px;
margin: 0px; box-shadow: 0px 0px; background-image:url("http://db.tt/
JhwZ6IDh"); background-repeat:no-repeat; background-position:center
center;');
data.setCell(3, 0, 'Bob');
data.setCell(3, 1, 'Jim');
data.setCell(3, 2, 'Bob Sponge');
data.setCell(4, 0, 'Carol');
data.setCell(4, 1, 'Bob');
data.setCell(5, 0, '2', '');
data.setCell(5, 1, '1');
data.setRowProperty(5, 'style', 'border-width: 0px; padding: 0px;
margin: 0px; box-shadow: 0px 0px; background-image:url("http://db.tt/
JhwZ6IDh"); background-repeat:no-repeat; background-position:center
center;');
data.setCell(6, 0, 'Alice');
data.setCell(6, 1, '2');

// Create and draw the visualization.
new
google.visualization.OrgChart(document.getElementById('visualization')).
draw(data, {allowHtml: true});

Reply all
Reply to author
Forward
0 new messages