In this article I will explain how to create a Geographical Chart in ASP.NET from database using Google Chart Tools
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 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.
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
These options are passed to chart.draw function
Step:1 Create a table named “Stats” in SQL Server database with two columns and following data
Step:2 Create a new ASP.NET Web Application
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
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:5 Write following in the Load event of Default.aspx.cs page