Choose an item

Listening to Map Events

Replace the map definition files (of v3.12.2 or older) with the latest files available in download package while upgrading to v3.13.0.

You can use FusionCharts Suite XT to 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. You can also use these events to tightly integrate maps with your own applications and add interactivity to your visualizations.

Listen to entity events

Entities in FusionCharts Suite XT can raise 3 events - entityRollOver, entityRollOut, and entityClicked. Here's how you can use them:

  • Create a World Population map, just like you did earlier in the section, and set its theme to fusion.

  • Define event listeners in an events object as part of the FusionCharts() constructor to listen to 3 events. This is the quickest way to define event listeners for a map. Alternatively, you can use the addEventListener() 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 use. The 3 events that you need to listen to, are:

    • entityRollOver, which is fired whenever you move the mouse pointer into the entity of a map.

    • entityRollOut, which is fired whenever you move the mouse pointer out of the entity of a map.

    • entityClick, which is fired, whenever you click on an entity.

  • To each event listener method, you need to provide two standard argument objects - eventObject and argumentsObject, whenever you invoke the event.

  • Within the methods, you need to use JavaScript functions to hide and show the text based on user mouse interactions in the message textarea. You can get the label of rolled-over entity using data.label and the population using data.value.

  • Reset the message with placeholder text showing the total population when the roll out event is triggered. Configure an alert, which will display information on which entity has been clicked, whenever the click event triggers.

Refer to the data structure given below:

"events": {
    "beforeRender": function(evt, args) {
        var textArea = document.createElement("textarea");
        textArea.setAttribute("id", "message");
        textArea.setAttribute("rows", "4");
        textArea.setAttribute("cols", "50");
        textArea.style.cssText = "margin-left:15px;text-align:center;display:block;";
        textArea.innerHTML = "Hover on respective continents to see the population";
        args.container.appendChild(textArea);
    },
    "entityRollover": function(evt, data) {
        document.getElementById('message').value = "" + data.label + "\n" + "Population: " + data.value + "M";
    },
    "entityRollout": function(evt, data) {
        document.getElementById('message').value =
            "Hover on respective continents to see the population";
    },
    "entityClick": function(evt, data) {
        alert("You have clicked on " + data.label + ".");
    },
}

The eventObject and argumentsObject within the event listener are referenced as evt and data respectively, in the above example.

The map will look as shown below:

FusionCharts will load here..

Click here to edit the above map.

The map shown above that captures data from the entity events and displays it in a message box below the map. You can hover on individual continents to see the population of only that specific continent.

Listen to marker and connector events

You can use markers and connectors to raise events on mouse interactions, such as roll over, roll out and click, just like entities. Build the following map to try them out:

  • Create an Airport Traffic map and set its theme to fusion.

  • Define event listeners in an events object as part of the FusionCharts() constructor to listen to 3 events each for connectors and markers. Alternatively, you can use the addEventListener() method on specific map instances.

  • Configure listeners for the following events

    • markerRollOver and connectorRollOver, which are fired when you move the mouse pointer into the marker/connector in a map.

    • markerRollOut and connectorRollOut, which are fired when you move the mouse pointer out of the marker/connector in a map.

    • markerClick and connectorClick, which are fired whenever you click on the marker/connector.

  • To each event listener method, provide two standard argument objects - eventObject and argumentsObject, whenever you invoke the event. Refer to them as evt and data.

  • Within these methods, use JavaScript functions to hide and show the text based on user mouse interactions in the message text area.

  • Get the label of rolled-over marker or connector using data.label. Note that the message is reset with placeholder text when the roll out event is triggered. Also, whenever the click event is triggered, it creates an alert with details on what was clicked.

Refer to the data structure given below:

{
  "chart": {
    "caption": "Busiest Routes from Heathrow Airport",
    "subcaption": "For the year 2014",
    "theme": "fusion",
    "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"
      }
    ]
  }
}

The map will look as shown below:

FusionCharts will load here..

Click here to edit the above map.

For a list of all parameters for each of these events, refer to the API Reference for events.