A Wind Rose

The recent upgrade to the Google Chart API brings new types of charts with interesting possibilities. One of them, the Radar Chart, is well suited to be used as foundation for our new Wind Rose gadget.

Using JavaScript, RSS and two APIs from Google, we can cook our own weather station.

The Challenge

We read a message in the Google Charts forum asking if it was possible to create a Wind Rose

For the casual reader's benefit, a Rose of the Winds is an ancient device which personified compass directions as winds with individual names, such as those of Mistral, Zephyrus and Scirocco.

In modern times, the Wind Rose (note the order of words) is a chart used by meteorologists to plot wind directions and speed at a given location.

The Wind Rose seemed like a nice challenge that we could look into, when spare time was available.

Meet the Radar Chart

The recent addition of a radar type in the Chart API is precisely what we were looking for -in this type of chart, magnitudes are projected from the centre of the chart and the data elements are spread evenly around the radar screen.

We realised that by careful tuning of the data elements, we would end up with something resembling a "needle" from a compass - and this is how we started building our project.

Now we need a source of realistic information to make it usable.

Meet the Data Feed

We are using a RSS feed from weather.com.au with data for the eight major cities in Australia. To integrate this data into our project, we use Google AJAX Feed API.

This wonderful piece of software provides a RSS or Atom feed with just a couple of lines of JavaScript, either as JSON or as XML. And with some basic XML manipulation, any element in the feed is available for further processing.

The event timeline in our weather station goes like this:

  1. Feed is fetched from weather.com.au for the selected location in the combo, and formatted into an XML object.
  2. The node with the information is parsed into key - value pairs. Keys are compared to the test keys we want to find, and values are compared against an array of known wind directions.
  3. Any direction of the wind NOT returned by the step above is given a minimum value. The returned wind direction is given a maximum value. This will produce our nice instrument needle shape.
  4. The URL with our data points is shipped off to Google, and a Radar Chart is returned. The wind speed is then added to the page for the sake of completeness.

In practice, the events were a little more difficult to implement -from the discrepancies in the parsing of the RSS feed, to the fact that a Radar Chart is not really meant to be used as a Wind Rose.
A couple of undocumented hacks had to be dealt with -like the addition of a dummy data point at the end of the series to close the graph off.

Please read the copyright at weather.com.au if you plan to use this code for your own list of cities.

A ZIP of the project can be found here

Disclaimer: This code is posted "as is", with a Creative Commons license and neither Carlos Labs nor any of its representatives guarantee the suitability of this script, or assume any responsibility for your actions.
This script is free to use on any software project, free or otherwise, provided you credit Carlos Labs and you do not remove the header in the script.
Project: 200803B