Interacting between JavaScript Charts and JavaScript Maps

Say, you have a map on your page. Perfect.

Now you want to add a little chart. Easy.

Finally you want the chart to go over the map, and, to further complicate things, want the chart to update it's data when user clicks particular countries on the map.

It may be easier than you think.

Placing the chart over the map is as simple as positioning <div> element over each other:

<div style="width: 100%; height: 362px; position: relative;">
 <div id="chartdiv" style="width: 200px; height: 150px; position: absolute; bottom: 0; right: 0; z-index: 100;"></div>
 <div id="mapdiv" style="width: 100%; height: 362px; position: absolute; top: 0; left: 0;"></div>
</div>

Now, in order to catch clicks on the countries we will use a handler for clickMapObject event, which will update chart's dataProvider property as well as set the appropriate label.

map.addListener("clickMapObject", function (event) {
 if (event.mapObject.id != undefined && chartData[event.mapObject.id] != undefined) {
   chart.dataProvider = chartData[event.mapObject.id];
   chart.clearLabels();
   chart.addLabel("0", "!20", event.mapObject.title, "center", 16);
   chart.validateData();
 }
});

And here's a working demo. And another sample which makes the map to display balloon over country rolled-over on the chart.