CODEWITHSUNDEEP
javascriptjqueryamcharts
Neal Jones
Neal Jones

Reputation: 459

Get value upon click event while using AmCharts Map

The Issue: I have a map made with AmCharts. With some help I was able to make it so upon hover I can display info for each state. I want to make it so that when I click on a state, it displays some of that state info below in a div.

My Jumbled Thoughts: At first I thought this would require managing the 'state', but I am pretty sure that using 'state' would be overkill. With that said, it seems like it should be a simple issue to have a click event display the same value that I am getting upon hover...but it is apparently too hard for me right now (or too late).

Some Code:

$("#chartdiv").click(function() { // line 641
      document.getElementById('tempInfo').innerHTML = event.mapObject.infoTitle;
});

Then I thought maybe this would work:

map.addListener("click", function(event){ // line 637
  document.getElementById('tempInfo').innerHTML = event.mapObject.infoTitle; 
});

Link to Full Code: http://codepen.io/anon/pen/PGYQxX?editors=0011

Apologies for my Ignorance and Preemptive Expression of Gratitude: I am working on getting better at basic JS, but at the same time I'm trying to power through things I have a poorer understanding of.

Any help is greatly appreciated, thanks!

Upvotes: 2

Views: 1764

Answers (1)

gerric
gerric

Reputation: 2297

There's a event called clickMapObject which you can listen for. It will give you the map object you clicked on as part of the event object you get as parameter.
As it seems like you don't bother to use jQuery, I changed the DOM manipulation to use it. (better readabilty in my opinion)

map.addListener("clickMapObject", function(event){
  $('#tempInfo').html(event.mapObject.infoTitle); // Changes with clicking
});

Here's the new codepen.

Upvotes: 2

Related Questions