Hi VizGuy, Thanks for teh quick reply. I am also playing around with tooltip but tooltip seems to stop working as soon as i add a formatter in any of the column. Below is my dummy code i have for now. I basically want additional information like department etc to come up on tooltip formatted as i need but its not doing that.. is that how its supposed to work? If yes then i will use the mouseover event and drop the tooltip.
Also can you please let me know if download org chart as a PDF or an HTML is an option that is going to be added in future? <!-- copyright (c) 2009 Google inc. You are free to copy and use this sample. License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/ > <title> Google Visualization API Sample </title> <script type="text/javascript" src="http://www.google.com/jsapi";></ script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['orgchart']}); google.load("visualization", "1", {"packages": ["table"]}); </script> <script type="text/javascript"> 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.addColumn('number', 'numberofyears'); data.addRows(12); data.setColumnProperties(2,{allowHtml :true}); data.setCell(0, 0, 'Mike'); data.setCell(0, 2, 'The President'); data.setCell(1, 0, 'Jim', '<img src="silhouette.jpg"></img>Jim<br/ ><font color="red"><i>Vice President<i></font>'); // 'Jim', 'vice president'); data.setCell(1, 1, 'Mike'); data.setCell(1, 2, 'The Vice president'); data.setCell(2, 0, 'Alice'); data.setCell(2, 2, '<table><tr><td>Department:010</td></ tr><tr><td>Unit:0010</td></tr></table>'); data.setFormattedValue(2,2,'<table><tr><td>Department:010</ td></tr><tr><td>Unit:0010</td></tr></table>'); data.setCell(2, 1, 'Mike'); data.setCell(3, 0, 'Bob'); data.setCell(3, 1, 'Jim'); data.setCell(4, 0, 'Carol'); data.setCell(4, 1, 'Bob'); data.setCell(5, 0, 'parag'); data.setCell(5, 1, 'Alice'); data.setCell(6, 0, 'Sridhar'); data.setCell(6, 1, 'parag'); data.setCell(7, 0, 'Sridhar111'); data.setCell(7, 1, 'Sridhar'); data.setCell(8, 0, 'employee1'); data.setCell(8, 1, 'Sridhar'); data.setCell(9, 0, 'employee2'); data.setCell(9, 1, 'Sridhar'); data.setCell(10, 0, 'employee3'); data.setCell(10, 1, 'Sridhar'); data.setCell(11, 0, 'employee4'); data.setCell(11, 1, 'employee3'); data.setCell(1, 3, 25); data.setCell(2, 3, 10); data.setCell(3, 3, 12); data.setCell(4, 3, 23); data.setCell(5, 3, 18); data.setCell(6, 3, 5); data.setCell(7, 3, 2); data.setCell(8, 3, 4); data.setCell(9, 3, 15); data.setCell(10, 3, 1); data.setCell(11, 3, 8); // Create and draw the visualization. var orgchart = new google.visualization.OrgChart (document.getElementById('visualization')); orgchart.draw(data, {allowHtml: true,allowCollapse: true}); table = new google.visualization.Table (document.getElementById('visualizationtable')); var formatter = new google.visualization.BarFormat({width: 120}); formatter.min=0; formatter.max=5; formatter.format(data, 3); // Apply formatter to second column table.draw(data,{allowHtml: true}); google.visualization.events.addListener(table, 'select', function() { orgchart.setSelection(table.getSelection());}); //google.visualization.events.addListener(orgchart, 'onmouseover', function(e) { alert('Number of years of service for :'+data.getValue(e.row,0)+' is '+data.getValue(e.row,3));}); } google.setOnLoadCallback(drawVisualization); </script> </head> <body style="font-family: Arial;border: 0 none;"> <table width=100%> <tr> <td width=25%> <div id="visualizationtable"></div> </td> <td width=75%> <div id="visualization" ></div> </td> </tr> </table> </body> </html> On Jun 9, 10:55 am, VizGuy <[email protected]> wrote: > Hi, > > Styling can be done, also for tooltips. > I can't tell max capacity. I suppose it depends on the browser / os. > > Regards, > VizGuy > > On Tue, Jun 9, 2009 at 5:45 PM, myapplicationquestions < > > > > [email protected]> wrote: > > > Hi VizGuy, > > > Thats what i am planning to do.. i just wanted to know the max > > capacity if anyone has every tried it.. if not we will do a subset and > > only show some part of it. The other big thing which is holding me > > from taking this vs iLog org chart is the fact that i do not see nay > > download capability for the org chart . We need it in oor application > > so the org chart can be shared across people. The re-org is a future > > (2 years) requirement. Certain assumptions i have made is > > > 1) boxes can be styled as needed (please confirm if anyone has done > > that) > > 2) tootip can have allowHTML property so i can show a table of > > additional detail.. If not its fine i can use the mouseover to do > > that.. > > > Thanks, > > Parag > > > On Jun 9, 4:28 am, VizGuy <[email protected]> wrote: > > > Your main problem is going to be the concept of 100,000 nodes.This will > > not > > > work with this chart, or with any other web based org chart that I know. > > > You should create some backend logic to bring a subset of the nodes at a > > > time, so you can display only them, and on certain events reload the > > chart > > > with different data. > > > > Regards, > > > VizGuy > > > > On Tue, Jun 9, 2009 at 1:05 AM, myapplicationquestions < > > > > [email protected]> wrote: > > > > > Hi All, > > > > > I am looking at this for our application where we are required to > > > > chart as many as 100,000 people at a time. I wanted to know how > > > > scalable is google visulization for that kind of data. One of other > > > > requirements are > > > > > 1) download capaboility in pdf format. > > > > 2) employee image and additional data along side each person. I am > > > > assuming i can use someyhing like this tgo get the image next to teh > > > > box. all other details i can send via on mouse over. > > > > > data.setCell(1, 0, > > > > 'Jim', '<img src="aaa.jpg></img>Jim<br/><font > > > > color="red"><i>Vice President<i></font>'); > > > > > 3) re-org: This is a future requirement but is this something that > > > > will come in a later release? > > > > > Please let me know if this is all possible using google visualization > > > > > Thanks, > > > > Parag- Hide quoted text - > > > > - Show quoted text -- Hide quoted text - > > - Show quoted text - --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
