Flashy Graphs Sans Flash

Tweet

Recently Alex gave us a solid introduction to the gRaphaël JavaScript graphing library in the Design View newsletter. We figured those of you who aren’t subscribed to the newsletter might enjoy this piece, so we’re publishing it here. And if you happen to get a kick out of it, why not head over to the newsletters section of sitepoint.com and subscribe yourself up for a free monthly dose of designery goodness. Without further ado, here’s Alex’s article.

Why Graph?

Take a quick look at the browser usage statistics below. How long did it take you to build a mental model of what the data was saying?

Table 1. Browser usage statistics

Browser Visitors
Firefox 1,149,422
IE 551,315
Chrome 172,095
Safari 166,565
Opera 53,329
Mozilla 18,060


Five seconds? Ten? Maybe you lost interest and drifted off.

Now compare that with a pie chart of the same information, in Figure 1, “Browser usage pie chart”

Figure 1. Browser usage pie chart

Browser usage pie chart


While it’s by no means impossible to understand the table, most of us can gain a better understanding with a cursory glance at the pie chart.

The State of Play

Okay, so we all agree graphs are groovy, but how do we use them on the Web? Let’s break down your current options.

Images

The most obvious approach is the one I’ve used in the example above: create the graph in a third-party application (for instance, Photoshop, Illustrator, Fireworks, or otherwise) and export an image file to embed in your page.

While this is simple, the downsides are fairly obvious.

Firstly, any new or changed data requires editing and re-uploading of your image. If you’re technically savvy, however, server-side code libraries such as PHP’s GDLibrary allow you to create on-the-fly JPEGs.

Secondly, your data is “baked” into the image file, meaning there’s no easy way to convert your information back into numbers. The image is also permanently locked at one size and resolution. Hardly disastrous, but less than ideal.

Adobe Flash

Interactive graphs and charts have been one of Flash’s great success stories, particularly their ability to mingle seamlessly with standard HTML web content.

Figure 2. Google Analytics makes great use of Flash

Google Analytics makes great use of Flash


Google Analytics is arguably the current world poster boy of dynamic Flash infographics. Dozens of libraries now exist (Inchoo, FusionCharts, and Flash Graph Application, for starters) to make presenting your data with Flash relatively painless.

Although I think data visualization is one of the great applications for Flash, it still inherits some of the baggage associated with Flash. For me, the number one issue is poor mobile browser support, specifically Safari. However, Apple’s position on Flash seems to make change unlikely in the near future.

SVG/Canvas

Arguably, the most exciting new web technology of 2009 was the handful of new vector-powered graphics systems to emerge. Indeed, in the Design View we’ve already covered the Cufon text replacement system and the RaphaelJS drawing library.

Each of these technologies use JavaScript to target standard elements in your page—text and images respectively—and replace them with new and more powerful vector-based equivalents. Cool stuff.

Let me introduce gRaphaël—Raphaël’s little brother. While “Raph” is an all-round vector-drawing guy, gRaphaël sticks to what he does best: drawing slick, animated, web-based graphs without the need for Flash.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

No Reader comments