Most of the enhancements are visual and easy to spot. Some bonus features that are not immediately obvious are that you can click on a series in the legend to hide or display it, and you can zoom in by dragging the mouse to create a box in the area of interest.
Tech Talk
The old weather chart was mostly done in PHP, with some light Javascript icing on top. This rewrite was initially aimed at replacing all of the server-side PHP with browser-based Javascript. This seemed feasible because the source weather data is provided by BOM in JSON format (not JSONP). However, I quickly discovered that browsers cannot retrieve JSON data from third-party servers. This meant that in this case they would only accept JSON data from the Chaucery site itself. Luckily this proved to be a temporary setback.What the browser wants the browser shall get, so I wrote a simple caching proxy in PHP to fetch JSON data from BOM when requested, and pass it unchanged to the browser. This meant I could still have all of the interesting code in Javascript, and add the bonus of caching popular requests for faster retrieval.
The final and most important part of the new site is the use of the great Highcharts charting library. This does all the heavy lifting of producing great-looking interactive charts. All I have to do is lightly process the JSON data to pass to it.
The old process of viewing a weather chart was:
- browser asks Chaucery for chart
- Chaucery asks BOM for data
- Chaucery processes data into an image
- Chaucery sends image back to browser
The new process is:
- browser asks Chaucery for chart
- Chaucery tells browser where data is and how to draw with it
- browser asks Chaucery for data (this was the bit I hoped could be "browser asks BOM for data)
- Chaucery asks BOM for data
- Chaucery sends data back to browser
- browser processes data into an image