Tag Archives: graph

09 Aug
2011

Adding Markers to a Google Chart

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.
Continue reading →

17 Jan
2011

Quick-Start Guide for Google Charts API

Google Charts API is a nice, freely available tool for creating really good-looking graphs very painlessly. Don't be fooled by the "API" bit though, there is no need for advanced understanding of HTTP here - you generate most graphs just by adding parameters to a URL! In this post we'll take a look at a few different ways to generate charts.

One-Off Charts

If you just need a beautiful graph to put into a document or post, then the Chart Wizard is the best place to start. You simply choose the type of chart you want, input your data and choose the colours, labels, settings etc, and the wizard generates the URL for you to copy and paste!

The charts are highly configurable and can easily be changed by editing the URL to the image (view the source of this page to see the URL for the chart shown above). This makes it really easy to generate similar-but-different charts in your web applications, by using the wizard and then replacing some relevant parts of it.

Dynamic Charts

As mentioned above, it is very simple to generate charts with Google Charts API - and all the information for generating the chart is on a URL which returns a png file of the resulting chart. This makes it ideal for integrating into our dynamic web applications and charts that are generated are almost overwhelmingly configurable. That said, there are a few key options that will get you started quickly so let's take a quick tour.

Continue reading →

06 Jan
2011

Adding Multiple Axis Labels to a Google Chart

Recently I've been working on a project using Google Charts API and I absolutely love it. It makes pretty graphs and shows data really nicely - and it's very painless. I did trip over a little trick today though which took me a little while to work out, so I thought I'd share it here: how to add two levels of label to an axis.

The axes in Google Charts are a bit interesting, because what they display bears absolutely no resemblance to what data is there - you label the axes separately, even if they are numbers. To label multiple things - in this example a scale and some units, you simply specify the axis more than once. To specify which axes should be shown, use chxt (CHart aXis Title) and set something like this:
&chxt=x,y,y

Then add the labels as required, for example:

http://chart.apis.google.com/chart?chxl=1:|Sun|Mon|Tue|Wed|Thu|Fri|Sat|2:||Week+37
&chxr=0,0,20&chxs=0,676767,11.5,0,lt,676767&chxt=y,x,x&chbh=a
&chs=360x240&cht=bvg&chco=CC0057CC,3D7930&chds=0,20
&chd=t1:10.059,12.578,13.6,11.135,11.018,7.104,6.92|50,60,100,40,20,40,30

This produces a graph like this:

You can then add labels (using chxl) and ranges (uses chxr) to your axes as you wish - and even add axis labels to the top and right hand graph edges, using the t and r axes, with as many of each as you'd like, and using their list position as a parameter to the range/label settings. I hope this is useful to someone, as it took me a little bit of research to figure it out.