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
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.
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.
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.