• being able to change the colours of lines on our graphs;
• being able to set custom labels for lines on legends.

Today’s a good day for all of those people! Our new graph-creation wizard — which appears any time you click an embed button to get a graph to share — lets you do both of these things, and quite a lot of other new things besides. It looks like this:

click for full size

giving you graphs which look like this — this one’s browser-adoption curves for all the versions of Chrome:

Internet browser market share, (%) by version from Timetric

As well as setting colours and series titles, you can now:

• choose how each series in the chart is shown – as a line, as a colour-filled area (like above), or as bars
• set the height and width of the graph
• toggle markers on or off (or leave it to Timetric to decide)
• set whether you want the graph to be updated when new data comes in

We’re looking forward to seeing how people use these. The bar charts, in particular, look great, particularly when you combine multiple styles on one chart:

Digital Natives Youth and Internet from Timetric

Drop us a note in the comments if you need a hand. (And if you’d like to lend one instead, we’re hiring, and we’d love to hear from you!)

Up until now, to view Timetric graphs in blogs like this one and on news sites, you’ve had to have Flash installed. Most desktop computers do, and some phones as well (including Toby‘s Nexus One), but the iPhone and iPad in particular don’t support it.

Well, if the plugin won’t come to the tablet…

Thanks to Dan, this now works. (Excuse the slightly iffy photo: I plead iPhone 3.)

You can see plenty of these in action over on Byline, our economics blog, but if you want to get your own, here’s how.

When you click the “embed” button to share a graph on Timetric, a dialogue pops up:

Above the box with the embed code in, you’ll see “New!” in red. Click “switch” on the end of that line, and you’ll see the new embed code – use that one and your graph will work on the latest shiny tablets as well as in every browser back to IE6.

We’ll be making this the default way of embedding graphs soon, so try it out and let us know if it works for you. If it doesn’t, leave a comment or get in touch.

By the way: if you’re a data geek or a designer/UX specialist who likes graphs, or you know someone is, we’re hiring. Get in touch soon – we’re looking forward to hearing from you!

Get up-to-date graphs and data on your website in five minutes. Or your money back. ^*

1. Find a subject you’re interested in.

Timetric has over a million statistics from sources including the World Bank, the European Union’s Eurostat, the European Central Bank, the St. Louis Fed, the UK’s Office of National Statistics, Amazon, and many others. We have quite a bit of data: around 1.1 million indicators at time of writing…

Start by;

• picking a subject you’re interested in from our list of topics
• looking at the data we’ve got from one of our sources, or
• doing a search from our front page.

2. Pick the data you’re interested and add it to the graph.

Filtering through the dataset is really easy: just search, then tick any data you want to see in the graph. Want to take it out again? Untick it.

3. Tweak the graph and grab the embed code.

Right now, you can change the size of the graph or the line thickness. (We’re adding more options here soon). Once you’ve finished tweaking, grab the embed code and paste it into your site or blog, just like you would with a Youtube movie.

4. Not done yet? Let us help.

Email us at help@timetric.com, catch us on Twitter, or leave a comment! We’d be glad to help you out.

(*) timetric.com is free to use. Find us and we’ll buy you a drink, though.

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!

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!