// Create and draw the visualization.
var chart = new google.visualization.OrgChart(document.getElementById(
'visualization'));
chart.draw(data, {allowHtml: true, allowCollapse: true});
chart.collapse(0, true);
Use the collapse method.
ChartMan
On Thu, Feb 16, 2012 at 5:45 AM, maxmas <[email protected]> wrote:
> Hi,
>
> How to closed all nodes in Organizational Chart when it started?
> Only show the first node.
> Does someone can post sample code to teach me?
>
> Original Sample Code:
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
> <script type='text/javascript' src='https://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();
> data.addColumn('string', 'Name');
> data.addColumn('string', 'Manager');
> data.addColumn('string', 'ToolTip');
> data.addRows([
> [{v:'Mike', f:'Mike<div style="color:red; font-
> style:italic">BOSS</div>'}, '', ''],
> [{v:'Sue', f:'Sue<div style="color:red; font-
> style:italic">Manager</div>'}, 'Mike', ''],
> [{v:'Frank', f:'Frank<div style="color:red; font-
> style:italic">Manager</div>'}, 'Mike', ''],
> [{v:'Alice', f:'Alice<div style="color:red; font-
> style:italic">Leader</div>'}, 'Sue', ''],
> [{v:'Ted', f:'Ted<div style="color:red; font-
> style:italic">Leader</div>'}, 'Sue', ''],
> [{v:'Molly', f:'Molly<div style="color:red; font-
> style:italic">Leader</div>'}, 'Frank', ''],
> [{v:'Bob', f:'Bob<div style="color:red; font-
> style:italic">Leader</div>'}, 'Frank', ''],
> [{v:'Mary', f:'Mary<div style="color:red; font-
> style:italic">Sales</div>'}, 'Alice', ''],
> [{v:'Theodore', f:'Theodore<div style="color:red; font-
> style:italic">Sales</div>'}, 'Alice', ''],
> [{v:'Margarete', f:'Margarete<div style="color:red; font-
> style:italic">Sales</div>'}, 'Ted', ''],
> [{v:'Doug', f:'Doug<div style="color:red; font-
> style:italic">Sales</div>'}, 'Ted', ''],
> [{v:'Rose', f:'Rose<div style="color:red; font-
> style:italic">Sales</div>'}, 'Molly', ''],
> [{v:'Thunder', f:'Thunder<div style="color:red; font-
> style:italic">Sales</div>'}, 'Molly', ''],
> [{v:'Peaches', f:'Peaches<div style="color:red; font-
> style:italic">Sales</div>'}, 'Bob', ''],
> [{v:'Rocky', f:'Rocky<div style="color:red; font-
> style:italic">Sales</div>'}, 'Bob', ''],
> ]);
>
> var chart = new
> google.visualization.OrgChart(document.getElementById('chart_div'));
> chart.draw(data,
>
> {'allowHtml':true,'allowCollapse':true,'size':'small','selectionColor':'yellow'});
> }
> </script>
> </head>
>
> <body>
> <div id='chart_div' style="font-size: 5px;"></div>
>
> </body>
> </html>
>
> --
> You received this message because you are subscribed to the Google Groups
> "Google Visualization API" group.
> To post to this group, send email to
> [email protected].
> To unsubscribe from this group, send email to
> [email protected].
> For more options, visit this group at
> http://groups.google.com/group/google-visualization-api?hl=en.
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
