Today’s browser landscape looks quite different. Javascript performance his improved significantly, and IE6′s market share has halved. More significantly, there are a lot of browsers out there that aren’t even Flash-capable. Hello, Apple!

I’ll go into the techie details below, but the short version is this: if you used to see a big blank space in the middle of the page on Timetric, you’ll probably now see an attractive, interactive graph; if you’re used to seeing a “Loading…” indicator then a Flash graph you’ll probably still see that. However, if you’re feeling adventurous you can try adding ‘?noflash’ to the end of the URL and you’ll get the cool new thing everyone’s raving about.

Timetric's SVG graphing from an iPad

Techie Bits

We were looking for a plotting solution which matched the following criteria:

• Standards compliant
• Fast & light-weight
• Cross-browser
• Interactive (to both mouse events and touch)
• Attractive

SVG vs. Canvas

This first criterion means that the choice is really between SVG and Canvas. The former is a true vector format, expressed in XML, and with nodes which can be manipulated via the DOM. The latter is essentially a scriptable bitmap image, which is often more efficient, but manipulation and interactivity aren’t what it’s good at. So which should we use?

When assessing the two technologies we need to consider three classes of browsers. The first are the modern, standards-compliant desktop browsers (Firefox, Chrome, Safari, Opera and hopefully soon IE9). The second include all shipping versions of Internet Explorer. The third group are new-fangled touch-based devices like Apple’s iPhone and iPad.

The first group is the easiest and least interesting: both SVG and canvas just work.

Visitors using IE make up around 38% of our userbase, yet they don’t support either of these technologies. Luckily, they do support Microsoft’s version of SVG, called VML. The excanvas library can be used to emulate the canvas element, and the actual drawing is done in VML. Alternatively, the excellent Raphaël library provides a vector drawing API which will output SVG to browsers that support it, and VML to IE. Take-home message: both can be made to work, but since either will result in VML nodes in IE’s DOM, it’s better to use the method that’ll take full advantage of that, namely SVG.

The touch-based devices provided the knock-out blow I was looking for. When you’re using the browser on your iPhone or iPad you’re generally looking at the page at an arbitrary zoom level. Bitmaps look pretty bad at arbitrary zoom levels, while vector graphics look clean and sharp.

Vector vs. bitmap graphics at arbitrary zoom level

That was rather a long-winded way of saying that SVG is better at drawing vector-y things like graphs.

Charting Frameworks

Having made the decision to use SVG via Raphaël, I took a look at gRaphaël. Sadly, the project seems rather immature, isn’t that well supported (only one commit in the last 9 months), and has no documentation. Since we’re heavy users of jQuery, what I really wanted was a version of the awesome Flot plotting library which could output SVG instead of Canvas.

Nothing like that seemed to exist, so I set about replacing Flot’s drawing code with Raphaël calls. The result I’m calling Raphlot, and it’s available on GitHub under the same MIT license as Flot. Not all of Flot’s functionality has been translated, but enough for it to be useful on Timetric.

I’ve made a start on the interactivity, which you can try on Timetric, but I’ll write about that in a future blog post.

What do you think? Leave your comments below!

More important than the lick of paint, though, is all the new stuff you can do with it! Though it might sound boring, the Dashboard is all about lists. The old Dashboard had only one — a list of series you’ve ‘starred’. We’ve added two others: ”My Series” for series you’ve created yourself and “Recently Viewed” which shows you the last few series you’ve looked at. Soon we’ll let you create your own custom lists too.

Now that you have all those series at your fingertips, you’ll want to compare and analyze them, right? Just select the ones you’re interested in, and click ‘Build’, ‘Overlay’ or ‘Versus’ at the top!

Talking about building… If you’re a developer, you can now build models through our API as well — Toby’ll be blogging about that very soon.

To make this easier, we’ve put a big ‘Share this series‘ button on the pages of all public series, which when clicked will reveal:

The immediate benefits are that you now have access to the code which will give you a sparkline (a common request!), and that either bit of code can be quickly copied to your clipboard using the little button at the side (thanks to Tom Preston-Werner’s Clippy). We don’t plan to stop here though — look out for more advanced features over the coming months!

For some high-profile examples of our graphs in the wild, check out the fascinating Guardian Data Blog:

http://www.guardian.co.uk/news/datablog/2009/mar/01/government-borrowing-economy1

http://www.guardian.co.uk/news/datablog/2009/mar/02/unemployment-and-employment-statistics-economics

Well, we’ve changed all that.

Take employment data as an example:

Search results for "Employment" on Timetric

Two big changes here – firstly, there are sparklines, so you can get a feel for all the data in front of you immediately; secondly, you now get all the relevant tags at the top of the page on every search result, so you can immediately start filtering through the search results to find what you’re interested in. Let’s say that’s the utilities sector.

The stars on the right here, if you’re logged in, immediately save series to your dashboard; they’re gold for each series you’re already watching. But the bigger change is on the left; if you check the series you’re interested in…

Selecting series in Timetric search results

and then hit “Overlay” or “Versus”, which you’ll find at the start and end of the search results page:

you can start making plots straight from search results.

Transportation employment's much more seasonal in Alaska than in Alabama.

You can even get the embed code to put a graph into your blog straight from there:

And that gives us a chance to mention another new feature which a few of you’ve been asking for – if you hover your mouse over the points in this graph, you’ll see each measurement in the scatter plot labelled with the time it comes from.

The big changes to graphing here are actually under the covers, though: after this, we’ll be able to make some really exciting improvements in the near future.

We aim to please, so now we display the title of the series on the vertical axis, and there’s a handy link back to the series on timetric.com.

The only problem is that getting this to work required a couple of changes to the embed codes you paste into your blog. New embeds will get this automatically, but if you’ve got any existing graphs embedded in your site, you’ll need to re-embed them using the new code to see these changes. We’ll continue to support the old style indefinitely, so don’t worry if you don’t feel like updating!

When we launched our private beta, we needed a graphing package quick-smart, so we bought-in a third-party solution to tide us over until we could find time to build our own.

Over the last month or so, we’ve been building a replacement from scratch, the results of which look a little something like:

Average surface temperature anomaly: Global (before smoothing)

For this initial release, the big changes are under the hood. We can now handle significantly larger data sets, up more than 20-fold from around 5000 points to over 100,000! (For the more technically-minded, this is largely due to the switch from interpreted Actionscript 2, to bytecode-compiled Actionscript 3.) We were also able to add a fun new feature: full-screen mode. While sounding rather frivolous, it’s actually surprising useful, especially when there are a lot of data points. To find it, right/ctrl-click on the graph.

Our overlay plots have also seen some attention. The biggest complaint we had for our old version was that when you overlaid series which varied on very different scales, you couldn’t really make anything out. Our new version supports multiple y-axes to make things better. Try click the check-box below!

ECB exchange rates: Euro vs. GBP and ECB exchange rates: Euro vs. USD and ECB exchange rates: Euro vs. JPY

As always, if you have any comments or suggestions, please get in touch!

This morning I pushed a big update to the dashboard page, adding some new functionality, and making it quite a bit prettier.

Overview

The dashboard is the registered user’s entry point to the site, and gives a brief summary of all the nuggets they’ve expressed an interest in.

The summary includes a sparkline for each nugget, which provides a succinct visual summary of the history of the series. We’ve rewritten the sparkline generator from scratch for this update, and as a result is considerably faster, and gives more attractive results.

Analysis

Since the dashboard is the natural place to view collections of nuggets, we’ve added some basic analysis tools. Pairs of nuggets can be selected using the tick boxes down the left-hand edge, and overlaid upon each other, or turned into a “versus”-graph using the buttons at the bottom.

You can also create a new calculated nugget from your selections by clicking the button under “Build a Nugget”.

You can then edit the formula using an Excel-like syntax, and then click “Create”.

Feed Me

Finally, we’ve added a combined news feed for all the nuggets on your dashboard, which you can subscribe to in any news-reader which supports password-protected feeds.

As usual, we’d love to hear your feedback.