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.
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
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
ontouchstart events (more on them here), which act just like standard browser events like
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.
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.
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:
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.
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.