Question

I’m using GeoChart from the Google Visualisation API to create a dynamic map containing site usage information. Due to the large metric values (8 digits), I need to comma separate these numbers to make the map more readable. I’ve written a function that adds commas to these number, but this then causes errors with the API drawing the map.

For example, when comma separating 1 of the 3 columns of data (Country, Visits, Unique Visitors), the label for that column will be removed in the country tool tips. Comma separating 2 of the columns then leads to the entire map failing, with an ‘Expecting 2 columns’ error. This must be due to the commas in the number string not being escaped and therefore causing errors in the JSON array. I’ve tried inserting '\,' instead of a regular comma to no avail. Any work arounds or solutions?

Answer 1

Taking a step back I think the better way to solve the problem is to format your raw data using the NumberFormat class in google visualizations called google.visualization.NumberFormat. More info here: google.visualization.NumberFormat

Here is an example of how to format the 2nd column to have commas as the grouping separator:

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity'],
    ['Germany', 200],
    ['United States', 300],
    ['Brazil', 400],
    ['Canada', 500],
    ['France', 60000000000000000],
    ['RU', 700]
  ]);

  var formatter = new google.visualization.NumberFormat({pattern:'###,###'} );
  formatter.format(data, 1);
  
  var geochart = new google.visualization.GeoChart(
      document.getElementById('visualization'));
  geochart.draw(data, {width: 556, height: 347, tooltip: {textStyle: {color: 'blue', fontName: 'Tahoma', fontSize: '15'}}});
}

I used the google visualization playground to test it out.

Update

Modified the geochart.draw line to include tooltip text styling. It will style the all of the text in the tooltip. I haven’t seen anyway to make fine grain customizations. Here is more info: Geochart Configuration Options