Google Visualizations - GeoChart - Country Color Scale, Label and Legend

2
votes

I'm having difficulty in getting Google GeoChart to work as they describe in their documentation (and even samples)

https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart#Data_Format

In the sample on this page the Geo Chart shows the country colors to be using a scale based on popularity. Yet my own map shows all countries with same dark color regardless of the value of the popularity field. Additionally, the sample shows a legend while my own does not and the region sample also shows the tooltip label with country name as well as value while mine only shows the raw value for the data.

I've been pouring over the documentation to try and figure this out and am stuck. Any help appreciated.

Below is my code:

<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 = google.visualization.arrayToDataTable([
      ['Country', 'Visits'],
  ['Austria','1'],
      ['Brazil','2'],
      ['Canada','40'],
      ['China','1'],
      ['Czech Republic','1'],
      ['Denmark','1'],
      ['Dominican Republic','1'],
      ['Ecuador','1'],
      ['France','1'],
      ['Netherlands','21'],
      ['United Kingdom','13'],
      ['United States','1140']
 ]);

    var options = {
        colorAxis: {colors: ['#f5f5f5','#267114']},
        legend: 'Vists'
    };

    var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>
2
google-visualization
In case somebody else experiences this - the issue with the colors appears to have been the number field in single quotes being interpreted as string data rather than numeric data. Removing the single quotes solved that problem. The lack of a legend remains an issue. – edrooney

2 Answers

5
votes

Your problem is that since you're specifying your values in quotes, the GeoChart sees your values as the location name. In order for them to be interpreted as values, they will need to be numbers. I was able to get your example to work by doing that.

Here is the modified code:

<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 = google.visualization.arrayToDataTable([
      ['Country', 'Visits'],
      ['Austria', 1],
      ['Brazil',  2],
      ['Canada',  40],
      ['China',   1],
      ['Czech Republic',1],
      ['Denmark', 1],
      ['Dominican Republic',1],
      ['Ecuador', 1],
      ['France',  1],
      ['Netherlands',   21],
      ['United Kingdom',13],
      ['United States',1140]
 ]);

    var options = {
        colorAxis: {colors: ['#f5f5f5','#267114']},
        legend: 'Vists'
    };

    var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

I hope that helps!

0
votes

Here is the solution for your both problems(tooltip and legend).

  • For tooltip you have to specify integer values without quotes.

  • For legend you no need to specify the legend property in options. Here is the corrected code.

    var data = google.visualization.arrayToDataTable([
  ['Country', 'Visits'],
  ['Austria', 1],
  ['Brazil', 2],
  ['Canada', 40],
  ['China', 1],
  ['Czech Republic', 1],
  ['Denmark', 1],
  ['Dominican Republic', 1],
  ['Ecuador', 1],
  ['France', 1], 
  ['Netherlands', 21],
  ['United Kingdom', 13],
  ['United States', 1140]
]);

 var options = {
    colorAxis: {colors: ['#f5f5f5','#267114']}
    //legend: 'Vists'
};

Here is the working sample. For more geo chart related queries take a look at jqfaq.com