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.
If you are interested in real heat maps, try our service http://en.tixik.com/tools/heatmaps which helps you generate heat maps for free. Just a few lines of code and 5 minutes of work. I hope this help.