Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Making Your First Map in JavaScript
Suppose you are a business owner and your offices are located in 10 different Indian states. Now you want to display this data on your website, then this article is for you, where I am going to cover the process of creating an interactive map using FusionCharts core JavaScript charts library and it’s maps package.
Firstly, there are two ways to display data on your website −
A list with all the addresses or
An interactive map?
If you are a visual learner like most people, you will go with the second option – an interactive map.
And if you want to learn how to make an interactive map, you are at the right place.
To make it easy to understand I have divided this tutorial intro into four steps −
Step 1 − Structuring data
Step 2 − Including FusionCharts JavaScript files
Step 3 − Creating Container Element for Chart
Step 4 − Rendering the Map
Step 1 − Structuring Data
We are going to plot map of India representing number of computers with internet per state for 2013. Below is the tabular data for the same −
| State | No. of Computers |
|---|---|
| Jammu & Kashmir | 58438 |
| Himachal Pradesh | 41344 |
| Punjab | 292124 |
| and so on… |
FusionCharts understands XML and JSON data and we are going to use JSON for this tutorial.
As we have the data now, we will form the data array in JSON for our map. Data array for maps consists of one object for each state/entity which includes a unique id and value for that state. This id acts as identifier for the state and its corresponding value.
Here is how we will form data for our map −
"data": [
{ "id": "015", "value": "58438" },
{ "id": "014", "value": "41344" },
{ "id": "028", "value": "292124" },
// more map data…
]
Step 2 − Including FusionCharts JavaScript Files
This is the first thing that every web developer has to do before actual programming of web-app starts – including dependencies for the project.
In this step we will include JavaScript files provided by FusionCharts using <script> tags in head section of our web page.
We will be including these three files −
FusionCharts core JavaScript file
FusionCharts core maps file
Map definition file for India
And here’s how we do it −
<head> <script type="text/javascript" src="location/of/fusioncharts.js"></script> <script type="text/javascript" src="location/of/fusioncharts.maps.js"></script> <script type="text/javascript" src="location/of/fusioncharts.india.js"></script> </head>
fusioncharts.js and fusioncharts.maps.js are required to plot any map, while fusioncharts.india.js is required to plot map of India.
To plot map for any other country or state you will have to include JavaScript file for that particular country or state which are available under map definition package provided by FusionCharts.
Step 3 − Creating Container Element for Chart
Our map will occupy its position on web page inside an HTML <div> element. Here is how we do it −
<div id="indian-map">Just a Second!</div>
id for each map or chart on a web page must be unique.
Step 4 − Rendering the Map
Now that all the things we need to render the map are in place, we will finally use FusionCharts instance to create an object for our chart.
Here is the syntax for the same −
FusionCharts.ready(function() { // // FusionCharts instance
var mapObj=new FusionCharts({ // Map Object // map definition });
});
Now we will implement the above syntax to create object for our map and use render() method to render the chart.
FusionCharts.ready(function() {
var mapOfIndia = new FusionCharts({
type: "maps/india",
renderAt: "indian-map", // div container for our map
height: "650",
width: "100%",
dataFormat: "json",
dataSource: {
"chart": {
"caption": "No. of Computers with Internet in India",
"subCaption": "Census 2011",
"captionFontSize": "25",
// other chart configurations
},
"colorrange": {
"minvalue": "300",
"startlabel": "Low",
"endlabel": "High",
"code": "#efedf5",
"gradient": "1",
"color": [{
"maxvalue": "220000",
"displayvalue": "Avg.",
"code": "#bcbddc"
}, {
"maxvalue": "1400000",
"code": "#756bb1"
}]
},
"data": [{
"id": "015",
"value": "58438"
}, {
"id": "014",
"value": "41344"
}, {
"id": "028",
"value": "292124"
},
// more data
]
}
}).render(); // render method
});
If you have followed all the steps described above, you should have a great looking map of India with you like the one below –
Next Steps
Basic map is good to represent the data, but there are a lot of things that can be done using maps and charts. I am discussing some of them below −
-
Customizing the Design − FusionCharts provides tons of attributes to customize the map’s look and feel.Here are some of attributes I used to enhance the above map
captionFontSize − (int) It is used to change caption’s font size.
baseFont − (string) It is used to change the font style across the chart. You are not restricted only to use system fonts, but can also opt for any font family you like. All you have to do is include it in HTML and declare it using this attribute.
Adding Markers − FusionCharts provides an awesome feature in maps to add markers which can be used to represent locations like cities, malls and landmarks.
Moving to Next Level − FusionCharts allows you to take your data viz experience to next level by adding awesome features like drill-down, annotations and events to your map or chart.
774 Views
