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.

The Objective

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:

Chart API 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:

http://chart.apis.google.com/chart?cht=ls&chd=t:10.0,58.0,95.0,40,50,10,5,99,0,8,44,32,78,65,43,21,50,10,5,99,0,8,44,32,78,65,43,21&chs=200x40&chm=B,DEEAF3,0,0,0&chco=6797CB&chf=bg,s,444444

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:

XML:
  1. <Metrics Date='7/7/2008 2:58:47 PM'>
  2.   <UserMetrics>
  3.     <NewUsers Value='1' />
  4.     <ActiveUsers Value='0' />
  5.     <RegisteredUsers Value='4' />
  6.     <LastDayLogins Value='3' />
  7.   </UserMetrics>
  8.   <EntityCountMetrics>
  9.     <ExceptionInfo Value='2' />
  10.   </EntityCountMetrics>
  11. </Metrics>

Each day I create a XML file like this with the name Metrics[Year]-[DayOfYear].xml.

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:


(click to enlarge)

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! :P

Related Posts

3 Responses to “Application Evolution using Google Charts”

  1. Jose da Silva Says:

    Nice post!

    I have tried Google Charts some time ago, and i ended up using Open Flash Chart, http://teethgrinder.co.uk/open-flash-chart/, because of the mouse over label!

    If you didn’t know it, here is the tip!

  2. Pedro Santos Says:

    I didn’t, thank you Jose! :)

  3. Bookmarks about Interact Says:

    [...] - bookmarked by 1 members originally found by Galathil on 2008-08-17 Application Evolution using Google Charts http://psantos-blog.zi-yu.com/?p=101 - bookmarked by 5 members originally found by kschu on [...]