Simple Data Driven Maps
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.
In the map given below, you can see the populations of the different continents in the world.
{
"chart": {
"caption": "Global Population",
"theme": "fusion",
"formatNumberScale": "0",
"numberSuffix": "M"
},
"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"
}
]
}
<chart caption="Global Population" theme="fusion" formatnumberscale="0" numbersuffix="M">
<colorrange>
<color minvalue="0" maxvalue="100" code="#D0DFA3" displayvalue="< 100M" />
<color minvalue="100" maxvalue="500" code="#B0BF92" displayvalue="100-500M" />
<color minvalue="500" maxvalue="1000" code="#91AF64" displayvalue="500M-1B" />
<color minvalue="1000" maxvalue="5000" code="#A9FF8D" displayvalue="> 1B" />
</colorrange>
<set id="NA" value="515" />
<set id="SA" value="373" />
<set id="AS" value="3875" />
<set id="EU" value="727" />
<set id="AF" value="885" />
<set id="AU" value="32" />
</chart>
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'maps/world',
renderAt: 'chart-container',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Global Population",
"theme": "fusion",
"formatNumberScale": "0",
"numberSuffix": "M"
},
"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"
}]
}
}
);
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>
Click here to edit the above map.
In the sections below, you will see how to build a map like the one above and customize it using different attributes.
There are 4 simple steps to building a map using FusionCharts Suite XT, as detailed in the sections below:
Convert data to JSON/XML format#
FusionCharts Suite XT accepts both JSON and XML data formats and can read them as strings from a local or remote file. Refer to the code given below for the JSON/XML representation of the data you need, to build the map shown above.
{
"chart": {
"caption": "Global Population",
"theme": "fusion",
"formatNumberScale": "0",
"numberSuffix": "M"
},
"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"
}
]
}
<chart caption="Global Population" theme="fusion" formatnumberscale="0" numbersuffix="M">
<colorrange>
<color minvalue="0" maxvalue="100" code="#D0DFA3" displayvalue="< 100M" />
<color minvalue="100" maxvalue="500" code="#B0BF92" displayvalue="100-500M" />
<color minvalue="500" maxvalue="1000" code="#91AF64" displayvalue="500M-1B" />
<color minvalue="1000" maxvalue="5000" code="#A9FF8D" displayvalue="> 1B" />
</colorrange>
<set id="NA" value="515" />
<set id="SA" value="373" />
<set id="AS" value="3875" />
<set id="EU" value="727" />
<set id="AF" value="885" />
<set id="AU" value="32" />
</chart>
Include FusionCharts Suite XT library in your page#
To include the FusionCharts Suite XT JavaScript library on your HTML page, use the <script>
tag as shown below:
<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.fusion.js"></script>
</head>
The theme file included in the code snippet shown above is called
fusion
(FusionCharts internal) and is present in thethemes
folder. You can use it to define chart cosmetics.
Create a container for your map in the web page#
Next, you need to create a container for your map on the form of a <div>
element, as shown below:
<body>
<div id="chart-container">A world map will load here!</div>
</body>
Create an instance of the map#
In the final step, you have to create an instance of the map, initialize it with the desired width and height dimensions, and then set the JSON data source. Do the following to build an example:
Create a variable named
populationMap
.Create an instance of
FusionCharts()
object in thepopulationMap
variable. Each map in your HTML page needs to have a separate variable. Also, note that the initialization code is wrapped withinFusionCharts.ready()
method. This safeguards your map instantiation code from being called before FusionCharts Suite XT library is loaded and is ready to be used on the page.Create an instance of the world map using its alias
maps/world
. Each map in FusionCharts Suite XT has a unique alias. You can find the list of all maps and their aliases here.Next, specify the width and height of the map (in pixels), using
width
andheight
properties of the constructor.To specify the data format as JSON, set the
dataFormat
parameter tojson
.The actual JSON data is embedded as string as the value of the
dataSource
parameter. Configure the functional and cosmetic attributes of your map using the list of key-value pairs contained within thechart
object.Use the
colorrange
object to define different numeric ranges, each associated with a color, to indicate progressive thresholds.Set the values of
showLabels
andincludeValueInLabels
attributes to1
, to display the names and values in each continent. Next, specify the suffix of the value to be million using thenumberSuffix
attribute set toM
.Call the render method to render the map on the
chartContainer
element.
Refer to the code below:
FusionCharts.ready(function() {
var populationMap = new FusionCharts({
type: 'maps/world',
renderAt: 'chart-container',
width: '800',
height: '550',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Global Population",
"theme": "fusion",
"formatNumberScale": "0",
"numberSuffix": "M"
},
"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"
}]
}
});
populationMap.render();
});
Now that you know how to create a simple map try customizing different map attributes. You can apply the following customizations to maps:
Show 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. Use the following attributes to do so:
Set the value of the
showLabels
attribute to1
to show labels on the map.Set the value of the
useSNameInLabels
attribute to1
to show labels on the map.
Refer to the code below:
{
"chart": {
"showLabels": "1",
"useSNameInLabels": "1"
},
}
The map will look as shown below:
Click here to edit the above map.
In the above map, each of the continent is entities, and their full names are part of the label.
Show values in labels#
You can set the entity labels to show data values. Use the following attributes to do so:
Set the value of the
includeValueInLabels
attribute to1
, to display data values as part of the entity labels.Set the
labelSepChar
attribute to specify the character which works as a separator between the data value and the label name. Note that this character is prefixed to the data value in the label.
Refer to the code below:
{
"chart": {
"labelSepChar": ": ",
"includeValueInLabels": "1"
},
}
The map will look as shown below:
Click here to edit the above map.
In the map above, the labels are configured to show the population value along with the continent short name.
Show labels only for specific entities#
By default, a map displays labels for all entities. However, you can choose to display labels only for specific entities of interest. To do so, set the value of the showLabel
attribute to 1
, for only the entities that you want to show labels for. Note that to control display for specific entities, you need to define this value at an entity level.
Refer to the code below:
{
"chart": {
...
},
"colorrange": {
"color": [{
...
}]
},
"data": [
...
{
...
"showLabel": "1"
}]
}
The map will look as shown below:
Click here to edit the above map.
In the example given above, you can see labels displayed only for the two most populous continents (Asia and Africa).
Customize label text#
You can display customized label text for each specific entity. Use the displayValue
attribute to do so.
Refer to the code below:
{
"chart": {
...
},
"colorrange": {
"color": [{
...
}]
},
"data": [{
...
"displayValue": "Moderate"
}]
}
The map will look as shown below:
Click here to edit the above map.
In the map above, you can see the data label of each continent customized as
sparse
,moderate
ordense
, based on the population density.
Customize fonts#
You can customize font-related properties for each entity. Use the following attributes to do so:
Use the
font
attribute to specify the font to be used in the entity.Use the
fontSize
attribute to specify the font size to be used in the entity.Use the
fontColor
attribute to specify the font color to be used in the entity.Use the
fontBold
attribute to specify whether the font should be bold formatted.
Refer to the code below:
{
"chart": {
...
},
"colorrange": {
"color": [{
...
}]
},
"data": [
...
{
"Font": "Helvetica",
"FontSize": "10",
"FontColor": "#383838",
"FontBold": "1"
}
]
}
The map will look as shown below:
Click here to edit the above map.
In the example above, the font is set to
Helvetica
and the size of the label name is proportional to the value of each entity.
Use short names in tooltips#
By default, tooltips in maps show the full name of the entity along with the value. However, you can configure the tooltips to show only the short names. To do so, set the value of the useSNameInToolTip
attribute to 1
.
Refer to the code below:
{
"chart": {
"useSNameInToolTip": "1"
},
}
The map will look as shown below:
Click here to edit the above map.
Turn off entity tooltips#
In FusionCharts Suite XT, tooltips are on by default. However, you can turn them off for entities. To do so, set the value of the showEntityToolTip
attribute to 0
.
Refer to the code below:
{
"chart": {
"showEntityToolTip": "0"
},
}
The map will look as shown below:
Click here to edit the above map.
Handle null entities#
There are times when you may have to work with datasets, in which one or more entities have the null value. You can customize such entities by modifying the transparency, color and hover effects. To do so, use the following attributes:
Use the
nullEntityColor
attribute to set the font color for all entities with null value.Use the
nullEntityAlpha
attribute to set the transparency (between0
for transparent and100
for opaque) for entities with null value.Set the value of the
hoverOnNull
attribute to1
, to enable hover effects for entities with null value.
Refer to the code below:
{
"chart": {
"nullEntityColor": "#C2C2D6",
"nullEntityAlpha": "50",
"hoverOnNull": "0"
},
}
The map will look as shown below:
Click here to edit the above map.
Troubleshoot#
In case something goes wrong and you are unable to see the map, check for the following:
If you get a JavaScript error on your page, check your browser console for the exact error and fix accordingly.
If the chart does not show up at all, but there are no JavaScript errors, check whether the FusionCharts Suite XT JavaScript library has loaded correctly. You can use developer tools within your browser to see whether
fusioncharts.js
has loaded properly.If you get a Loading data or an Error in loading data message, check whether your JSON data structure is correct, and ensure there are no conflicts related to quotation marks in your code.