RegionClick Help
1,268 views
Skip to first unread message
Methexis
Feb 8, 2012, 5:41:03 AM2/8/12
to Google Visualization API
Guys,
I have been asked if I can embed hyperlinks in my code for the both
the GeoMap and Bar Chart visualisations.
I am assuming I use RegionClick for the geo chart, what would I use
for the bar chart?!
Also I have had a look and I cant find anything that really explains,
the different parts of the region click code, could anyone point me in
the direction of a good example or maybe just quickly show me for one
country using my code below?!
Any help would be very much appreciated.
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></
script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = new google.visualization.DataTable();
data.addRows( 79 );
data.addColumn('string', 'Country');
data.addColumn('number', 'geo-threshold');
data.setValue(0,0,'LA');
data.setValue(0,1,0);
data.setValue(1,0,'PT');
data.setValue(1,1,0);
data.setValue(2,0,'TH');
data.setValue(2,1,0);
data.setValue(3,0,'YE');
data.setValue(3,1,0);
data.setValue(4,0,'AE');
data.setValue(4,1,62.6);
data.setValue(5,0,'AF');
data.setValue(5,1,100);
data.setValue(6,0,'AO');
data.setValue(6,1,100);
data.setValue(7,0,'AR');
data.setValue(7,1,61.38);
data.setValue(8,0,'AT');
data.setValue(8,1,18.47);
data.setValue(9,0,'AU');
data.setValue(9,1,98.16);
data.setValue(10,0,'AZ');
data.setValue(10,1,100);
data.setValue(11,0,'BH');
data.setValue(11,1,100);
data.setValue(12,0,'BM');
data.setValue(12,1,100);
data.setValue(13,0,'BO');
data.setValue(13,1,100);
data.setValue(14,0,'BR');
data.setValue(14,1,97.39);
data.setValue(15,0,'BS');
data.setValue(15,1,100);
data.setValue(16,0,'CA');
data.setValue(16,1,100);
data.setValue(17,0,'CL');
data.setValue(17,1,79.04);
data.setValue(18,0,'CN');
data.setValue(18,1,100);
data.setValue(19,0,'CO');
data.setValue(19,1,81.46);
data.setValue(20,0,'CR');
data.setValue(20,1,100);
data.setValue(21,0,'CU');
data.setValue(21,1,100);
data.setValue(22,0,'DO');
data.setValue(22,1,87.16);
data.setValue(23,0,'DZ');
data.setValue(23,1,70.06);
data.setValue(24,0,'EC');
data.setValue(24,1,100);
data.setValue(25,0,'EG');
data.setValue(25,1,100);
data.setValue(26,0,'ES');
data.setValue(26,1,100);
data.setValue(27,0,'ET');
data.setValue(27,1,100);
data.setValue(28,0,'FR');
data.setValue(28,1,73.37);
data.setValue(29,0,'GB');
data.setValue(29,1,100);
data.setValue(30,0,'GR');
data.setValue(30,1,100);
data.setValue(31,0,'GT');
data.setValue(31,1,100);
data.setValue(32,0,'HK');
data.setValue(32,1,100);
data.setValue(33,0,'HN');
data.setValue(33,1,100);
data.setValue(34,0,'ID');
data.setValue(34,1,100);
data.setValue(35,0,'IL');
data.setValue(35,1,100);
data.setValue(36,0,'IN');
data.setValue(36,1,100);
data.setValue(37,0,'IQ');
data.setValue(37,1,100);
data.setValue(38,0,'IT');
data.setValue(38,1,100);
data.setValue(39,0,'JP');
data.setValue(39,1,100);
data.setValue(40,0,'KE');
data.setValue(40,1,100);
data.setValue(41,0,'KH');
data.setValue(41,1,100);
data.setValue(42,0,'KR');
data.setValue(42,1,100);
data.setValue(43,0,'KW');
data.setValue(43,1,100);
data.setValue(44,0,'KZ');
data.setValue(44,1,77.71);
data.setValue(45,0,'LB');
data.setValue(45,1,100);
data.setValue(46,0,'LY');
data.setValue(46,1,66.51);
data.setValue(47,0,'MA');
data.setValue(47,1,100);
data.setValue(48,0,'MN');
data.setValue(48,1,100);
data.setValue(49,0,'MU');
data.setValue(49,1,100);
data.setValue(50,0,'MX');
data.setValue(50,1,100);
data.setValue(51,0,'MY');
data.setValue(51,1,100);
data.setValue(52,0,'NL');
data.setValue(52,1,100);
data.setValue(53,0,'NZ');
data.setValue(53,1,77.76);
data.setValue(54,0,'OM');
data.setValue(54,1,100);
data.setValue(55,0,'PA');
data.setValue(55,1,100);
data.setValue(56,0,'PE');
data.setValue(56,1,94.08);
data.setValue(57,0,'PG');
data.setValue(57,1,100);
data.setValue(58,0,'PH');
data.setValue(58,1,100);
data.setValue(59,0,'PK');
data.setValue(59,1,42.95);
data.setValue(60,0,'PL');
data.setValue(60,1,100);
data.setValue(61,0,'PR');
data.setValue(61,1,100);
data.setValue(62,0,'QA');
data.setValue(62,1,86.42);
data.setValue(63,0,'RO');
data.setValue(63,1,0.14);
data.setValue(64,0,'RU');
data.setValue(64,1,58.56);
data.setValue(65,0,'SA');
data.setValue(65,1,98.49);
data.setValue(66,0,'SG');
data.setValue(66,1,100);
data.setValue(67,0,'SK');
data.setValue(67,1,100);
data.setValue(68,0,'SV');
data.setValue(68,1,100);
data.setValue(69,0,'SY');
data.setValue(69,1,100);
data.setValue(70,0,'TM');
data.setValue(70,1,100);
data.setValue(71,0,'TR');
data.setValue(71,1,97.06);
data.setValue(72,0,'TT');
data.setValue(72,1,100);
data.setValue(73,0,'TW');
data.setValue(73,1,100);
data.setValue(74,0,'US');
data.setValue(74,1,100);
data.setValue(75,0,'VE');
data.setValue(75,1,100);
data.setValue(76,0,'VN');
data.setValue(76,1,100);
data.setValue(77,0,'WS');
data.setValue(77,1,100);
data.setValue(78,0,'ZA');
data.setValue(78,1,100);
var options = {colors:['#002e5f','#CCCCCC']};
var container = document.getElementById('map_canvas');
var geochart = new google.visualization.GeoChart(container);
geochart.draw(data, options);
};
</script>
</head>
<body>
<div id='map_canvas'></div>
</body>
</html>
I have been asked if I can embed hyperlinks in my code for the both
the GeoMap and Bar Chart visualisations.
I am assuming I use RegionClick for the geo chart, what would I use
for the bar chart?!
Also I have had a look and I cant find anything that really explains,
the different parts of the region click code, could anyone point me in
the direction of a good example or maybe just quickly show me for one
country using my code below?!
Any help would be very much appreciated.
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></
script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = new google.visualization.DataTable();
data.addRows( 79 );
data.addColumn('string', 'Country');
data.addColumn('number', 'geo-threshold');
data.setValue(0,0,'LA');
data.setValue(0,1,0);
data.setValue(1,0,'PT');
data.setValue(1,1,0);
data.setValue(2,0,'TH');
data.setValue(2,1,0);
data.setValue(3,0,'YE');
data.setValue(3,1,0);
data.setValue(4,0,'AE');
data.setValue(4,1,62.6);
data.setValue(5,0,'AF');
data.setValue(5,1,100);
data.setValue(6,0,'AO');
data.setValue(6,1,100);
data.setValue(7,0,'AR');
data.setValue(7,1,61.38);
data.setValue(8,0,'AT');
data.setValue(8,1,18.47);
data.setValue(9,0,'AU');
data.setValue(9,1,98.16);
data.setValue(10,0,'AZ');
data.setValue(10,1,100);
data.setValue(11,0,'BH');
data.setValue(11,1,100);
data.setValue(12,0,'BM');
data.setValue(12,1,100);
data.setValue(13,0,'BO');
data.setValue(13,1,100);
data.setValue(14,0,'BR');
data.setValue(14,1,97.39);
data.setValue(15,0,'BS');
data.setValue(15,1,100);
data.setValue(16,0,'CA');
data.setValue(16,1,100);
data.setValue(17,0,'CL');
data.setValue(17,1,79.04);
data.setValue(18,0,'CN');
data.setValue(18,1,100);
data.setValue(19,0,'CO');
data.setValue(19,1,81.46);
data.setValue(20,0,'CR');
data.setValue(20,1,100);
data.setValue(21,0,'CU');
data.setValue(21,1,100);
data.setValue(22,0,'DO');
data.setValue(22,1,87.16);
data.setValue(23,0,'DZ');
data.setValue(23,1,70.06);
data.setValue(24,0,'EC');
data.setValue(24,1,100);
data.setValue(25,0,'EG');
data.setValue(25,1,100);
data.setValue(26,0,'ES');
data.setValue(26,1,100);
data.setValue(27,0,'ET');
data.setValue(27,1,100);
data.setValue(28,0,'FR');
data.setValue(28,1,73.37);
data.setValue(29,0,'GB');
data.setValue(29,1,100);
data.setValue(30,0,'GR');
data.setValue(30,1,100);
data.setValue(31,0,'GT');
data.setValue(31,1,100);
data.setValue(32,0,'HK');
data.setValue(32,1,100);
data.setValue(33,0,'HN');
data.setValue(33,1,100);
data.setValue(34,0,'ID');
data.setValue(34,1,100);
data.setValue(35,0,'IL');
data.setValue(35,1,100);
data.setValue(36,0,'IN');
data.setValue(36,1,100);
data.setValue(37,0,'IQ');
data.setValue(37,1,100);
data.setValue(38,0,'IT');
data.setValue(38,1,100);
data.setValue(39,0,'JP');
data.setValue(39,1,100);
data.setValue(40,0,'KE');
data.setValue(40,1,100);
data.setValue(41,0,'KH');
data.setValue(41,1,100);
data.setValue(42,0,'KR');
data.setValue(42,1,100);
data.setValue(43,0,'KW');
data.setValue(43,1,100);
data.setValue(44,0,'KZ');
data.setValue(44,1,77.71);
data.setValue(45,0,'LB');
data.setValue(45,1,100);
data.setValue(46,0,'LY');
data.setValue(46,1,66.51);
data.setValue(47,0,'MA');
data.setValue(47,1,100);
data.setValue(48,0,'MN');
data.setValue(48,1,100);
data.setValue(49,0,'MU');
data.setValue(49,1,100);
data.setValue(50,0,'MX');
data.setValue(50,1,100);
data.setValue(51,0,'MY');
data.setValue(51,1,100);
data.setValue(52,0,'NL');
data.setValue(52,1,100);
data.setValue(53,0,'NZ');
data.setValue(53,1,77.76);
data.setValue(54,0,'OM');
data.setValue(54,1,100);
data.setValue(55,0,'PA');
data.setValue(55,1,100);
data.setValue(56,0,'PE');
data.setValue(56,1,94.08);
data.setValue(57,0,'PG');
data.setValue(57,1,100);
data.setValue(58,0,'PH');
data.setValue(58,1,100);
data.setValue(59,0,'PK');
data.setValue(59,1,42.95);
data.setValue(60,0,'PL');
data.setValue(60,1,100);
data.setValue(61,0,'PR');
data.setValue(61,1,100);
data.setValue(62,0,'QA');
data.setValue(62,1,86.42);
data.setValue(63,0,'RO');
data.setValue(63,1,0.14);
data.setValue(64,0,'RU');
data.setValue(64,1,58.56);
data.setValue(65,0,'SA');
data.setValue(65,1,98.49);
data.setValue(66,0,'SG');
data.setValue(66,1,100);
data.setValue(67,0,'SK');
data.setValue(67,1,100);
data.setValue(68,0,'SV');
data.setValue(68,1,100);
data.setValue(69,0,'SY');
data.setValue(69,1,100);
data.setValue(70,0,'TM');
data.setValue(70,1,100);
data.setValue(71,0,'TR');
data.setValue(71,1,97.06);
data.setValue(72,0,'TT');
data.setValue(72,1,100);
data.setValue(73,0,'TW');
data.setValue(73,1,100);
data.setValue(74,0,'US');
data.setValue(74,1,100);
data.setValue(75,0,'VE');
data.setValue(75,1,100);
data.setValue(76,0,'VN');
data.setValue(76,1,100);
data.setValue(77,0,'WS');
data.setValue(77,1,100);
data.setValue(78,0,'ZA');
data.setValue(78,1,100);
var options = {colors:['#002e5f','#CCCCCC']};
var container = document.getElementById('map_canvas');
var geochart = new google.visualization.GeoChart(container);
geochart.draw(data, options);
};
</script>
</head>
<body>
<div id='map_canvas'></div>
</body>
</html>
asgallant
Feb 8, 2012, 9:16:32 AM2/8/12
to google-visua...@googlegroups.com
What you probably want to use is the 'select' event, not 'regionClick'. When the select event fires, you call the #getSelection method of the chart, which returns and object with row and/or column information so you can reference the DataTable to find out what the user clicked on. You can then emulate a clicked link if you so desire (by setting window.location to whatever your desired destination is). You would use the same method for both BarCharts and GeoMaps.
As an aside, the Flashed-based GeoMaps have been replaced with the SVG-based GeoCharts (which have less compatibility issues). They don't quite support the same feature set, but almost anything you can do in the GeoMaps, you can do in the GeoCharts. I would recommend switching if there isn't anything you specifically need from the GeoMaps that the GeoCharts don't have.
asgallant
Feb 8, 2012, 9:25:37 AM2/8/12
to google-visua...@googlegroups.com
Well, look at me not paying attention: you said GeoMap at the top but are using GeoCharts in your code. You would still use the same method for registering the clicks as the GeoMaps; I wrote up a jsfiddle as an example:
http://jsfiddle.net/7gfJu/
Methexis
Feb 8, 2012, 11:53:14 AM2/8/12
to Google Visualization API
Excellent!
I will give it a shot trying to embed a hyperlink in! If this works I
can not thank you enough!
If I cant get it working would it be possible to come back to you for
a bit more help?!
What I am looking for is a different link per country/bar in the
chart.
Thanks Again!
I will give it a shot trying to embed a hyperlink in! If this works I
can not thank you enough!
If I cant get it working would it be possible to come back to you for
a bit more help?!
What I am looking for is a different link per country/bar in the
chart.
Thanks Again!
asgallant
Feb 8, 2012, 12:04:59 PM2/8/12
to google-visua...@googlegroups.com
You're welcome.
Reply all
Reply to author
Forward
0 new messages