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:

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.

We created an instance of the FusionCharts() object in the salesByState variable. Each map in your HTML page needs to have a separate variable. The initialization code is wrapped within FusionCharts.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.

Next, we specified the width and height of the map (in pixels) using the width and height property of the constructor.

To specify the data format as JSON, we set the dataFormat parameter to json.

The actual JSON data is embedded as string as value of dataSource parameter. The map object contains a list of key-value pairs that lets you configure the functional and cosmetic attributes of your map. The colorrange object lets you define different numeric ranges, each associated with a color, to indicate progressive thresholds.

Call the render method to render the map on the chartContainer<div> element.

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.js was 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.