Re: Adding links to Geo Charts?

Marc Lucchini

unread,

Jun 25, 2012, 7:44:45 PM6/25/12

to google-visua...@googlegroups.com

You'll have to listen to the "select" or the "regionClick" event.

An example using the select event: http://jsfiddle.net/dz2xS

If your country pages already exist and you can't or don't want to change their URLs, you may have to put these URLs in your datatable and pass a dataview to the geochart.

Le lundi 25 juin 2012 23:25:41 UTC+2, Susanna Murley a écrit :

I want to create a geochart that allows me to set urls for regions. For example, if someone clicks on California in my map, I want it to link to a separate page on my site. How do I do this?

asgallant

unread,

Jun 26, 2012, 11:19:22 AM6/26/12

to google-visua...@googlegroups.com

Sure, you can do that. Just replace the "window.open(...)" call (in the 'select' event handler in Marc's example code) with whatever code you need to use to display the content you want.

On Tuesday, June 26, 2012 1:42:14 AM UTC-4, Andrea Nelson Mauro wrote:

Marc: i'm looking for something like this, but the onclick event could be an alert box or (better) some lightbox, or parent object (better+)...

Susanna Murley

unread,

Jun 26, 2012, 2:12:54 PM6/26/12

to google-visua...@googlegroups.com

Ok, I've gotten close, but I know I'm missing something. I want to open the link only if we have a page for that state, so I've added a 1 and a 0 to show whether or not we have that state. How do I add an if clause to the select function? Also, how do I tell it not to display "site" in the info window?

Thanks for your help!

Susanna

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
  google.load('visualization', '1', {packages: ['geochart']});

  function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
  ['State', 'Site'],
['Alabama', 0],
  ['Alaska', 0],
  ['American Samoa', 0],
  ['Arizona', 1],
  ['Arkansas', 0],
  ['California', 1],
  ['Colorado', 1],
  ['Connecticut', 0],
  ['Delaware', 0],
  ['District of Columbia', 0],
  ['Florida', 0],
  ['Georgia', 0],
  ['Guam', 0],
  ['Hawaii', 1],
  ['Idaho', 0],
  ['Illinois', 0],
  ['Indiana', 0],
  ['Iowa', 0],
  ['Kansas', 0],
  ['Kentucky', 0],
  ['Louisiana', 0],
  ['Maine', 0],
  ['Maryland', 1],
  ['Massachusetts', 1],
  ['Michigan', 0],
  ['Minnesota', 0],
  ['Mississippi', 0],
  ['Missouri', 0],
  ['Montana', 0],
  ['Nebraska', 0],
  ['Nevada', 1],
  ['New Hampshire', 0],
  ['New Jersey', 1],
  ['New Mexico', 0],
  ['New York', 1],
  ['North Carolina', 0],
  ['North Dakota', 0],
  ['Northern Marianas Islands', 0],
  ['Ohio', 1],
  ['Oklahoma', 0],
  ['Oregon', 0],
  ['Pennsylvania', 1],
  ['Puerto Rico', 0],
  ['Rhode Island', 0],
  ['South Carolina', 0],
  ['South Dakota', 0],
  ['Tennessee', 0],
  ['Texas', 0],
  ['Utah', 0],
  ['Vermont', 0],
  ['Virginia', 0],
  ['Virgin Islands', 0],
  ['Washington', 0],
  ['West Virginia', 0],
  ['Wisconsin', 0],
  ['Wyoming', 0]
  ]);

  var geochart = new google.visualization.GeoChart(
  document.getElementById('visualization'));
  var options = {};
  options['region'] = 'US';
  options['resolution'] = 'provinces';
  options['width'] = 620;
  options['height'] = 430;
  options['colors'] = ['#DDEEF8','#FADC41'];
  options['legend'] = 'none';

  google.visualization.events.addListener(geochart, 'select', function() {
  var selectionIdx = geochart.getSelection()[0].row;
  var stateName = data.getValue(selectionIdx, 0);

  if (value == '1') {
  window.open('http://seiadev.forumone.com/state-solar-policy/' + stateName);
  });

  geochart.draw(data, options);
  }

  google.setOnLoadCallback(drawVisualization);
  </script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization"></div>
</body>
</html>

asgallant

unread,

Jun 26, 2012, 2:56:10 PM6/26/12

to google-visua...@googlegroups.com

There are two things you need to do to make the first part work:

1) add this line to the 'select' event handler, before your "if" statement:

var value = data.getValue(selectionIdx, 1);

2) you are missing a closing bracket ("}") after the "if" statement (the "});" line closes the event handler).

To remove the "site" column info from the tooltip, you need to use a "tooltip" role column with empty strings for all the values (this replaces the "Site: <value>" piece with an empty string in the tooltip). I combined all of these in a jsfiddle: http://jsfiddle.net/asgallant/D7sbh/1/. The fiddle uses a DataView to build the tooltip role column so you don't have to mess around with your data source.

Susanna Murley

unread,

Jun 26, 2012, 3:35:10 PM6/26/12

to google-visua...@googlegroups.com

Ah, got it! Thank you so much.

asgallant

unread,

Sep 3, 2012, 7:46:05 PM9/3/12

to google-visua...@googlegroups.com, marc.l...@gmail.com

Are the urls for the countries in the form "mainUrl/countryName.aspx"? If so, then just add ".aspx" to the end of the string in the window.open call:

window.open('main url' + countryName + '.aspx');

If the url's aren't formulaic like that, then you can add them as an extra column in the DataTable and hide that column from the chart. You can then reference the DataTable to get the url in the "select" event handler.

On Sunday, September 2, 2012 11:10:38 PM UTC-4, Kate wrote:

Marc: I tried window.open('main url' + countryName) but it doesn't work for my site as all pages end with .aspx. Could you please give me suggestion how to make this make this work or is there any way that I can put individual url for each region manually?

Kate

unread,

Sep 3, 2012, 10:30:25 PM9/3/12

to google-visua...@googlegroups.com, marc.l...@gmail.com

asgallant: Yes the urls are in this form and thank you very very much for the solution. It works well now and I'm so happy ^_^
However I still want to know another solution you mentioned. Could you please show me by code example how to add an extra column in the DataTable and how to hide the column from the chart?

asgallant

unread,

Sep 3, 2012, 11:55:22 PM9/3/12

to google-visua...@googlegroups.com, marc.l...@gmail.com

You add the extra column in the chart the exact same way you added the other columns to the chart. You use a DataView (or the view property of a ChartWrapper) to select which columns should be used to draw a chart. See an example here: http://jsfiddle.net/asgallant/9BLSc/

Kate

unread,

Sep 4, 2012, 3:07:42 AM9/4/12

to google-visua...@googlegroups.com, marc.l...@gmail.com

Thank you so much for your help. I really really appreciate this and this is inspiring me for learning ^_^

asgallant

unread,

Sep 4, 2012, 11:44:42 AM9/4/12

to google-visua...@googlegroups.com, marc.l...@gmail.com

You're welcome.

Kate

unread,

Sep 7, 2012, 3:56:07 AM9/7/12

to google-visua...@googlegroups.com, marc.l...@gmail.com

I have one more question :D
Is it possible to get data column from external data source?
I use SharePoint Online and I put this map on my SharePoint Site and I'm just thinking it would be great if the map can get data from SharePoint list column to display on the map.
Do you have any suggestions for this?

asgallant

unread,

Sep 7, 2012, 9:54:34 AM9/7/12

to google-visua...@googlegroups.com, marc.l...@gmail.com

I don't know how Sharepoint works, so I can't help you set it up, but yes, you should be able to use it as a data source. There are other threads on this forum that deal with Sharepoint, perhaps one of them will help (search "Sharepoint"). If not, try stackoverflow.

Kate

unread,

Sep 10, 2012, 5:30:01 AM9/10/12

to google-visua...@googlegroups.com, marc.l...@gmail.com

Thank you for your reply, I will check that out.

Carlos Moreira

unread,

Sep 11, 2012, 9:37:29 AM9/11/12

to google-visua...@googlegroups.com

Hello everyone!
Without wanting to spam with a product, here is a link to a Wordpress plugin I developed that does some of this stuff:
http://cmoreira.net/interactive-world-maps-demo/

Since you guys are advanced users, you call pull up the source code from the examples.
I did examples to open new urls and other javascript actions, like pulling html content and stuff like that.

Hope it helps!

asgallant

unread,

Oct 26, 2012, 11:03:28 AM10/26/12

to google-visua...@googlegroups.com

The easy way is to upload the spreadsheet to google docs and use a query to read the contents.

On Thursday, October 25, 2012 10:35:23 PM UTC-4, Fiorella wrote:

Is there the way to get data from table in excel spreadsheet to display on Geochart and put the link for each country to specific url we want?

On Friday, September 7, 2012 8:54:34 PM UTC+7, asgallant wrote:

QSint

unread,

Oct 29, 2012, 10:21:45 PM10/29/12

to google-visua...@googlegroups.com

Thank you so much. I tried this way but when I open the page on Explorer, there's an error saying, Unable to set value of the property 'data': object is null or undefined
On Firefox and Chrome, I don't see this message. Do you have any ideas, how should I fix this?

asgallant

unread,

Oct 30, 2012, 11:57:05 AM10/30/12

to google-visua...@googlegroups.com

Post the code you are using and I'll take a look.

QSint

unread,

Oct 30, 2012, 11:25:54 PM10/30/12

to google-visua...@googlegroups.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

           var query = new
google.visualization.Query('I PUT MY GOOGLE DOC FILE URL HERE');
           query.send(handleQueryResponse);
         }

         function handleQueryResponse(response) {
           if (response.isError()) {
             alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
             return;
           }

           var data = response.getDataTable();
           visualization = new google.visualization.GeoChart(document.
getElementById('visualization'));
           visualization.draw(data, null);

    var geochart = new google.visualization.GeoChart(document.getElementById('visualization'));

google.visualization.events.addListener(geochart, 'select', function() {
var selectionIdx = geochart.getSelection()[0].row;

        var countryName = data.getValue(selectionIdx, 0);
        window.open('I PUT THE URL I WANT HERE');
    });

    geochart.draw(data, {
        width: 1000,
        height: 550

    });
         }

     google.setOnLoadCallback(drawVisualization);
   </script>
</head>
<body style="font-family: Arial;border: 0 none;">

asgallant

unread,

Oct 31, 2012, 1:42:19 PM10/31/12

to google-visua...@googlegroups.com

The only problem I see in your code is that you have two charts trying to draw in the same div (visualization and geochart), but that wouldn't cause the error you are seeing. I would expect that error if the query failed, but then the error handler should catch that and spawn the alert statement.

You said this error comes up in IE, what version of IE? Do things work correctly in Firefox and Chrome?

Also, it would help to have the spreadsheet url to test with, if you can share it.

QSint

unread,

Oct 31, 2012, 10:42:51 PM10/31/12

to google-visua...@googlegroups.com

In Firefox and Chrome the chart display normally but in IE the red error message is loaded 4 times before the chart appear. I use IE9. Firefox 16.0.2 and Chrome 22.0.1229.94 m.
Here is the url of the spreadsheet, https://docs.google.com/spreadsheet/ccc?key=0Ai9V1GjfC6zfdG9ZOE9sTU9qN3Jnd1RmZzlCVjhOMkE

asgallant

unread,

Nov 1, 2012, 12:46:29 AM11/1/12

to google-visua...@googlegroups.com

I tested it here: http://jsfiddle.net/asgallant/wJbmx/, and it works in all the browsers I have access to at home (FF, Chrome, IE10). If that doesn't work for you, then I'll test it in IE 9 tomorrow.

QSint

unread,

Nov 1, 2012, 3:09:31 AM11/1/12

to google-visua...@googlegroups.com

With your example, I don't have problem with the error anymore. Thank you so much for your kindness and your time to help me with this.

asgallant

unread,

Nov 1, 2012, 10:26:37 AM11/1/12

to google-visua...@googlegroups.com

You're welcome.

Andrea Nelson Mauro

unread,

Nov 1, 2012, 1:35:10 PM11/1/12

to google-visua...@googlegroups.com

but is possible to insert more than 3 columns in the dataset? it seems not possibile...

asgallant

unread,

Nov 1, 2012, 2:48:42 PM11/1/12

to google-visua...@googlegroups.com

You can have as many columns of data as you like (well, within the limits of what javascript can reasonably handle, but for all intents and purposes, it is effectively unlimited). Not all charts can use an arbitrary number of columns, though. Some (like GeoCharts, require specific column layouts in order to function properly. If you need to have more columns of data, but don't intend to use them in a particular chart, then you can filter them out using a DataView or the "view" parameter of a ChartWrapper.

nina...@googlemail.com

unread,

May 22, 2013, 10:34:42 AM5/22/13

to google-visua...@googlegroups.com

This is a really useful example. But, can it be adapted to return the region (e.g. Europe) from the select, rather than the country from a world map?

asgallant

unread,

May 22, 2013, 12:05:23 PM5/22/13

to google-visua...@googlegroups.com

The map doesn't pass any region information back when you select a country, so you won't be able to get it that way, but if you include the region information in the DataTable (as an extra column, filtered out with a DataView so the chart can't see it), you can pull the info from the DataTable.

nina...@googlemail.com

unread,

May 23, 2013, 9:26:03 AM5/23/13

to google-visua...@googlegroups.com

thanks...good work around...I'll give it a go.

nina...@googlemail.com

unread,

May 23, 2013, 9:42:39 AM5/23/13

to google-visua...@googlegroups.com

Works brilliantly! Although you have to be careful with the order of variables when setting up the DataTable array - strings have to come before integers.

So, the code looks something like this now:

var data = google.visualization.arrayToDataTable([

['Country', 'Region', 'Organisation Members'],

['Finland', 'Europe', 1],

['France', 'Europe', 1],

['Germany', 'Europe', 1]

]);

var geochart = new google.visualization.GeoChart(

document.getElementById('visualization'));

google.visualization.events.addListener(geochart, 'select', function() {

var selectionIdx = geochart.getSelection()[0].row;

var regionName = data.getValue(selectionIdx, 1); // change 0 to 1

window.open('http://en.wikipedia.org/wiki/' + regionName);

});

geochart.draw(data, options);

asgallant

unread,

May 23, 2013, 10:17:57 AM5/23/13

to google-visua...@googlegroups.com

If you do that, then all of your countries will be labeled "Europe" in the tooltips. To get around that, create a DataView to hide the 'Region' column from the GeoChart, like this: http://jsfiddle.net/asgallant/P7rCe/

Raj

unread,

May 18, 2015, 6:31:04 PM5/18/15

to google-visua...@googlegroups.com

Hi Guys,

Is there a way to add html links to the (horizontal) labels of the
columnchart visualization?

Basically I have a column for each year, and I want the label to be a
link to a (dynamically generated) page showing a similar page but with
a column for each month of the year.