Create a Geographical Chart (Geo Chart) in ASP.NET from database using Google Chart Tools

In this article I will explain how to create a Geographical Chart in ASP.NET from database using Google Chart Tools

Download Source Code

Introduction

In my last article I discussed about creating a simple Pie Chart in ASP.NET using Google Chart API. In this article we will see how we can create a Geographical Chart in ASP.NET with data from SQL Server database using

Here we will create a Geographical Chart to show number of views of a site across the globe

Geo Chart using Google Chart Tools - World Map

Geo Chart

Geo Chart is a type of chart provided in Google Chart Tools. Geo Chart has two modes, Region and Marker. Here we will only discuss region mode. It displays a geographical map and highlights a continent, a sub-continent or a country according to the data provided to that region.

We need to load “geochart” visualization package unlike “corechart” used for Pie Chart to create a geo chart and its class name is “google.visualization.GeoChart”

Data Formats of Geo Chart

It takes a DataTable with two column data as its data format. First is the region name which can be region name in text like ‘India’, two character upper case country code like ‘IN’ or three digit code of continent/sub-continents and second is the number that highlights that region to a color based on its value

[‘India’, 5100], [‘US’, 3000], [‘UK’, 500]

It depends on the min and max values of the colorAxis property. For example we have given min and max value as orange and red respectively. Region with the minimum value highlighted as orange and region with the maximum value is highlighted as red. Current color of the region is marked in the legend below the chart.

Events of Geo Chart

Geo Chart has four events, error, ready, regionClick and select.

Example: Following code can be used before chart.draw function to add regionClick event, that triggers when a region is clickedGoogleGeoChart - regionClick event

Options of Geo Chart

Geo Chart can be customized by setting various options to a Geo Chart. For example ‘region’ is used to display a specific region. Following code will set region to India and will show India in center

GoogleGeoChart - options

These options are passed to chart.draw function

chart.draw(data, options);

Google Chart Tools India Map

Step:1 Create a table named “Stats” in SQL Server database with two columns and following data

 Stats Table

Step:2 Create a new ASP.NET Web Application

GoogleGeoChart

Step:3 Write following method in Default.aspx.cs page to get data from the database in a format that can be used in Google Geo Chart

GetChartData

It will return data in following format:

“[‘India’, 5100],[‘US’, 3000],[‘UK’, 500],[‘Canada’, 350],[‘Pakistan’, 300],[‘Denmark’, 250],[‘Italy’, 220],[‘Turkey’, 210],[‘Brazil’, 200],[‘Philippines’, 190],[‘Australia’, 160],[‘Russia’, 150]”

Step:4 Add a JavaScript tag to include JSAPI, a container div with an ID that will hold the chart and a Literal control in Default.aspx page that will be used to generate JavaSctipt at runtime to draw the chart

Load JSAPI

Step:5 Write following in the Load event of Default.aspx.cs page

GoogleGeoChart - Load Map Data

References:

https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart

3 thoughts on “Create a Geographical Chart (Geo Chart) in ASP.NET from database using Google Chart Tools

  1. rijoye

    Hey deepak…. thanks for the insights…… just a question, does this api support displaying districts of a state/province also????

    Reply
  2. rijoye

    Thanks……. what I meant was displaying districts and providing support to color them at country level eg for India in a single map we have states and districts in them and then using the api we can color/highlight the districts??

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *