Sep 13, 2011

Boingy HTML5 Charts

If you’ve been browsing the web on an iPhone or iPad, you’re probably used to seeing, well – not seeing a few things. That’s because Apple intentionally left out support for Flash on their mobile devices. Their reasoning for this omission was that many of the new standards that web browsers currently support provide much, if not all of the same functionality that Flash does without the need for a third-party plugin.

These new standards, often referred to as HTML5, are indeed the future of the web. They provide new markup and rules that specify how browsers should store data, play media files and present content. All of these changes promise to help make the old, static HTML of yesteryear more friendly for living, breathing web applications (like MailChimp) that we’ve been building for the web.

That all might sound like rainbows and unicorns, but some things are were much easier to do in Flash. Building an animated, data-driven charting library was one of those things. In fact, up until this week’s release, most of the pie, line and bar charts seen in the MailChimp application were displayed in Flash using the versatile amCharts library.

Earlier this year, amCharts released an entirely new JavaScript/HTML5 library that offered much of the same functionality without the need for Flash. The UX Team set up a little demo, duplicating a couple of our existing Flash charts with the new Javascript/HTML5 library. When Ben saw that they even animated in, his response echoed our own sentiments, "Boingy, iPhone friendly charts. Hallelujah!"

In the v6.3 release, we only replaced the List Growth chart that shows up on the list dashboard and the Performance Overview chart on the main Reports page. Here’s what the List Growth chart looked like before:

List Growth Chart Before (Flash)

…and after:

List Growth Chart After

As you can see, aside from making them a little taller, we were mainly trying to replicate the old charts. You might have noticed those checkboxes next to the legend items though. Checking and unchecking these boxes actually redraws the chart with the selected data. Also, if you click and drag to the left or right, you can zoom in on a set of columns:

List Growth Chart (Selecting Section)

So, if you wanted to see just the new subscribers from December to June in the chart above, you can do that:

List Growth Chart Segment

Since the new charts are customizable with JavaScript, we can do lots of fun, interactive tricks like this. Also, since they’re generated as SVG, they scale as you resize the browser window and print exactly as they appear on the page.

Assuming all goes well with these new HTML5 charts, we’ll be replacing the rest of the old Flash charts in the application over the coming weeks. It’s just a tiny change for the desktop experience, but a giant (boingy) leap forward for mobile. Hallelujah!