Sean Barton’s Blog

I came across Google Charts the other day and wanted to let people know what it’s all about. I found it incredibly easy to use to make a simple chart but a little more complicated to make something more complex.

The hello world example is given as follows:

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World (should be used within an <img src=”" /> tag)

To be clear, Google Charts does not use an API key system like Google Maps which takes a layer of complication away.

Let me break up the key parts of the url used to generate the above example…
The first part http://chart.apis.google.com/chart? should always be the same followed by a combination of the following:

• cht = Type of chart you want to make (Common types are p3, lc, bhs, bvs)
• chd = Chart data stream(s), usually in the form of t:item1,item2,item3
• chs = Chart size (widthxheight)
• chl = Chart Label separated by a | per dataset

The next logical step is to look at bar charts because you can do all sorts with datasets/axis/labelling and colouring. See the following example (it’s not as complicated as it looks as I will show):

http://chart.apis.google.com/chart?chs=300x 120&cht=bvg&chg=0,10,1,5&chds=0,25&chxt=y&chxl=0:||5|10|15|20|25&chbh=60&chd=t:10,24, 6&chm=t10,000000,0,0,11|t24,000000,0,1,11| t6,000000,0,2,11&chl=14/08/08|15/08/08 |18/08/08

This one is different in more ways that the obvious fact that it’s not a pie chart any more; it has labels on the axis, background lines, it’s scaled and there are labels per bar. The additional parts of the url are structured in the following manner:

• cht=bvg (it was p3 before meaning 3D pie chart, this one is a vertical bar instead)
• chg = Chart grid accepts 4 arguments: x step, y step, line length, blank length
• chds = Data scale, arguments are minimum and maximum (this example 0-25)
• chxt = Defines which axis have labels on (x, y, r)
• chxl = Defines the labels for above in the form id:label1|label,id:label1|label2
• chbh = Bar height (or width in this case as we are using a vertical chart)
• chm  = Labels for each bar, arguments are id, colour, dataset id, dataset index

This has been a very simple guide to understanding how to use Google Charts. There are Infinitely more resources available at: http://code.google.com/apis/chart/

Google Charts, Statistics, Time Savers Google Charts

I’ve been working on YourMembers for some time now and have started selling it on newmedias with Tim Nash and I wanted to get some useful stats on the current state of the website. Luckily the selling site is running on Wordpress so I put together a simple plugin to give me some information on my last days visitors.

Believe it or not I call it ’session manager’ and It’s freely available through this site and via the wordpress plugin directory (when I get around to uploading it). It gives you the following information:

• The number of visitors in the last day (configurable)
• The number of pages each visitor looked at
• Which they were
• The times each page was visited

That’s it!

I find that a lot of stats plugins give what I would call too much information (ie pretty graphs, information on screen resolution and things like which browser the client is using). Session Manager differs because it provides is a very light weight single table implementation giving 90% of the functionality for 10% of the overhead.

I have been using it on this site and newmedias for the last week or two and it has been instrumental in giving me enough stats data to satisfy that ‘whose looking at my site’ itch. Exactly what I needed!

Any feedback would be greatly appreciated and if anyone fancies having a look at the code and trying to make something more of it then i would be keen to hear about it. I have written it in very clear coherent PHP that anyone could understand.

See the Session Manager page for the download link.

Statistics plugin, wordpress