I seem to blog about graphs a lot at the moment, but that’s because I am seeing a lot of them, with one thing and another. I recently added some little bubbles to the line graphs produced by Bitestats (obligatory elevator pitch: one-page, simple summary report pull from your google analytics account). I think they are kind of cute:

Once I got going with them, they were actually pretty straightforward. You can actually add all kinds of markers to your google chart, complete with funky icons and customisable colours! The code I added to make these is simply:


&chem=y;s=bubble_text_small;d=bb,Max:+917,FFFFFF,660066;ds=0;dp=15|y;s=bubble_text_small;d=bbtr,Min:+185,FFFFFF,660066;ds=0;dp=20


All we have here is a simple specification of which kind of bubbles I want, the label for them and which data series (ds) and data point (dp) to attach it to. I generated the bubble tail directions sensitive to whether they were a min or max label, and which half of the graph they are in.

Dealing With Cut Off Markers

There is very little support for intelligent placement of markers, I first noticed the markers being cut off at the sides, so I placed the tails on the left for the left half of the graph, and on the right for the right half – making sure the markers were further to the middle than the point they refer to. This didn’t solve the problems with the vertical space though; I put the max markers above the line, and the min markers below it (to obscure as little data as possible), but this meant that they were often chopped off since the graph didn’t expand to make space for them. To get around this, I also added some margins with the chma parameter. This allowed me to add space above and below the chart, enough that the markers could appear right at the top or bottom and still show through OK.

I won’t remember how I did this, either for my own use or if anyone asks me, so it seemed worth writing it down. If you have worked with markers and have any tips, please add a comment – I’m not sure mine are as good as they could be and any suggestions are gratefully received.