Browse by...
Home Resources Blog

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 to 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.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free