Visualization: Organizational Chart

GoLiRaja

unread,

Mar 9, 2009, 6:56:59 PM3/9/09

to Google Visualization API

Hello,

I'm using Visualization: Organizational Chart API for one of the
Project.

Would like to know if there is any limit on number of nodes/ nesting?

It works fine if I try it with smaller # of nodes (10-15) with 2
levels. Have noticed, if I use more nodes (100+) with 3 level, few of
the nodes don't draw correctly with child nodes missing.

Thanks,

Gyan

VizBoy

unread,

Mar 10, 2009, 2:17:21 PM3/10/09

to google-visua...@googlegroups.com

Hi,

There shouldn't be a hard limit, but as this depends on browser rendering of html elements, the browser might have problems with drawing too many nodes.
However, ~100 sounds like it should be possible.
Could you send us the code, and what the problem with the display is exactly, so we can have a look?

Thanks

- VizBoy.

GoLiRaja

unread,

Mar 10, 2009, 6:26:12 PM3/10/09

to Google Visualization API

Hello,

Below is the code:
=======================================================================

<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["orgchart"]});
google.setOnLoadCallback(drawChart);

function drawChart() { var data = new google.visualization.DataTable(
{
cols:[{id: 'resource' , label: 'Resource' , type: 'string'},
{id: 'resourcep' , label: 'Parent' , type: 'string'}
],
rows:[
{c:[{v: 'NODE'}, {v: 'NODE'}]},
{c:[{v: 'HW Two'}, {v: 'NODE'}]},
{c:[{v: 'hw0037'}, {v: 'HW Two'}]},
{c:[{v: 'hw0032'}, {v: 'HW Two'}]},
{c:[{v: 'hw0031'}, {v: 'HW Two'}]},
{c:[{v: 'hw0034'}, {v: 'HW Two'}]},
{c:[{v: 'hw0033'}, {v: 'HW Two'}]},
{c:[{v: 'hw0035'}, {v: 'HW Two'}]},
{c:[{v: 'hw0036'}, {v: 'HW Two'}]},
{c:[{v: 'HW One'}, {v: 'NODE'}]},
{c:[{v: 'hw0023'}, {v: 'HW One'}]},
{c:[{v: 'hw0025'}, {v: 'HW One'}]},
{c:[{v: 'hw0027'}, {v: 'HW One'}]},
{c:[{v: 'hw0026'}, {v: 'HW One'}]},
{c:[{v: 'hw0021'}, {v: 'HW One'}]},
{c:[{v: 'hw0022'}, {v: 'HW One'}]},
{c:[{v: 'hw0024'}, {v: 'HW One'}]},
{c:[{v: 'HW 3'}, {v: 'NODE'}]},
{c:[{v: 'hw0023'}, {v: 'HW 3'}]},
{c:[{v: 'hw0025'}, {v: 'HW 3'}]},
{c:[{v: 'hw0027'}, {v: 'HW 3'}]},
{c:[{v: 'hw0026'}, {v: 'HW 3'}]},
{c:[{v: 'hw0021'}, {v: 'HW 3'}]},
{c:[{v: 'hw0022'}, {v: 'HW 3'}]},
{c:[{v: 'hw0024'}, {v: 'HW 3'}]},
{c:[{v: 'HW 4'}, {v: 'NODE'}]},
{c:[{v: 'hw0023'}, {v: 'HW 4'}]},
{c:[{v: 'hw0025'}, {v: 'HW 4'}]},
{c:[{v: 'hw0027'}, {v: 'HW 4'}]},
{c:[{v: 'hw0026'}, {v: 'HW 4'}]},
{c:[{v: 'hw0021'}, {v: 'HW 4'}]},
{c:[{v: 'hw0022'}, {v: 'HW 4'}]},
{c:[{v: 'hw0024'}, {v: 'HW 4'}]},
{c:[{v: 'HW 5'}, {v: 'NODE'}]},
{c:[{v: 'hw0023'}, {v: 'HW 5'}]},
{c:[{v: 'hw0025'}, {v: 'HW 5'}]},
{c:[{v: 'hw0027'}, {v: 'HW 5'}]},
{c:[{v: 'hw0026'}, {v: 'HW 5'}]},
{c:[{v: 'hw0021'}, {v: 'HW 5'}]},
{c:[{v: 'hw0022'}, {v: 'HW 5'}]},
{c:[{v: 'hw0024'}, {v: 'HW 5'}]},
{c:[{v: 'HW 6'}, {v: 'NODE'}]},
{c:[{v: 'hw0023'}, {v: 'HW 6'}]},
{c:[{v: 'hw0025'}, {v: 'HW 6'}]},
{c:[{v: 'hw0027'}, {v: 'HW 6'}]},
{c:[{v: 'hw0026'}, {v: 'HW 6'}]},
{c:[{v: 'hw0021'}, {v: 'HW 6'}]},
{c:[{v: 'hw0022'}, {v: 'HW 6'}]},
{c:[{v: 'hw0024'}, {v: 'HW 6'}]},
{c:[{v: 'DEVHW One'}, {v: 'NODE'}]}

]
}, 0.5
)

var table = new google.visualization.OrgChart(document.getElementById
('chart_div'));

table.draw(data, {allowCollapse:1, size:'small'});

}

</script>
</head>

<body>
<div id="chart_div"></div>
</body>
</html>

=======================================================================

In browser (both IE and Firefox), observed following:

- The first layer (under NODE) draws correctly

- For second layer, ('HW Two' and 'HW 6') have child nodes dispayed
correctly

- For second layer nodes ('HW One', 'HW 3', 'HW 4', 'HW 5'), child
nodes are not displayed

Thanks,

Gyan

> > Gyan- Hide quoted text -
>
> - Show quoted text -

VizBoy

unread,

Mar 11, 2009, 5:16:54 AM3/11/09

to google-visua...@googlegroups.com

Hi,

So, your problem, as i see it, is you use the same values when you want different nodes in the visualization.
In the organizational chart's design it is important that a node is matched one-to-one against a value in the datatable.
So that you cannot have, for instance, hw0023 both as a child of HW One and HW 3, etc...

I guess your next question will be, so what if i want two nodes with hw0023 written on them, one under HW One and one under HW 3, etc..
Well, you can do that too!
What's displayed on the node is its formattedValue, not its value. Use the value property to keep nodes distinct, and use the formattedValue property to decide what will be written on the nodes.

I hope this clears things up a little.

- VizBoy.

GoLiRaja

unread,

Mar 11, 2009, 6:33:22 PM3/11/09

to Google Visualization API

Hello,

It works now, thanks for your help.

Thanks,

Gyan

> > > - Show quoted text -- Hide quoted text -

Reply all

Reply to author

Forward

Visualization: Organizational Chart - Node limit

GoLiRaja

VizBoy

GoLiRaja

VizBoy

GoLiRaja