Google Visualizations

Google visualisations - the right place to get free yet powerful charting solutions for your website

While working on my idea of presenting on this website also the Romanian National Bank exchange rates (very useful in this crisis time), I end up in choosing a form of visualization.

One might argue that text is good enough, but for me frankly graphs and charts are the best. So I started looking on the internet for free and customizable charting tools.

From the plethora of choices on the web I will present just a few:

1. An interesting tutorial on how to build a chart of your own – it’s the easy way to get exactly what you need done as it should be. It is quite old, but still actual, as Macromedia MX programming is still supported in Adobe CS3

2. OpenFlashChart GWT Libraryvery interesting, free library and highly customizable. But it comes with a big drawback : it has approx 375 Kb .. quite big for my requirements.

3. Origamy Flash graph component – amazingly nice and costly . 99$ ..

4. Google visualization – free, fast, light and with a ton of settings. They have pies, tables, charts … with really lots of settings. The added traffic isn’t much … around 30 kb per graph ( and I measured biggest one – Annotated time line ).

Finally, I decided that I will bet on Google this time and I choose the Annotated time line chart. The reasons were the complexity of settings, lightweight on the traffic but also the fact that they support quite good their code.

Not to mention the fact that they provide a live testing and tweaking framework – the Playground, in which you can really feel the piece of software that you will use. After some thinking I just grab the code and start the modifications in order to adapt it to my needs.

Basically, the control needs a data source and few settings. It requires to include in page few external libraries, provided and maintained by Google and to write the code that will fill that data source. This one is a simple yet powerful datatable who accepts filling in several ways, mentioning the classic one – add row after row, one that adds only specific cells on a row and a bulk one that adds a batch of rows at a time. Since I knew that I will have a lot of data ( 4 years of exchange rates) I choose the one with smallest impact on page size – the bulk one.

But be careful! There’s a catch with this control – for it to work properly, as a timeline, you have to provide a column of dates. But this dates are quite strange and I couldn’t format them neither in MySQL nor in PHP, because the Month component starts with January = 0 not 1 !!!! Who in this world thinks to January as Month Zero ‘

Go to BNR Chart for exchange rates using AjaxFinally the entire setup is done and runs smoothly. The page is still small ( around 100 Kb for the source AND flash)  and loads very fast. Check it out by clicking on the image in the right! ->>>