orwant
commented
9 years ago ok sorry there is a perfectly good way of doing this by storing the previous hovered
row and reseting it back to an original value on another mouseover event or the mouseout
of the vis div
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!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: ['treemap']});
</script>
<script type="text/javascript">;
var lastHoveredRow = 0;
var data;
var treemap;
function drawVisualization() {
// Create and populate the data table.
data = new google.visualization.DataTable();
data.addColumn('string', 'Location');
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],
["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],
["Zair","Africa",8,10],
]);
// Create and draw the visualization.
treemap = new google.visualization.TreeMap(document.getElementById('visualization'));
treemap.draw(data, {
minColor: 'red',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black',
showScale: true});
// When a node is mouse-overed
google.visualization.events.addListener(treemap, 'onmouseover', function(e)
{
if (e.row > 0) {
//change formatted value back to its original for the previous hovered
row
if (lastHoveredRow != 0)
data.setFormattedValue(lastHoveredRow, 0, data.getValue(lastHoveredRow,
0));
var txt = data.getValue(e.row, 0) + '--add this';
data.setFormattedValue(e.row, 0, txt);
// Create and draw the visualization.
treemap.draw(data, {
minColor: 'red',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black',
showScale: true});
}
else
resetLastHoveredRow();
//set last hovered row so it can be changed back to the original value later
lastHoveredRow = e.row;
});
}
google.setOnLoadCallback(drawVisualization);
function resetLastHoveredRow() {
if (lastHoveredRow != 0) {
data.setFormattedValue(lastHoveredRow, 0, data.getValue(lastHoveredRow, 0));
treemap.draw(data, {
minColor: 'red',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black',
showScale: true});
}
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;" onmouseout="resetLastHoveredRow();"></div>
</body>
</html>Original issue reported on code.google.com by rmconigliaro on 2011-02-23 03:58:02
Original issue reported on code.google.com by
rmconigliaroon 2011-02-22 04:30:52