There are a few things to note here:
1) the GeoCharts don't support HTML tooltips yet, so the options['tooltip']
= { isHtml: true }; line does nothing.
2) using line breaks ("\n") in tooltips is not supported. Chrome, Firefox,
and IE 9+ ignore them, and they cause problems in IE 7 and 8 (as you can
see with your tooltips).
Other than the tooltip problem, the code you posted runs fine in all
browsers (see http://jsfiddle.net/asgallant/MZ8u2/). Removing the line
breaks fixes the tooltips (see http://jsfiddle.net/asgallant/MZ8u2/6/).
On Monday, July 8, 2013 4:50:57 AM UTC-4, siva kumar wrote:
>
>
>
> Hi,
> After i am removing Comma,In IE 8 Map controls are doesn't get
> display.
>
> In IE 7 tooltip are not displaying correctly like in the attachment file.
>
>
> 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([
> ['Office', 'Total Staff', '# of IT Staff', '# of HR staff', '#of
> Sales staff'],
> ['KERALA', 53, 15, -4, -7],
> ['west Bengal', 96, 50, 14, 21]
>
> ]);
>
> 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, 3);
> // 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) + ' 2010:\n ' +
> dt.getValue(row, 2) + ' 2011:\n ' + dt.getValue(row, 3);
>
> }
> }]);
> 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>
>
>
>
>>>>>
--
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.
