Author Archives: Steve
Google-O-Meter tutorial with examples
I came across the Google-o-meter widget in the Google Charts API today, and had a perfect use for it in my current pet project, convict records.
For the uninitiated, the Google Charts API allows you to request an image with query string parameters and format it in various different ways to produce a pretty graph.
I wanted to display the severity of a convict’s sentence, relative to the known minimum and maximum sentence terms of other convicts I had in my database.
It took a little wrangling before I discovered that I really only needed a few parameters to achieve what I wanted – the final request HTML looked like this:
Lets break that down a little.
Range and Indicator Position
The Google-o-meter defaults to a range of 0-100, therefore the easiest way to position your indicator is if you can create a percentage value from 0-100. It does also support custom ranges but that is beyond the scope of this tutorial.
How do we determine the position of the indicator (in PHP)?
The sentence severity is the sum of the sentence term in question, divided my the maximum known sentence (in my case 47 years, multiplied by 100, and finally rounded for good measure. This gives a percentage result somewhere between 0-100%. 23 years = 50%, 47 years = 100% and so on.
Other Parameters
Now that the sentence severity is known, all that is left to do is to pass the parameters to the Google Charts API.
- chs=240×100
The dimensions of the image length x height. *important* if you change the height value here, make sure you also change the <img> width and height attributes - cht=gm
The chart type – gm = google-o-meter - chco=555555,FAFA05|FF0000
The indicator hexadecimal colour followed by the start colour and end colour (the
Convict Records of Australia
Are you the descendant of a convict?
Utilising just released data from the State Library of Queensland, I have put together a searchable database of the British Convict transportation register. Over 123,000 of the 160,000 convicts transported to Australia are in this database – check out your families Convict Records!
I have already found some interesting facts – Did You Know: 603 convicts carried the name John Smith – the most common name in the records?
Don’t miss the convict facts for all sorts of weird and interesting things. Over time I will be adding information about the First Fleet, Second Fleet and Third Fleet, the lifestyle of convicts and more.
Did I mention its free?
jQuery Datepicker Ajax Request to Highlight Days from MySQL
With a bit of fiddling you can retrieve a bunch of dates in a given timespan from the database (or elsewhere) and make your jQuery UI Datepicker a bit more practical and informative.
A method within the Datepicker plugin called beforeShowDay can do the following magic:
- disable a given day from selection
- add a CSS class to a given day
- add a tooltip to a given day
Whilst it is probably a bit easier to make the ajax request itself using the beforeShowDay method, that puts us in the uncomfortable position of making 30+ ajax requests, one for every day displayed. If we are showing 2 months or the page has more than one datepicker, thats 60+ requests!
The better option is to make a single request onload, and an additional request whenever the month or year is changed.
The purpose of my implementation is to highlight days which have no due items in my Studiotime time management web software. This allows me to select a due date without worrying about whether I have other items already due on that day. You can just as easily check for other parameters relevant to your application – you need only adjust the sql query.
Lets start with the freeDays array and the onload javascript on the datepicker input.
So now we have a working method of requesting a php page on every page load and again every time the month or year selectors are changed. Lets have a look at how the PHP and MySQL script looks:
The CSS rule is as follows:
Disclaimer: I am no jQuery ninja and produced this tutorial by combining various other resources that I have linked to below. If you have any suggestions or improvements let… Read more
