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 at
http://groups.google.com/group/google-visualization-api?hl=en.
