July 15th, 2008
I'm becoming a big fan of the Google Chart API, because it's a very easy way to add some charts to a web application. All you have to do is to choose a chart type, bundle in the data, and google will provide you with clean, pretty chart. No more configurations, no third party dependencies, it's as easy as it gets.
I've recently incorporated google charts in what I like to call our application's evolution data. Good metrics are always important, and there are several tools out there like Google Analytics that provide us with good data. The problem is, that these tools only handle visits, pageviews, referrals, keywords, etc. All generic information that makes sense for all sites. But what about custom application information?
How can we track the number of active users, last day logins, number of new users per day, and other useful metrics? This is what I call application evolution, and I'll show how I've achieved it using the Google Chart API.
My objective is to have a simple representation of metrics evolution. The metric can be anything, and for each metric I want to present on the admin area, a chart and the last registered value. Example:
77 Active Users
Using Google Chart API with C#
We interact with the API using urls. We build an url with the chart info, and google will return the chart. The documentation on their site is really helpful. So, let's break down the previous chart. The url for that chart is:
If we split the url, we get:
- http://chart.apis.google.com/chart? - The endpoint
- cht=ls - The chart type; this one is the sparkline: it's like a line chart without the axes, very analytics like
- chd=t:10.0,58.0,95.0,40,50,(...) - The actual chart data, using text encoding. With this encoding you specify your data with percentages, separated by a comma. If you need a larger value collection you might want to consider the extended encoding
- chs=200x40 - The chart size
- chm=(...)&chco=(...)&chf=(...) - The chart colors
Preparing the Metrics
We can only build the charts after gathering the metrics. To gather metrics I use a XML file that is created everyday. The file looks like this:
<Metrics Date='7/7/2008 2:58:47 PM'>
<NewUsers Value='1' />
<ActiveUsers Value='0' />
<RegisteredUsers Value='4' />
<LastDayLogins Value='3' />
<ExceptionInfo Value='2' />
Each day I create a XML file like this with the name
From Metrics to Charts
Having the XML files, and the API to graphically present that information, we only need to do the actual data import. Once a day I open up all the previous 30 files and build a list of values per metric. I start by creating a
XPathDocument for each file and with it I extract one value per metric, that I'll register on the global metrics dictionary. After this step, I just have to build the chart URL.
I write all the charts for all the metrics on an HTML file that is imported by the administration front page. Here's an example:
This is nice, but what I would really like, was to provide my custom metrics to Google Analytics, and have them do all the storing, manipulation, presentation, etc. I mailed them suggesting this new feature, but I don't know why, I never got a reply!