Your First Map
Harry’s SuperMart has stores in multiple US states. Harry wants to keep a tab on the sales numbers across all these states. While he can easily put those in a column chart and compare, the context of location would be lost, and the chart will become illegible if he had to plot all the states. Additionally, Harry has thresholds that let him segregate states on the basis of low, moderate and high in terms of sales figures.
To solve this, we will use a US Map to represent his sales, which colors each state based on the sales. Additionally, it provides an interactive slider for Harry to narrow down to specific states, based on a selected range of sales values.
The final map would look as under.
FusionCharts will load here..
The data used in this map is shown below:
| State | Entity | Name Revenue |
|---|---|---|
| Alabama | AL | $75,873M |
| Alaska | AK | $58,911M |
| Arizona | AZ | $41,588M |
| Arkansas | AR | $34,497M |
| California | CA | $61,861M |
| … | … | … |
| … | … | … |
| West Virginia | WV | $95,890M |
| Wisconsin | WI | $42,382M |
| Wyoming | WY | $78,835M |
Maps in FusionCharts Suite XT are provided as part of FusionMaps XT. FusionMaps XT helps you display geographical data distributed by category, regions or entities using animated and interactive maps. You can use it to plot business data like revenue by regions, census data like population by state, election results, flight routes, office locations and survey results effectively.
Let’s Begin
Let’s now get to building the map. There are 5 simple steps to building a map using FusionCharts Suite XT:
- Installing FusionCharts Suite XT for your application
- Converting your data to a JSON or XML format
- Including the FusionCharts Suite XT JavaScript library in your HTML page
- Creating a container
<div>for the map - Using the new
FusionCharts()constructor to create the map instance, and then calling therender()method
Installing FusionCharts Suite XT for your application
To see whether you have FusionCharts Suite XT installed for your web application, as detailed here, check for the following files in your fusioncharts folder:
fusioncharts.charts.jsfusioncharts.jsfusioncharts.powercharts.jsfusioncharts.gantt.jsfusioncharts.treemap.jsfusioncharts.zoomscatter.jsfusioncharts.maps.jsfusioncharts.widgets.js
The fusionchart.usa.js is located inside the maps folder in your download package. The default package ships only with US and World map. But, you can download all the other 965 maps here.
Converting your data to FusionCharts Suite XT JSON/XML format
Here is the JSON/XML representation of the data you will use to build this map
{
"chart": {
"caption": "Annual Sales by State",
"subcaption": "Last year",
"entityFillHoverColor": "#cccccc",
"numberScaleValue": "1,1000,1000",
"numberScaleUnit": "K,M,B",
"numberPrefix": "$",
"showLabels": "1",
"theme": "fint"
},
"colorrange": {
"minvalue": "0",
"startlabel": "Low",
"endlabel": "High",
"code": "#e44a00",
"gradient": "1",
"color": [
{
"maxvalue": "56580",
"displayvalue": "Average",
"code": "#f8bd19"
},
{
"maxvalue": "100000",
"code": "#6baa01"
}
]
},
"data": [
{
"id": "HI",
"value": "3189"
},
{
"id": "DC",
"value": "2879"
},
{
"id": "MD",
"value": "920"
},
{
"id": "DE",
"value": "4607"
},
{
"id": "RI",
"value": "4890"
},
{
"id": "WA",
"value": "34927"
},
{
"id": "OR",
"value": "65798"
},
{
"id": "CA",
"value": "61861"
},
{
"id": "AK",
"value": "58911"
},
{
"id": "ID",
"value": "42662"
},
{
"id": "NV",
"value": "78041"
},
{
"id": "AZ",
"value": "41558"
},
{
"id": "MT",
"value": "62942"
},
{
"id": "WY",
"value": "78834"
},
{
"id": "UT",
"value": "50512"
},
{
"id": "CO",
"value": "73026"
},
{
"id": "NM",
"value": "78865"
},
{
"id": "ND",
"value": "50554"
},
{
"id": "SD",
"value": "35922"
},
{
"id": "NE",
"value": "43736"
},
{
"id": "KS",
"value": "32681"
},
{
"id": "OK",
"value": "79038"
},
{
"id": "TX",
"value": "75425"
},
{
"id": "MN",
"value": "43485"
},
{
"id": "IA",
"value": "46515"
},
{
"id": "MO",
"value": "63715"
},
{
"id": "AR",
"value": "34497"
},
{
"id": "LA",
"value": "70706"
},
{
"id": "WI",
"value": "42382"
},
{
"id": "IL",
"value": "73202"
},
{
"id": "KY",
"value": "79118"
},
{
"id": "TN",
"value": "44657"
},
{
"id": "MS",
"value": "66205"
},
{
"id": "AL",
"value": "75873"
},
{
"id": "GA",
"value": "76895"
},
{
"id": "MI",
"value": "67695"
},
{
"id": "IN",
"value": "33592"
},
{
"id": "OH",
"value": "32960"
},
{
"id": "PA",
"value": "54346"
},
{
"id": "NY",
"value": "42828"
},
{
"id": "VT",
"value": "77411"
},
{
"id": "NH",
"value": "51403"
},
{
"id": "ME",
"value": "64636"
},
{
"id": "MA",
"value": "51767"
},
{
"id": "CT",
"value": "57353"
},
{
"id": "NJ",
"value": "80788"
},
{
"id": "WV",
"value": "95890"
},
{
"id": "VA",
"value": "83140"
},
{
"id": "NC",
"value": "97344"
},
{
"id": "SC",
"value": "88234"
},
{
"id": "FL",
"value": "88234"
}
]
}
{
"chart": {
"caption": "Annual Sales by State",
"subcaption": "Last year",
"entityFillHoverColor": "#cccccc",
"numberScaleValue": "1,1000,1000",
"numberScaleUnit": "K,M,B",
"numberPrefix": "$",
"showLabels": "1",
"theme": "fint"
},
"colorrange": {
"minvalue": "0",
"startlabel": "Low",
"endlabel": "High",
"code": "#e44a00",
"gradient": "1",
"color": [
{
"maxvalue": "56580",
"displayvalue": "Average",
"code": "#f8bd19"
},
{
"maxvalue": "100000",
"code": "#6baa01"
}
]
},
"data": [
{
"id": "HI",
"value": "3189"
},
{
"id": "DC",
"value": "2879"
},
{
"id": "MD",
"value": "920"
},
{
"id": "DE",
"value": "4607"
},
{
"id": "RI",
"value": "4890"
},
{
"id": "WA",
"value": "34927"
},
{
"id": "OR",
"value": "65798"
},
{
"id": "CA",
"value": "61861"
},
{
"id": "AK",
"value": "58911"
},
{
"id": "ID",
"value": "42662"
},
{
"id": "NV",
"value": "78041"
},
{
"id": "AZ",
"value": "41558"
},
{
"id": "MT",
"value": "62942"
},
{
"id": "WY",
"value": "78834"
},
{
"id": "UT",
"value": "50512"
},
{
"id": "CO",
"value": "73026"
},
{
"id": "NM",
"value": "78865"
},
{
"id": "ND",
"value": "50554"
},
{
"id": "SD",
"value": "35922"
},
{
"id": "NE",
"value": "43736"
},
{
"id": "KS",
"value": "32681"
},
{
"id": "OK",
"value": "79038"
},
{
"id": "TX",
"value": "75425"
},
{
"id": "MN",
"value": "43485"
},
{
"id": "IA",
"value": "46515"
},
{
"id": "MO",
"value": "63715"
},
{
"id": "AR",
"value": "34497"
},
{
"id": "LA",
"value": "70706"
},
{
"id": "WI",
"value": "42382"
},
{
"id": "IL",
"value": "73202"
},
{
"id": "KY",
"value": "79118"
},
{
"id": "TN",
"value": "44657"
},
{
"id": "MS",
"value": "66205"
},
{
"id": "AL",
"value": "75873"
},
{
"id": "GA",
"value": "76895"
},
{
"id": "MI",
"value": "67695"
},
{
"id": "IN",
"value": "33592"
},
{
"id": "OH",
"value": "32960"
},
{
"id": "PA",
"value": "54346"
},
{
"id": "NY",
"value": "42828"
},
{
"id": "VT",
"value": "77411"
},
{
"id": "NH",
"value": "51403"
},
{
"id": "ME",
"value": "64636"
},
{
"id": "MA",
"value": "51767"
},
{
"id": "CT",
"value": "57353"
},
{
"id": "NJ",
"value": "80788"
},
{
"id": "WV",
"value": "95890"
},
{
"id": "VA",
"value": "83140"
},
{
"id": "NC",
"value": "97344"
},
{
"id": "SC",
"value": "88234"
},
{
"id": "FL",
"value": "88234"
}
]
}Including FusionCharts Suite XT library in your page
To include the FusionCharts Suite XT JavaScript library in your HTML page, you use the <script> tag as under. Next, we include a theme file to style the chart. The theme is called fint (FusionCharts internal) and it is present in themes folder of your download.
<html>
<head>
<title>My First map using FusionMaps XT</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
</head>
</html>This informs the browser where to load the FusionCharts Suite XT library from. We recommend using a relative path to the library hosted on the same domain as your web application.
Creating a container for your map in the web page
Next, you will need to create a container for your map in the form of a <div> element, as under.
This will later allow us to reference the chartContainer div and render a map in this space.
Creating an instance of the map
The final step is to create an instance of the map, initialize with the correct width and height and then set the JSON data source.
<script type="text/javascript">
FusionCharts.ready(function(){
var salesByState = new FusionCharts({
"type": "maps/usa",
"renderAt": "chartContainer",
"width": "600",
"height": "400",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Annual Sales by State",
"subcaption": "Last year",
"entityFillHoverColor": "#cccccc",
"numberScaleValue": "1,1000,1000",
"numberScaleUnit": "K,M,B",
"numberPrefix": "$",
"showLabels": "1",
"theme": "fint"
},
"colorrange": {
"minvalue": "0",
"startlabel": "Low",
"endlabel": "High",
"code": "#e44a00",
"gradient": "1",
"color": [
{
"maxvalue": "56580",
"displayvalue": "Average",
"code": "#f8bd19"
},
{
"maxvalue": "100000",
"code": "#6baa01"
}
]
},
"data": [
{
"id": "HI",
"value": "3189"
},
{
"id": "DC",
"value": "2879"
},
{
"id": "MD",
"value": "920"
},
{
"id": "DE",
"value": "4607"
},
{
"id": "RI",
"value": "4890"
},
{
"id": "WA",
"value": "34927"
},
{
"id": "OR",
"value": "65798"
},
{
"id": "CA",
"value": "61861"
},
{
"id": "AK",
"value": "58911"
},
{
"id": "ID",
"value": "42662"
},
{
"id": "NV",
"value": "78041"
},
{
"id": "AZ",
"value": "41558"
},
{
"id": "MT",
"value": "62942"
},
{
"id": "WY",
"value": "78834"
},
{
"id": "UT",
"value": "50512"
},
{
"id": "CO",
"value": "73026"
},
{
"id": "NM",
"value": "78865"
},
{
"id": "ND",
"value": "50554"
},
{
"id": "SD",
"value": "35922"
},
{
"id": "NE",
"value": "43736"
},
{
"id": "KS",
"value": "32681"
},
{
"id": "OK",
"value": "79038"
},
{
"id": "TX",
"value": "75425"
},
{
"id": "MN",
"value": "43485"
},
{
"id": "IA",
"value": "46515"
},
{
"id": "MO",
"value": "63715"
},
{
"id": "AR",
"value": "34497"
},
{
"id": "LA",
"value": "70706"
},
{
"id": "WI",
"value": "42382"
},
{
"id": "IL",
"value": "73202"
},
{
"id": "KY",
"value": "79118"
},
{
"id": "TN",
"value": "44657"
},
{
"id": "MS",
"value": "66205"
},
{
"id": "AL",
"value": "75873"
},
{
"id": "GA",
"value": "76895"
},
{
"id": "MI",
"value": "67695"
},
{
"id": "IN",
"value": "33592"
},
{
"id": "OH",
"value": "32960"
},
{
"id": "PA",
"value": "54346"
},
{
"id": "NY",
"value": "42828"
},
{
"id": "VT",
"value": "77411"
},
{
"id": "NH",
"value": "51403"
},
{
"id": "ME",
"value": "64636"
},
{
"id": "MA",
"value": "51767"
},
{
"id": "CT",
"value": "57353"
},
{
"id": "NJ",
"value": "80788"
},
{
"id": "WV",
"value": "95890"
},
{
"id": "VA",
"value": "83140"
},
{
"id": "NC",
"value": "97344"
},
{
"id": "SC",
"value": "88234"
},
{
"id": "FL",
"value": "88234"
}
]
}
});
salesByState.render();
});
</script>This is what we did in the above code
- We created an instance of the
FusionCharts()object in thesalesByStatevariable. Each map in your HTML page needs to have a separate variable. 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. - We instantiated the USA map for this example. Each map in FusionCharts Suite XT has an unique alias. You can find the list of all maps an their aliases here. The default package ships only with a US and World map. But, you can download all the other 965 maps here.
- Next, we specified the
widthandheightof the map (in pixels) using the width and height property of the constructor. - To specify the data format as JSON, we set the
dataFormatparameter to json. - The actual JSON data is embedded as string as value of
dataSourceparameter. Themapobject contains a list of key-value pairs that lets you configure the functional and cosmetic attributes of your map. Thecolorrangeobject lets you define different numeric ranges, each associated with acolor, to indicate progressive thresholds. - Call the
rendermethod to render the map on thechartContainer<div>element.
Thats it! you have configured your first Map.
The full HTML code for the example looks as under:
<html>
<head>
<title>My First map using FusionCharts Suite XT</title>
<script type="text/javascript" src="fusioncharts/js/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/js/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">
FusionCharts.ready(function () {
var salesByState = new FusionCharts({
"type": "maps/usa",
"renderAt": "chartContainer",
"width": "600",
"height": "400",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Annual Sales by State",
"subcaption": "Last year",
"entityFillHoverColor": "#cccccc",
"numberScaleValue": "1,1000,1000",
"numberScaleUnit": "K,M,B",
"numberPrefix": "$",
"showLabels": "1",
"theme": "fint"
},
"colorrange": {
"minvalue": "0",
"startlabel": "Low",
"endlabel": "High",
"code": "#e44a00",
"gradient": "1",
"color": [
{
"maxvalue": "56580",
"displayvalue": "Average",
"code": "#f8bd19"
},
{
"maxvalue": "100000",
"code": "#6baa01"
}
]
},
"data": [
{
"id": "HI",
"value": "3189"
},
{
"id": "DC",
"value": "2879"
},
{
"id": "MD",
"value": "920"
},
{
"id": "DE",
"value": "4607"
},
{
"id": "RI",
"value": "4890"
},
{
"id": "WA",
"value": "34927"
},
{
"id": "OR",
"value": "65798"
},
{
"id": "CA",
"value": "61861"
},
{
"id": "AK",
"value": "58911"
},
{
"id": "ID",
"value": "42662"
},
{
"id": "NV",
"value": "78041"
},
{
"id": "AZ",
"value": "41558"
},
{
"id": "MT",
"value": "62942"
},
{
"id": "WY",
"value": "78834"
},
{
"id": "UT",
"value": "50512"
},
{
"id": "CO",
"value": "73026"
},
{
"id": "NM",
"value": "78865"
},
{
"id": "ND",
"value": "50554"
},
{
"id": "SD",
"value": "35922"
},
{
"id": "NE",
"value": "43736"
},
{
"id": "KS",
"value": "32681"
},
{
"id": "OK",
"value": "79038"
},
{
"id": "TX",
"value": "75425"
},
{
"id": "MN",
"value": "43485"
},
{
"id": "IA",
"value": "46515"
},
{
"id": "MO",
"value": "63715"
},
{
"id": "AR",
"value": "34497"
},
{
"id": "LA",
"value": "70706"
},
{
"id": "WI",
"value": "42382"
},
{
"id": "IL",
"value": "73202"
},
{
"id": "KY",
"value": "79118"
},
{
"id": "TN",
"value": "44657"
},
{
"id": "MS",
"value": "66205"
},
{
"id": "AL",
"value": "75873"
},
{
"id": "GA",
"value": "76895"
},
{
"id": "MI",
"value": "67695"
},
{
"id": "IN",
"value": "33592"
},
{
"id": "OH",
"value": "32960"
},
{
"id": "PA",
"value": "54346"
},
{
"id": "NY",
"value": "42828"
},
{
"id": "VT",
"value": "77411"
},
{
"id": "NH",
"value": "51403"
},
{
"id": "ME",
"value": "64636"
},
{
"id": "MA",
"value": "51767"
},
{
"id": "CT",
"value": "57353"
},
{
"id": "NJ",
"value": "80788"
},
{
"id": "WV",
"value": "95890"
},
{
"id": "VA",
"value": "83140"
},
{
"id": "NC",
"value": "97344"
},
{
"id": "SC",
"value": "88234"
},
{
"id": "FL",
"value": "88234"
}
]
}
});
salesByState.render();
});
</script>
</head>
<body>
<div id="chartContainer">FusionMaps XT will load s map here!</div>
</body>
</html>When you now view the page in a browser, you should see an interactive 2D Map, showing state-wise sales for Harry’s SuperMart. This map works seamlessly across mobile devices like iPhones, iPads, Android devices etc.
Was there a problem rendering the map?
In case something went wrong and you are unable to see the map, check for the following:
- If you are getting 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 if the FusionCharts Suite XT JavaScript library has loaded correctly. You can use developer tools within your browser to see if
fusioncharts.jswas loaded. - If you get a Loading Data or Error in loading data message, check whether your JSON data structure is correct, and there are no conflicts related to quotation marks in your code.
Click here for more information on Troubleshooting.
Now that Harry can monitor his state-wise Sales using this interactive map, let’s see how we can change the type and size of a chart according to our requirements.