Simple graphing with googlecharts (plus gridlines and markers!)

Saturday 01/3/2009  –  Category: Uncategorized

It didn't occur to me until a day or two after I released Flickr Original that I should probably record usage stats, so I added a few lines of code to track views/downloads. Earlier this week I finally decided to do something with all the data. I decided on a simple line graph to trend views/users/downloads and a counts summary table (inspired by the one from the Flickr stats page).

For the line graph I initially looked at gruff but ended up using the Google Chart API in conjuction with mattetti's Googlecharts gem because it seemed easier to use (and no need to install RMagick/Imagemagick).

The Googlecharts gem basically takes in parameters and generates the url that creates the image.
Gchart.line(:data => [0, 40, 10, 70, 20]) generates:
http://chart.apis.google.com/chart?chs=300x200&chd=s:AiI9R&cht=lc which is this generated image:

The parameters you can use are pretty self-explanatory from the usage examples. I also wanted to add point markers and gridlines (a la Google Analytics), which have to be added as custom params. You can do this by setting the :custom hash to a query string with the extra variables (see the Chart API docs for all the options...there are a lot!) .

Code snippet:

Generates:

Custom Parameters
Line style
chls=
[data set 1 line thickness],
[length of line segment],
[length of blank segment]

chls=3,1,0 creates a solid line 3px thick

Gridlines
chg=
[x axis step size],
[y axis step size],
[length of line segment],
[length of blank segment]

chg=14.29,50,1,4 creates gridlines of 1px line segments spaced 4px apart with a step size of 100/7 on the x-axis and 100/2 on the y-axis. This gives us gridlines for each day and a halfway marker for the counts.

Markers
chm=
[marker type],[color],[data set index],[data point],[size],[priority]
o = circle, 0 uses the current data set, -1 to draw a marker on each data point

chm=o,0066FF,0,-1,6 creates blue 6px circle markers on each point of the current set