Blog

Say goodbye to Flash with our all new charts

June 10, 2010

For the last 18 months we've used Flash for all the charting within Campaign Monitor. When we were testing out the best approach to this, the Flash-based option really was the best solution for creating great looking, reasonably complex charts. But while the charts looked first-rate, the delay while the chart loaded, the size of the SWF file and the reliance on a third party plugin was something I was never comfortable with.

When it became clear that the iPad wouldn't be supporting Flash, and that it was likely a device many of our customers were going to view reports on, we had all the motivation we needed to overhaul our charts to work around the problems mentioned above. At the same time, JavaScript based charts that take advantage of standards like canvas and SVG had come a long way and would likely make the transition a much simpler process.

The new charts in action

If you're short on time, I wanted to show off a quick demonstration of the new charts and how they look on a device like the iPad. If you're interested, read on for a more detailed story about the process.

As well as a much snappier experience, we've also added touch detection to our charts, allowing you tun run your finger over each chart and get the same result as a mouse hover.

How we built them

Instead of starting the process from scratch, it made more sense to build on top of an existing JavaScript charting library. We wanted to get an experience on par with the current charts, and also fix some of the UI quirks and limitations of the Flash component we'd been using. In the end we settled on either the Highcharts or Raphaël libraries. Both of these have their strengths, but we eventually opted for Highcharts because it was already fairly close in functionality to our existing charts.

The beautiful thing about moving to a JavaScript based solution is that, unlike the closed Flash component, we had complete control over every bit of the charts. This meant we could easily add features we felt were missing from the default charts and offer a really nice experience for you and your clients. Here are some of the more interesting extras we added to the base library:

Adding touch support

Each chart has a nice tooltip for each data point that shows the specific results for that point in time. This works great using a mouse, but we wanted to get the same effect using touch on devices like the iPad. Enter the ontouchmove and ontouchstart events (more on them here), which act just like standard browser events like onclick.

{title}

Adding these events made it easy to run your finger over the charts and get the same result as a mouse hover on the desktop.

Persistent tooltips

The original Highcharts library required you to mouse over a specific point to show the tooltip. We thought this was a bit fiddly, especially on the smaller charts, so we tweaked it to display the tooltip no matter where the mouse was on the chart, making it easy drill down to exact numbers.

{title}

Better preloading

We have quite a few customers sending very large campaigns through Campaign Monitor, and some of the charts are crunching some pretty serious numbers. Because of this, some charts might take a couple of seconds to load the first time.

While we're always working on improving these speeds, we now show a nice little animation while the numbers are being crunched. Here it is in action:

{title}

Once the data is loaded and indexed, it will load almost instantly on return, but we feel this was nicer than a big white hole in the page before the chart was shown.

The results

As well as being able to work in a stack of UI improvements over the previous approach, these new charts are much snappier, work in all browsers and provide a great experience for anyone using them on a touch based device like the iPad. We hope you like them.

Posted in: New Features & Updates

34 Comments

Fred Carlsen
June 10, 2010 8:16am

Feels good!
Mike Bowzeylo
June 10, 2010 12:20pm

Beautiful. Works fantastic…and as Fred says “Feels good” on my iPad. Nice job guys.
Ron Stauffer, Jr
June 10, 2010 12:46pm

Wow—you’re the first ones that I’ve seen who finally figured out the on-hover challenge for touch-screens! Excellent job.

Now I can show these reports to my clients on my iPad. Looks impressive for me, and makes money for you! Very exciting.
Andy Croll
June 10, 2010 1:56pm

Really nice work, particularly on a solution to the touch device issue.
Gregor
June 10, 2010 11:25pm

wow - your post came just in time! Today was the day I wanted to get rid of our flash charts. Thanks a lot for both, the post & the timing!
Nickolas Simard
June 10, 2010 11:51pm

Great job guys!
It’s always nice to see some teams working on there products in order to follow the technical limitations the market is currently having or heading toward… I can say that all iPad users will be overjoyed by that news!
Brad
June 11, 2010 1:11am

Love you guys.
Les Reynolds
June 11, 2010 1:22am

Wondering if you caught the irony that the video in this post is embedded using Flash :)
Andrew Begin
June 11, 2010 5:23am

ZingChart renders in both HTML5 and Flash… have you checked it out?

http://www.zingchart.com/flash-and-html5-canvas

(transparency: I’m on the ZingChart team… if you say hi @zingchart on twitter or email us, you’ll get me. I’ll share some cool demos.)
Björn
June 11, 2010 9:18am

really nice solution to the hover-issue for touchscreens. Thanks for posting this!
G24
June 14, 2010 7:59am

A worthwhile improvement. Everything works really well on iPad. Nice work!
Magento Extensions
June 14, 2010 1:29pm

I’ve been looking at, and testing, several JS charting libraries and came to a similar conclusion as you. I too settled on HighChart. Once of the primary features I needed was the ability to select a range on a chart and zoom to that data set.
B
June 15, 2010 12:51am

@Les Reynolds Still viewable on iPad though :)

Youtube/Vimeo need to hurry up with their HTML5 betas; then release an embeddable HTML5 version ... It’s looking good though - Vimeo was alway’s quite stable, but Youtube’s wasn’t. Their new version of their HTML5 beta is a lot lot better.
Andrew Cornett
June 17, 2010 4:49am

Very, very cool guys!
Sam
June 23, 2010 11:39am

Could you release the source on how you enabled the tooltips to show when hovering over the entire chart, not just the individual data points? I’ve been trying for days without any luck
Annabel
June 30, 2010 1:16am

Awesome! I have your iPhone app already, but this looks much more robust. Increasingly, I am looking at iPhone/iPad compatibility as a criterion for any product. Kudos for being well ahead of the curve.
studio1c
June 30, 2010 1:20am

Love that you are steering clear of Flash. So many people don’t understand it’s not user-friendly in so many ways. It is ironic that I had to download the Flash Player plug-in to watch the YouTube video however! lol
Nicolas LE CAM
June 30, 2010 1:27am

Yay !!
dave
June 30, 2010 1:32am

really the loading size was an issues? those charts could be published in 20k or less your js library probably takes that long, you were also worried about dependency of a 3rd party plug in that has a 99% adoption rate, I call BS. if flash was the best solution 18 months ago why is this the best solution now was javascript around then? really.
justin
June 30, 2010 1:33am

Excellent. I’ve been aching to use my iPad exclusively to monitor results. This is why I love CM and steer all my clients your way.
mike
June 30, 2010 1:46am

who’s the band?
Joan
June 30, 2010 1:49am

say goodbye flash!
J. Nunn
June 30, 2010 1:59am

Agree with @gregor, such great timing. We use the Campaign Monitor API to craft stats on our own site, and previously used AM Charts. I’ve been after a good Javascript solution, and this post came just in time.

We use Campaign Monitor because not only are they great, but they are a rare breed who actually tell you how they do what they do. From a developer’s point-of-view, this is invaluable.

Thanks guys—excellent work as usual.
Satya Narayan
June 30, 2010 2:04am

Its really good. I’ve also not appreciated flash based charts. Need to move to a similar solution soon. Thanks.
DanielaB
June 30, 2010 2:54am

oh well - here goes my checking the charts and stats on my Blackberry… oh well… and fyi ... I don’t know too many people who have iPad right now…
Matthew Dutremble
June 30, 2010 7:28am

What song is that playing?
Todd Day
June 30, 2010 8:53am

SWEEEEEEEET!
Coop
June 30, 2010 9:08am

I totally agree with Dave…

“really the loading size was an issues? those charts could be published in 20k or less your js library probably takes that long, you were also worried about dependency of a 3rd party plug in that has a 99% adoption rate, I call BS. if flash was the best solution 18 months ago why is this the best solution now was javascript around then? really. ”
Chris
June 30, 2010 9:08am

Video played fine on my iPad, so it isn’t Flash. Nice work, CM.
Michael @latteperday
June 30, 2010 10:49am

That rocks!

Fingers crossed Google analytics overhaul their side of things too ; )
David Greiner
June 30, 2010 12:31pm

Thanks for all the great comments guys.

@Mike, that’s an Aussie band called Hungry Kids Of Hungary. The song is called “Wristwatch”, and you can download it free here.

@Dave, a quick retort:

“Really the loading size was an issues? Those charts could be published in 20k or less your js library probably takes that long”

The Flash charting library we used was over 50kb, not to mention the fact that a library like this loaded slowly for many customers due to the poor performance of Flash in OS X. The JavaScript approach is much faster to download and actually display for all browsers.

“You were also worried about dependency of a 3rd party plug in that has a 99% adoption rate, I call BS.”

First off, Adobe’s own statistics on Flash’s market penetration only count “PCs”, which ignores the entire sort of devices that motivated this change. Our server logs show plenty of customers looking at our reports using an iPad, iPhone or Android device, none of which support Flash. No BS here my friend.

“If flash was the best solution 18 months ago why is this the best solution now was javascript around then? Really.”

The main device were talking about here, the iPad *wasn’t* out 18 months ago. On top of that, JavaScript charting libraries were nowhere near as mature as their Flash counterparts. We make a big effort to not only think about hat works for customers now, but what’s going to work for them in the future. Flash is not the future for charting.
Brett
June 30, 2010 3:20pm

Hi,

I like your google analytics style line formatting, any chance of grabbing the css for your chart styling?
Ryan Heneise
July 2, 2010 12:13am

We’re using Highcharts too, and love it. Great move! +1 on Sam’s request for how you made the popover tooltips. Or maybe you could roll that back into the Highcharts project. Well done - I am very impressed overall.
malford
August 7, 2010 11:03am

Highcharts doesn’t seem to support Android (I’m using 1.5) :-(
Anybody know a chart library that works for Android browser?

Got anything to add?

Browse the Blog

Explore the Email Gallery

Single-click testing

See screenshots of your email in 20+ email clients and check against spam filters.
CSS support in email

Designing for email can be tricky. Save your sanity with our complete CSS guide.
Create a free account

Sign up, kick the tires and start sending in less than 60 seconds.