Interacting between JavaScript Charts and JavaScript Maps – amCharts Help & Support

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:

http://jsfiddle.net/amcharts/6WVvS/

Comments