Google Chart Tools Geomap passing apostrophes
221 views
Skip to first unread message
Rob
Mar 30, 2012, 11:11:24 AM3/30/12
to Google Visualization API
I'm pretty new to using the Google Chart Tools and am experimenting
using the Geomap so please excuse me if I am asking something obvious.
I am trying to plot some figures on the map for each country but am
having trouble with countries which contain an apostophe such as: Côte
d'Ivoire. I can plot the country on the map using the region code CI
but when I try to put the countries name in the Hover Text column it
breaks the page. If I escape the apostrophe then it simply displays a
space. How should I escape or encode the the apostrophe in order to
display it?
Here is a simplified version of my code:
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></
script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geomap']});
google.setOnLoadCallback(drawMap);
function drawMap() {
var data = new google.visualization.DataTable();
data.addRows(4);
data.addColumn('string', 'Country');
data.addColumn('number', 'Documents');
data.addColumn('string', 'HOVER', 'HoverText');
data.setValue(0, 0, 'CI');
data.setValue(0, 1, 800);
data.setValue(0, 2, 'Côte d'Ivoire');
data.setValue(1, 0, 'RU');
data.setValue(1, 1, 300);
data.setValue(1, 2, 'Russia');
data.setValue(2, 0, 'BR');
data.setValue(2, 1, 400);
data.setValue(2, 2, 'Brazil');
data.setValue(3, 0, 'FR');
data.setValue(3, 1, 700);
data.setValue(3, 2, 'France');
var options = {};
options['dataMode'] = 'regions';
options['width'] = '1082';
options['height'] = '700';
var container = document.getElementById('map_canvas');
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);
};
</script>
</head>
<body>
<div id='map_canvas'></div>
</body>
</html>
using the Geomap so please excuse me if I am asking something obvious.
I am trying to plot some figures on the map for each country but am
having trouble with countries which contain an apostophe such as: Côte
d'Ivoire. I can plot the country on the map using the region code CI
but when I try to put the countries name in the Hover Text column it
breaks the page. If I escape the apostrophe then it simply displays a
space. How should I escape or encode the the apostrophe in order to
display it?
Here is a simplified version of my code:
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></
script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geomap']});
google.setOnLoadCallback(drawMap);
function drawMap() {
var data = new google.visualization.DataTable();
data.addRows(4);
data.addColumn('string', 'Country');
data.addColumn('number', 'Documents');
data.addColumn('string', 'HOVER', 'HoverText');
data.setValue(0, 0, 'CI');
data.setValue(0, 1, 800);
data.setValue(0, 2, 'Côte d'Ivoire');
data.setValue(1, 0, 'RU');
data.setValue(1, 1, 300);
data.setValue(1, 2, 'Russia');
data.setValue(2, 0, 'BR');
data.setValue(2, 1, 400);
data.setValue(2, 2, 'Brazil');
data.setValue(3, 0, 'FR');
data.setValue(3, 1, 700);
data.setValue(3, 2, 'France');
var options = {};
options['dataMode'] = 'regions';
options['width'] = '1082';
options['height'] = '700';
var container = document.getElementById('map_canvas');
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);
};
</script>
</head>
<body>
<div id='map_canvas'></div>
</body>
</html>
asgallant
Mar 30, 2012, 11:53:25 AM3/30/12
to google-visua...@googlegroups.com
This may be a bug in the Flash code that generates GeoMaps. If you switch to SVG-based GeoCharts, the problem goes away:
http://jsfiddle.net/gQbnv/
Rob
Apr 2, 2012, 10:36:15 AM4/2/12
to Google Visualization API
Thanks for this, I hadn't realised that you could do that. I'll give
it a try :)
it a try :)
Reply all
Reply to author
Forward
0 new messages