FusionCharts Suite XT lets you configure standard interactivity for items like markers, tooltips and legend through the map attributes itself. However, if you need to extend this further, you can tap into the JavaScript events raised by each map, and then build your custom behavior over it. You can listen to events related to entities , markers and connectors which are specific to maps.
These events let to tightly integrate maps with your own applications and add interactivity to your visualizations.
Entity Events
Entities in FusionCharts Suite XT raise 3 events entityRollOver , entityRollOut and entityClicked.
Shown below is a map that captures data from the entity events and displays it in a message box below the map. Hover on individual continents to see the population of only that specific continent.
The data used to create this example is shown here
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
{
"chart": {
"caption": "Global Population",
"theme": "fint",
"formatNumberScale": "0",
"numberSuffix": "M",
"showLabels": "1",
"showToolTip": "0"
},
"colorrange": {
"color": [
{
"minvalue": "0",
"maxvalue": "100",
"code": "#D0DFA3",
"displayValue": "< 100M"
},
{
"minvalue": "100",
"maxvalue": "500",
"code": "#B0BF92",
"displayValue": "100-500M"
},
{
"minvalue": "500",
"maxvalue": "1000",
"code": "#91AF64",
"displayValue": "500M-1B"
},
{
"minvalue": "1000",
"maxvalue": "5000",
"code": "#A9FF8D",
"displayValue": "> 1B"
}
]
},
"data": [
{
"id": "NA",
"value": "515"
},
{
"id": "SA",
"value": "373"
},
{
"id": "AS",
"value": "3875"
},
{
"id": "EU",
"value": "727"
},
{
"id": "AF",
"value": "885"
},
{
"id": "AU",
"value": "32"
}
]
}This is what we did in the above data structure
Created a World Population map exactly like we did as part of Customizing Your Map and set its theme to
fint.Defined event listeners in an
eventsobject as part of theFusionCharts()constructor to listen to 3 events. This is the quickest way to define event listeners for a map. Alternatively, you can use theaddEventListener()method on specific map instances, or on all maps globally, to listen to events.Each event generated by FusionCharts Suite XT has a string event-alias for ease of usage. The 3 events that we listen to, are:
entitytRollOver: Fired when the mouse moves into the entity of a map.entityRollOut: Fired when the mouse moves out of the entity of a map.entityClick: Fired when the mouse clicks on an entity.
To each event listener method, two standard argument objects -
eventObjectandargumentsObjectare provided, when the event is invoked. They are referenced locally asevtanddatain the above example.Within these methods, we have used JavaScript functions to hide and show the text based on user mouse interactions in the
messagetextarea. We get the label of rolled-over entity usingdata.labeland the population usingdata.value.The message is reset with placeholder text showing the total population when the roll out event is triggered. When the click event triggers an alert is configured to display with information on which entity was clicked.
The code for the example is shown here
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193
<html>
<head>
<title>A Data Driven Map</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<script>
FusionCharts.ready(function () {
var populationMap = new FusionCharts({
type: 'maps/world',
renderAt: 'chart-container',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Global Population",
"theme": "fint",
"formatNumberScale":"0",
"numberSuffix":"M",
"showLabels": "1",
"showToolTip": "0"
},
"colorrange": {
"color": [
{
"minvalue": "0",
"maxvalue": "100",
"code": "#D0DFA3",
"displayValue" : "< 100M"
},
{
"minvalue": "100",
"maxvalue": "500",
"code": "#B0BF92",
"displayValue" : "100-500M"
},
{
"minvalue": "500",
"maxvalue": "1000",
"code": "#91AF64",
"displayValue" : "500M-1B"
},
{
"minvalue": "1000",
"maxvalue": "5000",
"code": "#A9FF8D",
"displayValue" : "> 1B"
}
]
},
"data": [
{
"id": "NA",
"value": "515"
},
{
"id": "SA",
"value": "373"
},
{
"id": "AS",
"value": "3875"
},
{
"id": "EU",
"value": "727"
},
{
"id": "AF",
"value": "885"
},
{
"id": "AU",
"value": "32"
}
],
},
"events": {
"entityRollover": function (evt, data) {
document.getElementById('message').value = "" +data.label + "\n" + "Population: " +data.value+"M";
},
"entityRollout": function (evt, data) {
document.getElementById('message').value =
"Total World Population - 6.3 Billion";
},
"entityClick": function (evt, data) {
alert("You have clicked on "+data.label+".");
},
}
}).render();
});</script>
</head>
<body>
<div id="chart-container">A world map will load here!</div>
<textarea id="message" rows="4" cols="54" style='margin-left:10px;text-align:center'>"Total World Population 6.3 Billion" </textarea>
</body>
</html>Marker and Connector Events
Markers and Connectors raise events on mouse interactions like roll over, roll out and click just like Entities.
Shown here is the world map that we built in Adding Markers as part of the connectors section. It shows the busiest routes from the Heathrow
The data used to create this example is shown here
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
{ "chart": { "caption": "Busiest Routes from Heathrow Airport", "subcaption": "For the year 2014", "theme": "fint", "markerBgColor": "#FF0000", "markerRadius": "10", "connectorColor": "#0CB2B0", "connectorHoverColor": "#339933", "entityFillColor": "#CECED2", "entityFillHoverColor": "#E5E5E9" }, "markers": { "items": [ { "id": "London", "shapeid": "triangle", "x": "340.23", "y": "125.9", "label": "LHR", "tooltext": "Heathrow International Airport {br}IACL Code : EGLL", "labelpos": "left" }, { "id": "New York", "shapeid": "triangle", "x": "178.14", "y": "154.9", "label": "JFK", "tooltext": "John F Kennedy Airport {br}IACL Code : KJFK", "labelpos": "bottom" }, { "id": "Dubai", "shapeid": "triangle", "x": "458.14", "y": "203.9", "label": "DXB", "tooltext": "Dubai International Airport {br} IACL Code : OMDB", "labelpos": "bottom" }, { "id": "Singapore", "shapeid": "triangle", "x": "558.14", "y": "255.9", "label": "SIN", "tooltext": "Singapore International Airport {br} IACL Code : WSSS", "labelpos": "bottom" }, { "id": "Hong Kong", "shapeid": "triangle", "x": "573.14", "y": "202.9", "label": "HKG", "tooltext": "Hong Kong International Airport {br} IACL Code : VHHH", "labelpos": "bottom" } ], "connectors": [ { "from": "London", "to": "Hong Kong", "tooltext": "London to Hong Kong{br} Total Passengers: 1,801,5200", "label": "LHR to HKK" }, { "from": "London", "to": "Singapore", "tooltext": "London to Singapore{br} Total Passengers: 1,507,032", "label": "LHR to SIN" }, { "from": "London", "to": "New York", "tooltext": "London to New York{br} Total Passengers: 2,551,276", "label": "LHR to NYC" }, { "from": "London", "to": "Dubai", "tooltext": "London to Dubai{br} Total Passengers: 1,974,078", "label": "LHR to DXB" } ] } }
This is what we did in the above data structure
Created an Airport Traffic map and set its theme to
fint.Defined event listeners in an
eventsobject as part of theFusionCharts()constructor to listen to 3 events each for connectors and markers. Alternatively, you can use theaddEventListener()method on specific map instances.The events generated by FusionCharts Suite XT have a string event-alias for ease of usage. The events that we listen to, are:
markerRollOverandconnectorRollOver: Fired when the mouse moves into the marker/connector in a map.markerRollOutandconnectorRollOut: Fired when the mouse moves out of the marker/connector in a map.markerClickandconnectorClick: Fired when the mouse clicks on the marker/connector.
To each event listener method, two standard argument objects -
eventObjectandargumentsObjectare provided, when the event is invoked. They are referenced locally asevtanddatain the above exampleWithin these methods, we have used JavaScript functions to hide and show the text based on user mouse interactions in the
messagetextarea.We get the label of rolled-over marker or connector using
data.label. The message is reset with placeholder text when the roll out event is triggered. The click event when triggered creates an alert with details on what was clicked.
The full HTML code for this sample is shown here
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273
<html>
<head>
<title>A Data Driven Map</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<script>
FusionCharts.ready(function () {
var routesMap = new FusionCharts({
type: 'maps/world',
renderAt: 'chart-container',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption" : "Busiest Routes from Heathrow Airport",
"subcaption" : "For the year 2014",
"theme": "fint",
"markerBgColor" : "#FF0000",
"markerRadius" : "10",
"connectorColor" : "#0CB2B0",
"connectorHoverColor" : "#339933",
"entityFillColor" : "#CECED2",
"entityFillHoverColor" : "#E5E5E9"
},
"markers": {
"items" : [
{
"id":"London",
"shapeid": "triangle",
"x": "340.23",
"y": "125.9",
"label": "LHR",
"tooltext": "Heathrow International Airport {br}IACL Code : EGLL",
"labelpos": "left"
},
{
"id": "New York",
"shapeid": "triangle",
"x": "178.14",
"y": "154.9",
"label": "JFK",
"tooltext": "John F Kennedy Airport {br}IACL Code : KJFK",
"labelpos": "bottom"
},
{
"id": "Dubai",
"shapeid": "triangle",
"x": "458.14",
"y": "203.9",
"label": "DXB",
"tooltext": "Dubai International Airport {br} IACL Code : OMDB",
"labelpos": "bottom"
},
{
"id": "Singapore",
"shapeid": "triangle",
"x": "558.14",
"y": "255.9",
"label": "SIN",
"tooltext": "Singapore International Airport {br} IACL Code : WSSS",
"labelpos": "bottom"
},
{
"id": "Hong Kong",
"shapeid": "triangle",
"x": "573.14",
"y": "202.9",
"label": "HKG",
"tooltext": "Hong Kong International Airport {br} IACL Code : VHHH",
"labelpos": "bottom"
}
],
"connectors": [
{
"from": "London",
"to": "Hong Kong",
"tooltext": "<b>London to Hong Kong</b>{br} Total Passengers: 1,801,520",
"label": "LHR to HKK"
},
{
"from": "London",
"to": "Singapore",
"tooltext": "<b>London to Singapore</b>{br} Total Passengers: 1,507,032",
"label": "LHR to SIN"
},
{
"from": "London",
"to": "New York",
"tooltext": "<b>London to New York{br} Total Passengers: 2,551,276",
"label": "LHR to NYC"
},
{
"from": "London",
"to": "Dubai",
"tooltext": "<b>London to Dubai</b>{br} Total Passengers: 1,974,078",
"label": "LHR to DXB"
}
]
}
},
"events": {
"connectorRollover": function (evt, data) {
document.getElementById('message').value = data.label;
},
"connectorRollout": function (evt, data) {
document.getElementById('message').value =
"Rollover or click on a marker or connector";
},
"connectorClick": function (evt, data) {
alert("You have selected the connector from "+data.label+". \n Click on OK to continue.");
},
"markerRollover": function (evt, data) {
document.getElementById('message').value = "" +data.label
;
},
"markerRollout": function (evt, data) {
document.getElementById('message').value =
"Rollover or click on a marker or connector";
},
"markerClick": function (evt, data) {
alert("You have selected "+data.label+" Airport" +". \n Click on OK to continue.");
},
}
}).render();
});
</script>
</head>
<body>
<div id="chart-container">A world map will load here!</div>
<textarea id="message" rows="4" cols="54" style='margin-left:10px;text-align:center'>Roll over or click on a marker or connector </textarea>
</body>
</html>For a list of all parameters for each of these events refer to the API Reference for events
