Customizing Your Map
Now that we know how to create a simple map (hyperlinks to the Simple Data Driven Map section) we will now look at customization of different map attributes. Below is a list of basic customizations possible for maps:
Showing full names in map labels
FusionCharts Suite XT shows only the short names of the entities on the map by default. You can set the map to display the full name of the entity.
A map with its full entity names displayed looks like the chart below. Here each of the continents are entities and their full names are part of the label.
The attributes used to customize this behavior are
Attribute Name |
Description |
|
Set this to |
|
Setting this to |
Given below is the data used to build the map
{
"chart": {
"caption": "Global Population",
"theme": "fint",
"formatNumberScale": "0",
"numberSuffix": "M",
"showLabels": "1",
"includeNameInLabels": "1",
"useSNameInLabels": "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"
}
]
}Showing values in labels
You can set the entity label to show data values. In the chart below, we have configured the labels to show the population value along with the continent short name.
The attributes used to enable showing data values in labels are as follows:
Attribute Name |
Description |
|
Set this attribute to |
|
Specifies the character that works as a separator for the data value from the label name. This character is prefixed to the data value in the label. |
Given below is the data used to build the map
{
"chart": {
"caption": "Global Population",
"theme": "fint",
"formatNumberScale": "0",
"numberSuffix": "M",
"showLabels": "1",
"labelSepChar": ": ",
"includeValueInLabels": "1"
},
"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"
}
]
}Showing labels only for specific entities
Labels are shown for all entities by default. It is possible to display labels only for specific entities of interest. In the example below we display labels for two most populous continents.
Here only Asia and Africa have their labels displayed while the other continents have no display text set for labels.
The attribute to configure display of labels is as follows:
Attribute Name |
Description |
|
Set this attribute to |
Given below is the data used to build the map
{
"chart": {
"caption": "World's Two Most Populous Continents",
"theme": "fint",
"formatNumberScale": "0",
"numberSuffix": "M",
"useSNameInLabels": "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",
"showLabel": "1"
},
{
"id": "EU",
"value": "727"
},
{
"id": "AF",
"value": "885",
"showLabel": "1"
},
{
"id": "AU",
"value": "32"
}
]
}Customizing label display text
It is also possible to use a completely customizable text to display for each specific entity. In the chart below we configure the data label of each continent as sparse, moderate or dense based on the population density.
The attribute used to define the display text for labels is as follows:
Attribute Name |
Description |
|
Specifies the text to display as the entity label. |
The data used to build this map is given below
{
"chart": {
"caption": "Global Population Density",
"showBorder": "1",
"borderThickness": "3",
"theme": "fint",
"formatNumberScale": "0"
},
"colorrange": {
"color": [
{
"minvalue": "0",
"maxvalue": "10",
"code": "#A9FF8D",
"displayValue": "Sparse"
},
{
"minvalue": "10",
"maxvalue": "35",
"code": "#D0DFA3",
"displayValue": "Moderate"
},
{
"minvalue": "35",
"maxvalue": "100",
"code": "#91AF64",
"displayValue": "Dense"
}
]
},
"data": [
{
"id": "NA",
"value": "22.1",
"showLabel": "1",
"displayValue": "Moderate"
},
{
"id": "SA",
"value": "22.0",
"showLabel": "1",
"displayValue": "Moderate"
},
{
"id": "AS",
"value": "95.0",
"showLabel": "1",
"displayValue": "Dense"
},
{
"id": "EU",
"value": "72.5",
"showLabel": "1",
"displayValue": "Dense"
},
{
"id": "AF",
"value": "33.7",
"showLabel": "1",
"displayValue": "Moderate"
},
{
"id": "AU",
"value": "3.2",
"showLabel": "1",
"displayValue": "Sparse"
}
]
}Customising fonts
You can customize font-related properties for each entity. In this example the font is set to Helvetica and the size of the label name is proportional to the value of each entity.
The attributes used for customizing label fonts are as follows:
Attribute Name |
Description |
|
Specifies the font to be used in the entity |
|
Specifies the size of the font to be used with the entity |
|
Specifies the color of the font to be used with the entity |
|
Specifies if the label font will be bold formatted |
Given below is the data used to build the map
{
"chart": {
"caption": "Global Population",
"theme": "fint",
"formatNumberScale": "0",
"numberSuffix": "M",
"showLabels": "1"
},
"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",
"Font": "Helvetica",
"FontSize": "15",
"FontColor": "#383838"
},
{
"id": "SA",
"value": "373",
"Font": "Helvetica",
"FontSize": "15",
"FontColor": "#383838"
},
{
"id": "AS",
"value": "3875",
"Font": "Helvetica",
"FontSize": "35",
"FontColor": "#383838"
},
{
"id": "EU",
"value": "727",
"Font": "Helvetica",
"FontSize": "20",
"FontColor": "#383838"
},
{
"id": "AF",
"value": "885",
"Font": "Helvetica",
"FontSize": "25",
"FontColor": "#383838"
},
{
"id": "AU",
"value": "32",
"Font": "Helvetica",
"FontSize": "10",
"FontColor": "#383838"
}
]
}Using short names in tooltips
Tooltips in maps show the full name of the entity along with the value by default. The tooltip can be configured to show only the short name. In the chart below, we have set the labels to show the entity full names and the tooltip shows the short name.
The attribute used to customize tooltips is explained here
Attribute Name |
Description |
|
Set this to |
Given below is the data used to build the map
{
"chart": {
"caption": "Global Population",
"theme": "fint",
"formatNumberScale": "0",
"numberSuffix": "M",
"showLabels": "1",
"useSNameInToolTip": "1",
"useSNameInLabels": "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"
}
]
}Turning off entity tooltips
In FusionCharts Suite XT, tooltips are on by default but can be turned off for entities. Tooltips have been removed for the chart below.
The attribute to configure tooltip display behaviour is as follows:
Attribute Name |
Description |
|
Set this to |
The data that is used to build this map is shown here
{
"chart": {
"caption": "Global Population",
"theme": "fint",
"formatNumberScale": "0",
"numberSuffix": "M",
"showLabels": "1",
"showEntityToolTip": "0",
"useSNameInLabels": "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"
}
]
}Handling null entities
It is likely that all entities within a map don’t have an associated value (or have a null value). Such entities can be customized by modifying the transparency, color and hover effects. The chart below shows a sales tracker across continents with some entities having a null value.
The attributes used to configure null entities are mentioned below:
Attribute Name |
Description |
|
Specifies the color for null value entities. |
|
Specifies the transparency of the entity. Value can be set between 0 (completely transparent) to 100 (opaque). |
|
Set this to |
The data for this chart is shown below
{
"chart": {
"caption": "Global Sales Tracker",
"theme": "fint",
"formatNumberScale": "0",
"numberSuffix": "M",
"showLabels": "1",
"nullEntityColor": "#C2C2D6",
"nullEntityAlpha": "50",
"hoverOnNull": "0",
"useSNameInLabels": "0"
},
"colorrange": {
"color": [
{
"minvalue": "0",
"maxvalue": "100",
"code": "#D0DFA3",
"displayValue": "Below 100M"
},
{
"minvalue": "100",
"maxvalue": "500",
"code": "#B0BF92",
"displayValue": "100-500M"
},
{
"minvalue": "500",
"maxvalue": "1000",
"code": "#91AF64",
"displayValue": "500-1000M"
}
]
},
"data": [
{
"id": "NA",
"value": "515"
},
{
"id": "SA",
"value": "373"
},
{
"id": "EU",
"value": "727"
},
{
"id": "AU",
"value": "37"
}
]
}