Annotation text control in google geochart maps

154 views
Skip to first unread message

Lyle Scruggs

unread,
Aug 26, 2015, 1:22:48 PM8/26/15
to Google Visualization API


I am wondering if it is possible to customize a region geochart (global) to provide additional information in the rollovers. The specific values that I have for each country are taken from different sources, and I'd like the rollover to provide information about the source.  

Following the example in the guide
function drawRegionsMap() {
       
var data = google.visualization.arrayToDataTable([
         
['Country', 'Popularity'],
         
['Germany', 200],
         
['United States', 300],
         
['Brazil', 400],
         
['Canada', 500],
         
['France', 600],
         
['RU', 700]
       
]);
     
var options = {};
       
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
        chart
.draw(data, options);
     
}
Essentially, I'd like to add another variable  "Source" and have the value of Source reported only as a line for each country in the rollover box.  For example, when I scroll over Germany I'd see:
__________
Germany
Popularity: 200
Source: World Bank
_________
 From JSFiddling it is obvious that I cannot simply add a variable to the data table, ike this
          ['Country', 'Popularity', 'Source'],
         
['Germany', 200, 'World Bank'],
         
['United States', 300, 'OECD'],
         
['Brazil', 400, 'World Bank'], etc.
Any suggestions where to look. 

Sergey Grabkovsky

unread,
Aug 26, 2015, 1:39:27 PM8/26/15
to Google Visualization API
Hi Lyle,

There are a few ways that you could accomplish what you're asking for, depending on how much work you're willing to put in and how particular you are about how it is displayed.

The closest thing to what you're asking for is custom tooltips. In order to have similar formatting to what currently appears, you'd have to use HTML tooltips. Here is an example going from the format you specified to custom tooltips: http://jsfiddle.net/jzduuv87/. You can change the useHTML variable to 'true' to have it add styling to bold the values (if you care about this).

Another thing you could do is use the formatted values to put the source in parentheses. Here's an example of that: http://jsfiddle.net/jzduuv87/1/

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/836dba24-acb5-44d6-b4e7-cdaeab3fc859%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages