Just a couple weeks ago I was wondering how Google made its sparklines for Google Analytics. I was creating a Health Page of sorts for my application (a rudimentary listing of recent performance statistics, like how long it took to get a DB connection). I had designed my stats collection piece to keep track of data over the last 15 minutes or so, hoping to show a chart of recent activity when I hit my health page. I had plugged in the Colt statistics library to perform some calculations on the set of measurements in each minute. I had a lot of data points ready to display.

But I didn’t like how the Java Sparklines library worked, and I couldn’t see an easy way to mimic Google. Then just a short time later, they released their Chart API. So this morning I put my data into their API and the charts came out pretty decent (ignoring the fonts, decimal formatting, and alignment of my other stuff):

Sparklines using Google's Chart API

I can’t figure out how to get rid of the x and y axes entirely. I mimicked the Analytics chart size of 75×18 (or thereabouts), and it’s close. The Analytics charts also seem to have a minimum 2px buffer of fill along the bottom, so even 0 has some fill below it. They also seem to auto-size so the max measurement it at the top. There are several ways to refine what I’ve started with, but for an admin page that’s full of 80-150 charts, and only viewed by a few people, it’s a decent start.

Please leave a comment if you’ve got any tips on how you use Google’s Chart API to create sparklines.

comments powered by Disqus