It is not supported by the treemap. However, it should be easy enough to add support for onmouseover and onmouseout like we have in other visualizations. Can you please add it as a feature request?
On Sun, May 23, 2010 at 4:27 PM, MartinOShea <[email protected]> wrote: > Thanks for the answer. This answers one part of the problem which I > had realised and can be used to give alert messages in Javascript or > to display the value in a div or other control. But can anyone advise > about mouseover? I know this isn't supported by the treemap > visualisation but has anyone any idea? > > On May 23, 5:29 pm, tay <[email protected]> wrote: >> You should be able to replace: >> >> else if (item.row != null) { >> var str = data.getFormattedValue(item.row, 0); >> message += '{row:' + item.row + ', column:none}; value (col >> 0) >> = ' + str + '\n'; >> >> } >> >> with your desired column. In the case that you want the value; >> var NAME = 0 >> var TRADE = 2 >> var CHANGE = 3 >> >> var str = data.getFormattedValue(item.row, TRADE); >> will get you the market trade volume (in this example) for the row >> selected. >> >> On May 22, 11:43 am, MartinOShea <[email protected]> wrote: >> >> >> >> >> >> > My code so far is: >> >> > <html> >> > <head> >> > <script type="text/javascript" src="http://www.google.com/jsapi";></ >> > script> >> > <script type="text/javascript"> >> >> > google.load("visualization", "1", {packages:["treemap"]}); >> > google.setOnLoadCallback(drawChart); >> > function drawChart() { >> > // Create and populate the data table. >> > data = new google.visualization.DataTable(); >> >> > data.addColumn('string', 'Region'); >> > data.addColumn('string', 'Parent'); >> > data.addColumn('number', 'Market trade volume (size)'); >> > data.addColumn('number', 'Market increase/decrease >> > (color)'); >> > data.addRows([ >> > ["Global",null,0,0], >> > ["America","Global",0,0], >> > ["Europe","Global",0,0], >> > ["Asia","Global",0,0], >> > ["Australia","Global",0,0], >> > ["Africa","Global",0,0], >> > ["Brazil","America",11,10], >> > ["USA","America",52,31], >> > ["Mexico","America",24,12], >> > ["Canada","America",16,-23], >> > ["France","Europe",42,-11], >> > ["Germany","Europe",31,-2], >> > ["Sweden","Europe",22,-13], >> > ["Italy","Europe",17,4], >> > ["UK","Europe",21,-5], >> > ["China","Asia",36,4], >> > ["Japan","Asia",20,-12], >> > ["Tokyo","Japan",30,-8], >> > ["Sapporo","Japan",70,-9], >> > ["India","Asia",40,63], >> > ["Laos","Asia",4,34], >> > ["Mongolia","Asia",1,-5], >> > ["Israel","Asia",12,24], >> > ["Iran","Asia",18,13], >> > ["Pakistan","Asia",11,-52], >> > ["Egypt","Africa",21,0], >> > ["S. Africa","Africa",30,43], >> > ["Sudan","Africa",12,2], >> > ["Congo","Africa",10,12], >> > ["Zaire","Africa",8,10] >> > ]); >> >> > // Create and draw the visualization. >> > tree = new >> > google.visualization.TreeMap(document.getElementById('visualization')); >> >> > tree.draw(data, { >> > minColor: '#f00', >> > midColor: '#ddd', >> > maxColor: '#0d0', >> > headerHeight: 15, >> > fontColor: 'black', >> > showScale: false}); >> >> > google.visualization.events.addListener(tree, 'select', >> > selectHandler); >> > } >> >> > function selectHandler() { >> >> > var selection = tree.getSelection(); >> > var message = ''; >> > for (var i = 0; i < selection.length; i++) { >> > var item = selection[i]; >> > if (item.row != null && item.column != null) { >> > var str = data.getFormattedValue(item.row, item.column); >> > message += '{row:' + item.row + ',column:' + item.column + '} >> > = ' + str + '\n'; >> > } else if (item.row != null) { >> > var str = data.getFormattedValue(item.row, 0); >> > message += '{row:' + item.row + ', column:none}; value (col 0) >> > = ' + str + '\n'; >> > } else if (item.column != null) { >> > var str = data.getFormattedValue(0, item.column); >> > message += '{row:none, column:' + item.column + '}; value (row >> > 0) = ' + str + '\n'; >> > } >> > } >> > if (message == '') { >> > message = 'nothing'; >> > } >> > alert('You selected ' + message); >> > } >> >> > </script> >> > </head> >> >> > <body> >> >> > <div id="visualization" style="width: 1100px; height: 500px;"></ >> > 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 >> > athttp://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 >> athttp://groups.google.com/group/google-visualization-api?hl=en.- 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. > > -- - --- Tayeb Al Karim [email protected] -- 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.
