Google Charts (GeoChart) - Zoom in closer

Question

Using Google Charts GeoChart: https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart

Is it possible to zoom in closer than just an overall region? That is, to get to street-view level of a map, and still place markers as seen in the marker example on the link above?

Thanks all for the help...

Arian

Answer 1

The API does not support zooming, dragging, or scrolling.

Suggest

Thanks. Ended up placing markers on the map to accomplish my goals, too bad you can't zoom in on the geomap though, it's a great tool. – Arian

It could be done programmatically though using enableRegionInteractivity. Would have to change region option and redraw. Goofy they don't bake that right in. – Antecedent

Answer 2

As a trick, I used css zoom property with overflow:hidden on container. But it should be executed after chart.draw(), on google chart ready event.

And if you need to redraw (I'm redrawing on window resize to guarantee responsiveness), you should force zoom to 1 or 100% again before draw it again.

HTML:

<div id="container" style="overflow:hidden; width:..px;">
     <div id="chart_div"></div>
</div>

JS (jquery):

$("#chart_div").css("zoom",1);

// [... google chart code generation ...]

google.visualization.events.addListener(chart, 'ready', function() { $("#chart_div").css("zoom",1.4); });
chart_draw(data, options);

It worked for me and it is worth the try.

Lombroso

It is not a good practice because you will lose tooltip position – Estrin

Answer 3

I had the same problem, and GeoChart proved to be too limited in that regard.

One option is to use Google Maps and Data Layers. If you need markers with colors and sizes, for example, you could do something like the example on the following page (see 'advanced style'): https://developers.google.com/maps/documentation/javascript/examples/layer-data-quakes

You'll need to implement your own interpolation to determine sizes and colors, but the resulting map/chart will be better than GeoChart alone.

Jerold

Answer 4

It looks like Google Charts now has an expiremental option called 'explorer' that works for some chart types. See: https://developers.google.com/chart/interactive/docs/gallery/linechart#Configuration_Options

Cinnabar

but not with Geocharts – Kilgore

I created jquery plugin that includes an option for scaling a chart. See - chartinator.com – Cinnabar

Answer 5

You could try to generate a select event on marker click and in the event function you could change the region of the chart by changing chartOptions as follows:

 google.visualization.events.addListener(chart, 'select', () => {
  // console.log(this.continents);
  if (continents.includes( continentData.getValue(chart.getSelection()[0].row, 2))) {
   chartOptions.region = '053';
   // 002 - Africa
   // 150 - Europe
   // 019 - Americas 021 - Northern America 005- South America 013- Central America 029 - Caribbean
   // 142 - Asia
   // 009 - Oceania
   // 053 - Australia and New Zealand

    chart.draw(continentData, chartOptions);
  }
});

Jacqulynjactation