15 09/2010Damien Buckley New PropellerMail (non-Flash) Charts

Flash has previously been used for all the charting within PropellerMail. 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.

When it became clear that the iPad (and iPhone/iPod Touch) wouldn’t be supporting Flash, and that it was likely a device many of our customers were going to view reports on, we overhauled our charts to work around these problems. 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 beautiful thing about moving to a JavaScript based solution is that, unlike the closed Flash component, this provided 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.

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.

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 charts required you to mouse over a specific point to show the tooltip, a bit 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.

Chart

Better preloading

LoadingWe have quite a few customers sending very large campaigns 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.

Once the data is loaded and indexed, it will load almost instantly on return, but this is 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 (User Interface) 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.

Like this? Share it!

Recent Projects

  • The 'New' Stradbroke Island Beach Hotel Website

    Stradbroke Island Beach Hotel

    We dont often share single website launches but in this instance there is a degree of history behind it which speaks to a return on investment not normally associated with websites.

  • Brown Brothers Engineers New Zealand

    Brown Brothers Engineers New Zealand

    December 2013 saw the launch of a new Brown Brothers Engineers Australia website. October 2014 sees the turn of New Zealand parent company Brown Brothers Engineers.

  • RedFest 2014

    RedFest

    Read about Propeller’s 2014 responsive reboot of the RedFest website.

  • Into Harmony Health Services

    Into Harmony Health Services

    Into Harmony Health Services are located in Bayside, Brisbane. Melanie Young has been passionate about health and wellness for over 30 years. Following a substantial period of rehabilitation following a car accident and surviving cancer in her late twenties, Melanie has dedicated years of personal development and training to assisting other people with their health challenges.

Get The Latest!

Subscribe to our free e-newsletter for our latest news and offers - direct to your inbox.