Change Background Color on Click (Select Marker Display)

Recommended Posts

Hey Guys,


I just wanted to post this, I was looking for a solution today and wasn't able to find anything that worked. Figured I would help out the next person looking for this.


Basically the idea was when they click some where in the USA, there would be a table populated with the information and that state would stay selected on the map. Unfortunately fusion charts does not allow you to do this through just settings of their own so the best way I came up with was this.


First create a click event on your map.

myMapObject.addEventListener('entityClick', entityClickEvent);

Next lets make the event function.

var entityClickEvent = function (evt, d) {
    var id = d.id.toUpperCase();
    var chart = evt.sender.getJSONData();
    var data = chart.data;
    for (var i = 0, l = data.length; i < l; i++) {
        var da = data[i];

        if (da.color) {
            delete da.color;

        if (da.id.toUpperCase() == id) {
            da.color = '0000ff';

Fun additional fact, the d parameter above gives you the data from the marker selected. You can use this to display values in a table next to your map.


Hopefully this helps someone out :D



Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now