One cannot overemphasize the importance of data-driven decisions in a fast-paced economy. Consequently, businesses today leverage a JavaScript chart library to create maps to better analyze and represent geographically related data. Therefore, enabling users to understand and infer business values easily. In this article, you’ll learn how to create maps using a JavaScript charting library.  Before diving into this article’s nitty-gritty of creating maps with a JavaScript chart library, let’s discuss some prerequisites. 

Are You Using the Right JavaScript Charting Library?

First and foremost, you need to answer the question; what does “right” mean to me? Is it aesthetics, performance, speed, sturdiness, reliability, first-class technical support, ease of use, community support, pricing, device support, or a host of features? Would you be more efficient with a one-trick pony or a more streamlined solution The bottom line is that the “right” JavaScript charting library would be unique to the project it is meant for and the user’s needs. In other words, you need to consider factors like your end-users, rendering capacity, the platform you use, and the maps you want to produce, among others.   Do you require any extra services in addition to the charting library? More outsourced developer ability to jump-start your project or create a specific feature for you? These are essential consideration points, because certain JavaScript chart library providers, for example, FusionCharts, offer these services and can help you save time and resources.  However, to simplify the process of choosing the right JavaScript charting library, we compared the features of the top JavaScript real-time chart libraries. We found that FusionCharts offers all the core features for creating maps, alongside other unique features. In that case, we’ll use FusionCharts as this article’s case study. 

What Are The Steps For Creating Maps Using Your JavaScript Charting Library?

For a visual explanation of how you can create maps using FusionCharts, we’ll be plotting a map showing the population of different continents in the world. The following table lists the data of the continents we’ll be plotting.
CONTINENT POPULATION (Million)
North America 515
South America 373
Asia 3875
Europe 727
Africa 885
Australia 32
  Technically, there are four steps to creating maps using FusionCharts.

1. Convert Your Data To XML Or JSON

FusionCharts does not read tabulated or listed data. However, it recognizes both XML and JSON files. Therefore, you must convert your data to either XML or JSON format. Below are the XML and JSON representations of the data above: JSON
{

    "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"

        }

    ]

}
XML
<chart caption="Global Population" theme="fusion" formatnumberscale="0" numbersuffix="M">

    <colorrange>

        <color minvalue="0" maxvalue="100" code="#D0DFA3" displayvalue="&lt; 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="&gt; 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>
 

2. Include The FusionCharts Library On Your HTML Page

Like any other JavaScript library, you must add the script tag onto the HTML page you want to display your map. Here’s how you can add the FusionCharts library:
<head>

    <title>A Data Driven Map</title>

    http://fusioncharts/fusioncharts.js

    http://fusioncharts/themes/fusioncharts.theme.fusion.js

</head>

3. Create A Container For Where You Want To Place Your Map On Your Page

You can do this using the HTML <div></div> tag, as shown below:
<body>

    <div id="chart-container">A world map will load here!</div>

</body>

4. Create An Instance Of The Map

To do this, house your map in a variable. For our example, our variable would be “populationMap.” Specify your map attributes (width, height, etc.), set color range, and set the JSON or XML data source. Note that each map must have a separate variable. Also, you must wrap your instance in the FusionCharts.ready() function to ensure it isn’t called before the FusionCharts library loads.  Here’s the code for our example:
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();

});
Here’s our map: A map showing the population of different continents using a javascript charting library (Fusioncharts)

Ready To Create Your Own Maps?

Maps as a data visualization tool enable the analysis and representation of geographically related data. This method of expression makes it easier for stakeholders to infer values and make data-driven decisions. However, the JavaScript charting library you use should be one with a comprehensive map library, amongst the other capabilities mentioned in this article. You should be able to find the appropriate map for the region you’re representing.  FusionCharts boasts an extensive map library of more than 1150 interactive maps. These include all the continents and major countries. Additionally, FusionCharts provides powerful ready-made JavaScript maps you can quickly add to your projects. You can download the FusionCharts XT Suite to get started.

Take your data visualization to a whole new level

From column to donut and radar to gantt, FusionCharts provides with over 100+ interactive charts & 2,000+ data-driven maps to make your dashboards and reports more insightful

Explore FusionCharts

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Your next great dashboard starts here

With our interactive and responsive charts, extensive documentation, consistent API, and cross-browser support - delight your customers with kick-ass dashboards

Explore FUSIONCHARTS