Display Google Geochart in log scale

Question

I'm using Google's geochart. I'm using the number of visits per country as the data to be displayed. But, the data is not linear. So, instead of plotting it against the number of visits, I'd like to plot it against its log value. Basically, I'd like to use the log scale. How do I do that?

I tried to convert the values to log manually and it plotted right, but the tooltip shows the log value and not the exact visit count.

Answer 1

there is not an option for log scale in GeoChart.

but you can calculate manually, then display the real number in the tooltip,
by changing the formatted value of the data table cell.
the tooltip will always display the formatted value by default.

when loading your data, use object notation, where...

v: = value f: = formatted value

e.g. {v: 200, f: '300'}

using the above, the chart will use 200 for the region color or marker,
but display 300 in the tooltip.

see following working snippet...

google.charts.load('current', {
  packages: ['geochart'],
  mapsApiKey: 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity'],
    ['Germany', {v: 200, f: '300'}],
    ['United States', {v: 300, f: '400'}],
    ['Brazil', {v: 400, f: '500'}],
    ['Canada', {v: 500, f: '600'}],
    ['France', {v: 600, f: '700'}],
    ['RU', {v: 700, f: '800'}]
  ]);

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.GeoChart(container);
  chart.draw(data, {
    legend: 'none'
  });
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>