Hi,
this is My dataTable:
['State', 'Income', 'Product'],
['KERALA', 10000, "Apple"],
['KERALA', 7000, "Nokia"],
['Tamil nadu', 10000, "Apple"],
['Tamil nadu', 20000, "SamSung"],
['west Bengal', 5000,"Sony"]
i want to show the tooltip like,
Apple 10000
Samsung 20000 in Tamilnadu
and
Apple 10000
Nokia 7000 in Kerala
but its takes only 2 value.
is it possible to do that?
This is My Javascript Code:
<html>
<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.1', { packages: ['geochart'] });
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['State', 'Income', 'Product'],
['KERALA', 10000, "Apple"],
['KERALA', 7000, "Nokia"],
['Tamil nadu', 10000, "Apple"],
['Tamil nadu', 20000, "SamSung"],
['west Bengal', 5000,"Sony"]
]);
var options = {
region: 'IN',
resolution: 'provinces',
width: 400,
height: 400,
colorAxis: {
//values: [-1, 0, 1],
colors: ['#FF0000']
}
};
options['tooltip'] = { isHtml: true };
// create a DataView to transform the data into the format you need
var view = new google.visualization.DataView(data);
view.setColumns([0, {
type: 'number',
calc: function (dt, row) {
// set the color values based on the 4th column
var val = dt.getValue(row, 1);
return val;
// if positive, return 1
// if negative, return -1
// if 0, return 0
// return (val > 0) ? 1 : ((val < 0) ? -1 :
0);
}
}, {
type: 'string',
role: 'tooltip',
calc: function (dt, row) {
// set up the tooltip
//alert(dt.getValue(row, 1) + ' 2010:\n' + dt.getValue(row,
2) + ' 2011:\n ' + dt.getValue(row, 3));
return dt.getValue(row, 1) + dt.getValue(row, 2);
}
}]);
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
geochart.draw(view, options);
google.visualization.events.addListener(geochart,
'select', function (eventOption) {
var item = geochart.getSelection();
var value = data.getValue(item[0].row, 1);
alert(value);
});
}
google.setOnLoadCallback(drawMarkersMap);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization"></div>
</body>
</html>
Pleae kindly help me to solve the problem.
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
