
Generating a Heat Map with Google Chart API By mv ark Printer Friendly Version View My Articles 320 Views

Google Chart API is a simple, free, URL based API to generate 9 types of charts including geographic Maps. This article will show how easy it is to generate a geographic Heat map using this API.

They say a picture is worth a thousand words. It has to be true because movies (at least most of them) hugely outsell the books they are based on. Jokes apart, charts help visualize data better. Google Chart API is a welcome addition to the list of free charting tools for ASP.NET developers, the other notable ones being Microsoft Chart controls for .NET Framework 3.5, WebChart and NPlot

Google Chart API - free, no installation required
The Google Chart API supports 9 types of charts (and variations within them liked Stacked Bar etc) but except for Line, Bar, Pie, Radar charts and Scatter plots, the rest including Venn diagrams, Maps, Google-o-meters, QR codes are possibly not charts in the strictest sense of the word. The important thing about this API is that it is URL based. This means no installation of any components is required. The settings & data for the charts are provided though querystring fields and values. As the image is generated by Google's servers, you save on processing and bandwidth. This API option may be suitable for simple scenarios. Google allows 250,000 API calls per day.

What is a heat map?
Geographic heat maps help visualize location-based data by highlighting trends, anomalies and distributions across a geographic area. For instance if there is an epidemic, a heat map can show at a glance regions where it is intense. I find the Google Analytics heat map for Visitors to my blog by country useful in knowing where readers come from. The map below shows that the majority of visitors come from USA and India.

Large websites targeting a global audience can use this information to analyze how they can improve popularity in countries where they is lagging.

My Experiment with Google Chart API
When I came across the Map type in Google Chart API, I realized I could generate a Google Analytics-like Heat Map showing the top 10 countries from where my blog readers come from. Let me admit, I only get a few thousand visitors a month currently but it's a kick to know where they are coming from. The table below shows the percentage of hits to my blog in the first week of April and the top 10 countries from where they originated as derived from my blog stats:

Country with Codes	% of Hits
United States (US)	36.29%
India (IN)	18.24%
United Kingdom (GB)	12.93%
Spain(ES)	8.22%
Australia (AU)	3.32%
Canada (CA)	3.05%
Germany (DE)	2.49%
Netherlands (NL)	1.66%
Israel (IL)	1.39%
China (CN)	0.83%

Before I describe how I went ahead with my experiment, let me show how the generated heat map for the above data looks like -

The above image has been dynamically generated using this URL -
http://chart.apis.google.com/chart?cht=t&chs=440x220&chd=t:36.29,18.24,12.93,8.22,3.32,3.05,2.49,1.66,1.39,0.83&chco=FFFFFF,ADFF2F,006400&chld=USINGBESAUCADENLILCN&chtm=world&chf=bg,s,EAF7FE

Let us see what the fields and values mean.

Deconstructing the URL
There are some 7 querystring fields and values that the Chart API requires to generate the Map shown above. The table below explains the meaning of the fields and values.

Parameter

Description

cht

Denotes Chart Type. The following Chart Types are currently supported.

Chart Type	Value
Line chart & it's variations	lc/ls/lxy
Bar chart (Horizontal bar chart with stacked bars, Vertical bar chart with stacked bars, Horizontal bar chart with grouped bars)	bhs/bvs/bhg
Pie chart (Two dimensional pie chart, Three dimensional pie chart, Concentric pie charts)	p/p3/pc
Venn diagram	v
Scatter plot	s
Radar chart	r/rs
Map	t
Google-o-meter	gom
QR code	qr

chs

Chart Size - it is specified as (width in pixels)x(height in pixels)
For maps, the maximum size is 440 pixels wide by 220 pixels high.
The largest possible area for all charts except maps is 300,000 pixels.

chd

Chart data - this has to be encoded into a form understood by the Chart API. The possible formats are:

Data Encoding	Value
Text encoding	t:(chart data string) As Text encoding is used in the example, the chart data which is drawn from the Percentage of hits shown above will be represented by the chd field like this - chd=t:36.29,18.24,12.93,8.22,3.32,3.05,2.49,1.66,1.39,0.83
Simple encoding	s:(chart data string)
Extended encoding	e:(chart data string)

chco

Chart colors.
For the map we specify 3 colors default color, start of gradient and end of gradient
The chco field in the sample has the following values FFFFFF (white), ADFF2F (GreenYellow), 006400 (DarkGreen). chco=FFFFFF,ADFF2F,006400
The default first color white is used for any country not listed in the chld parameter which holds the 10 countries that we want to show. The other 2 colors are the extremes of the color gradient. This field has the effect of showing the country with the lowest concentration with GreenYellow & that with the highest concentration in DarkGreen while those in between are shown with shades that lie in between the two colors.

chld

Country or State Codes
The countries that we want to highlight need to be specified with the chld field in the ISO 3166-1-alpha-2 code format. The 2 alphabet country code is written one after another without spaces -
chld=USINGBESAUCAPRNLILCN
States within specific countries and countries within specific continents/geographical areas can also be highlighted.

chtm

Geographical area
The geographical area field can contain only one of the following values:

africa
asia
europe
middle_east
south_america
usa
world

As the example requires a world map, the value for chtm is set as world

chf

Fill color
This field requires 3 values - fill type,s (for Solid Fill), RRGGBB format hexadecimal number representing a color for the background. As water masses are considered to be the map's background, they are drawn in pale blue (EAF7FE), as specified in the chf parameter and the fill type is specified as bg for background -
chf=bg,s,EAF7FE

Armed with the knowledge of querystring fields you can build any of the 9 Google Chart types. Some enterprising developers have built custom controls around Google Chart API to abstract the process of constructing the URL.

In conclusion
Typically good Charting tools cost quite a bit and have a steep learning curve which can make their usage daunting. Thankfully, now there are some good options like Google Chart API that make building charts a breeze. Google Chart API includes some "new-age" chart types like Maps, Google-o-meters, QR codes that help users better visualize complex data.

Biography - mv ark

M.V. 'Anil' Radhakrishna is a seasoned developer and a Microsoft MVP (ASP/ASP.NET). He blogs his little discoveries and Web development tips, tricks and trivia quite regularly. You can find some of his unusual code samples & snippets at his Code Gallery.

Caching Pages and Application Data with Database Dependencies

ASP.NET Asynchronous Page Processing

New Free Video Tutorials on ASP.NET 2.0 and ATLAS

Build a Multi-Provider Async Methods Search Page

Dynamic Display of Uploaded Content in ASP.NET 2.0 MasterPages

Article Discussion: Generating a Heat Map with Google Chart API
mv ark posted at Monday, May 04, 2009 2:14 PM
Original Article

Generating a Heat Map with Google Chart API

Google Chart API is a simple, free, URL based API to generate 9 types of charts including geographic Maps. This article will show how easy it is to generate a geographic Heat map using this API.