A cliff located on the edge of the Murray River

Pretty huge drill where a new overpass is being built

While signing up for a flickr account the other day, I had to sign up for a yahoo account (they own flickr). One thing that struck me was how well their signup form is designed.

When users fill out forms, even very simple ones, feedback is something they are always looking for. Rather than have them wonder if they filled the form out correctly, it's very comforting for them to see each field they are filling out is "correct", before moving on.

Once you've entered some information, yahoo's form responds with a simple check-box which means the user is comforted by the fact they have entered the right data, and it means when the form is submitted, it will quite likely be 100% correct the first time.

It also has grey-ed out text in the input boxes to give a little "hint" to the user as they fill out the form, which I'm sure many users would find helpful. To further add to this help, small text explainations appear on the righthand side when the input boxes are clicked upon.

One more point that I feel is worth mentioning, is the wording for the CAPTCHA. Rather than try and explain it, or use technical terms, they simply ask the user to "Type the code shown below".

All in all they seem to do everything right, the *only* thing that I wonder about is if the submit button should be moved inline with the other inputs.

Another photo from Sydney Harbour

Graphs pose a fairly interesting "issue" in a web based environment. They are designed to display numerical data sets, but in a graphical form, and with many web-based objects, they need to be dynamically created (sometimes up-to-the-minute!). 

There are quite a few solutions people have tried to solve the graphing issue, and I'm going to talk about a few of them below:

• Javascript Based Graphing
• Serverside Based Graphing
• Flash Based Graphs
• CSS Graphs
• Google Charts
• Hybrid Flash / Javascript (Yahoo YUI)
  

Javascript Based Graphing:

This is actually quite exciting, and the reason I decided to write this article. Based on jQuery, a graphing plugin called "Flot" takes a set of data and then uses javascript to create a graph on screen (examples). It seems to work perfectly well, and is something that I would be investigating in the future.

One thing which is a bit of a double edged sword, is the size of datasets. Using javascript to draw on-screen is done by the client computer, so it is great in that absolutely none of the graphic-intensive processes are done server-side (reducing server load), but it is a little worrying, that a graph with many data points could freeze up browsers while they try and render a few thousand points of data on a large graph.

The other issue with this style of graphing, is that the image is not easy to copy. Many people would need to copy-paste this into a report or document, and while print-screen and cropping it down later is an option, it does make it a little harder than simply saving it.

Overall it is a good option however, I would love to be able to create a regular table of data values in HTML, and then feed that into Flot and have it transformed into a graph, it makes perfect sense and would degrade perfectly.

Serverside Based Graphs:

This is probably one of the more common methods of creating graphs (right now), and relies on the server to generate an image, which is displayed embedded into a webpage.

This has a number of drawbacks - generating the graph can be server intensive, and on a busy site, it's going to require a whole lot of processing power to be able to keep graphs up-to-date. To counter this, many sites will cache the graph for a period of time, which is fine for some data, but not when you need up-to-the-minute data.

As these services simply produce a static image, you're hard pressed to do anything "interactive" with it, i.e. display datapoint values when hovering the mouse over, or allowing areas of the graph to be zoomed or stretched on the fly.

Ruby on Rails has a great looking package called Gruff, which is a good example of how serverside graphing works, for PHP a popular package is JpGraph which offers a huge range of options.

Flash Based Graphs:

I'm in two minds about flash based graphing, it almost seems like the best option right now however. The problem is pricing this instance however. Most of the good flash graphing platforms are very expensive for even a basic license. Obviously huge amount of work has gone into them, but it is rather a steep price for many companies to outlay "just for graphs", most of the issues with javascript based graphing apply here as well, that is, copy-pasting the graph data directly is simply not possible, and obviously it relies on the user having the flash plugin installed.

PHP/SWF Graphs is a nice, free option - it works with a PHP backend, and a flash front-end. The "free" version has a few limitations, but nothing major. The other popular package seems to be FusionCharts, which is about 1 grand for a "site license", quite pricey for many people to consider, but it does look great. Another totally free option here is Open Flash Chart, well worth a look as well.

CSS Graphs:

This is a cool one, infact, one of my favourites. The idea behind this, is that you would use a list of data (i.e. an unordered list), and then apply CSS (with a little script  for maths calculations, either serverside or clientside) and you end up with a nice looking graph, that is made up entirely of HTML/CSS, no outside technology required.

The only downsides are that you are sort of limited to basic graphs, 3D pie graphs really would be a little hard to recreate using only CSS, but for a regular bar graph, it really is an elegant way of doing it. With a little javascripting you can introduce some interactivity, and for those viewing without any plugins or CSS, the data can be displayed neatly in a list.

As for examples, here's a good example from "apples to oranges" of what we're trying to achieve, and even more impressive is an example from Eric Meyer which uses a table for the data collection - perfect!

Google Charts:

Google has just released a very interesting API for creating charts by simply providing a few arguments in a query string. To show you how easy it really is:

http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World

Easy huh? The beauty of these are, they are plain images which can easily be downloaded, and since google is serving them, you don't have to be too fussy about serverside processing power (although they say there is a soft limit of 50,000 queries per day).

Hybrid Flash / Javascript:

Yahoo has had its YUI toolkit available for quite some time, and has very recently released an (experimental) charting library which uses both javascript and flash to create some pretty good results. I think this rates up there as one of the best solutions so far, although they do seem to require a very specific version of Flash (not sure why).

This YUI charting demo  is worth checking out, it shows how the charts can make use of "live" data generation, which is something many of the other solutions fail at.

Thanks for reading so far, but that about sums things up! Feel free to post any other worthy graphing packages you've come across in the comments!