Add Value on Google Treemap
808 views
Skip to first unread message
Zoro Swordsman
May 17, 2013, 6:45:07 AM5/17/13
to google-visua...@googlegroups.com
Hi, may I know can I show the value on the treemap? Just like a mouseover function on other google chart. Cos I saw on the sample at google playground, it only show the 'name' of that area instead of showing the 'value'. Can I know what is the coding?
Thank you.
asgallant
May 17, 2013, 9:57:56 AM5/17/13
to google-visua...@googlegroups.com
If I recall correctly, the TreeMapCharts do not yet support adding values to the tooltips, nor do they support custom tooltips. You can create your own tooltips by registering "onmouseover" and "onmouseout" event handlers for the chart (these events pass an object containing the row of the DataTable that the moused over element is in; you can use this information to fetch data and populate your tooltip). Here's an example to get you started: http://jsfiddle.net/asgallant/fR7a9/ (note this example uses the jQuery library to assist with the tooltip; you can do it all without jQuery if you don't use the library)..
Zoro Swordsman
May 17, 2013, 9:29:40 PM5/17/13
to google-visua...@googlegroups.com
Okay. This is what I mean. Thank you so much.
Zoro Swordsman
May 18, 2013, 1:01:21 AM5/18/13
to google-visua...@googlegroups.com
Hi,I have copy all the coding and create a new HTML file but I don know why the mouseover function on the treemap is not working like the 'Result'. I upload the file and can you help me to check where is the error?
On Friday, May 17, 2013 6:45:07 PM UTC+8, Zoro Swordsman wrote:
Thank you.
On Friday, May 17, 2013 6:45:07 PM UTC+8, Zoro Swordsman wrote:
asgallant
May 18, 2013, 1:23:00 AM5/18/13
to google-visua...@googlegroups.com
That example code uses jQuery to create the tooltips; if you want to use the code as-is, you need to add a script tag for jQuery, like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Zoro Swordsman
May 18, 2013, 1:45:24 AM5/18/13
to google-visua...@googlegroups.com
is it add like this (the one that i highlighted with red)? but i tried and still not working.. may i know why?
On Friday, May 17, 2013 6:45:07 PM UTC+8, Zoro Swordsman wrote:
<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>
<style>
#tooltip {
display: none;
position: absolute;
height: 2.5em;
width: 60px;
background-color: #FFFFFF;
padding-left: 5px;
}
#tooltipTopLine {
font-weight: bold;
}
#tooltipBottomLine {
}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['treemap']});
var gDataXMLservcost = null; // your data here
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
['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.
var treemap = new google.visualization.TreeMap(document.getElementById('visualization'));
google.visualization.events.addListener(treemap, 'onmouseover', function (e) {
var provider = data.getValue(e.row, 1);
var totalService = data.getValue(e.row, 2);
// populate the tooltip with data
$('#tooltipTopLine').html(provider);
$('#tooltipBottomLine').html(totalService);
// show the tooltip
$('#tooltip').show();
});
google.visualization.events.addListener(treemap, 'onmouseout', function (e) {
// hide the tooltip
$('#tooltip').hide();
});
treemap.draw(data, {
height: 400,
width: 600,
minColor: 'red',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black',
showScale: true,
showTooltips: false});
}
google.setOnLoadCallback(drawVisualization);
// make the tooltip div follow the mouse
$(function () {
$('#visualization').mousemove(function (e) {
$('#tooltip').css({
left: e.pageX,
top: e.pageY - 40
});
});
});
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
<div id="tooltip"> <span id="tooltipTopLine"></span>
<br /> <span id="tooltipBottomLine"></span>
</div>
</body>
</html>
On Friday, May 17, 2013 6:45:07 PM UTC+8, Zoro Swordsman wrote:
asgallant
May 18, 2013, 10:50:22 AM5/18/13
to google-visua...@googlegroups.com
Are you running this from your local machine or a webserver? If it's your local machine, you need to add "http:" to the jQuery script's url.
Zoro Swordsman
May 18, 2013, 12:08:44 PM5/18/13
to google-visua...@googlegroups.com
I fixed it already.. Thank you so much~!
On Friday, May 17, 2013 6:45:07 PM UTC+8, Zoro Swordsman wrote:
On Friday, May 17, 2013 6:45:07 PM UTC+8, Zoro Swordsman wrote:
Reply all
Reply to author
Forward
0 new messages