I suppose the problem is not with the formatter.The thing is that the org chart works with a table of two or three columns, and if there are three, the third is taken as the tool tip. In your case there are four, and so it is just ignore. Solution: Use data view over the data table that contains only the three columns that you need, and pass it to the org chart draw() method.
Regards, VizGuy On Fri, Jun 12, 2009 at 5:40 AM, myapplicationquestions < [email protected]> wrote: > > any update on this? > > On Jun 9, 11:13 am, myapplicationquestions <[email protected]> > wrote: > > 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 -- 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 -~----------~----~----~----~------~----~------~--~---
