Map Chart
Map Chart widget is useful for data visualizations on a map. The visualizations can be used in dashboards to denote areas of interest.
Properties
Properties allow you to edit the widget, connect it with other widgets and customize the user actions.
Widget Properties
These properties allow you to edit the Map chart widget. All these properties are present in the property pane of the widget. The following table lists all the widget properties.
| Property | Description |
|---|---|
| Map type | It lets you select the maps of the world or continents to visualize data. |
| Title | Sets the title to be displayed on top of the map chart. |
| Visible | Controls widget's visibility on the page. When turned off, the widget will not be visible when the app is published |
| Data | Information in a specified format (array \<id, value>) is to be displayed on the selected map type. To know what each id represents for a map, please refer to this documentation. |
| Show Labels | When turned on, it shows the labels for each data point on the map chart. |
Binding Properties
These properties allow you to bind your Map chart widget with any other widget in queries or JS objects. The following table lists all the binding properties.
| Internal Property | Description |
|---|---|
| selectedDataPoint | An object of the currently selected data point in the map. This object changes when the user selects a different data point in the map. |
| isVisible | This property indicates whether the widget is visible or not. |
Events
They are a set of actions that you can perform on the widget.
| Event | Description |
|---|---|
| onDataPointClick | Sets the action to be run when the user selects a distinct region in the map. See a list of supported actions. |
Styles
Style properties allow you to change the look and feel of the widget.
| Styles | |
|---|---|
| Color range | Controls the colour of a set of regions based on the range of values assigned. Accepts arrays of objects with the following keys: code (Color code to be applied), minValue (Minimum value for which this colour should be applied), maxValue (Maximum value for which this colour should be applied). |
| Border Radius | Allows you to define curved corners. |
| Box Shadow | Allows you to choose from the available shadow styles. |
Displaying Data
Map chart’s options can be populated from a data source like an API / Query by transforming the incoming data to an array of \(id, value\). For each “Map type”, each unique ID represents a fixed region in the map, which can be determined from the fusion map chart documentation.
The transformation can be performed using JavaScript. So if the data is an array, we can transform it using the Array.map function.
// Query1.data is assumed to be an array here
{{ Query1.data.map((row) => {
return { id: row.name, value: row.id }
})
}}