Change Background Color on Click (Select Marker Display)

[jake.steele]

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';
        }
    }
    evt.sender.setJSONData(chart);
};

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

 

Jacob

[Swarnam]

Hi Jacob,

 

Thanks for sharing the information. It will definitely help others.