Using HTML 5 to Make the Analytics Charts

What happened when you attempted to access the old analytics on an iPhone

What happened when you attempted to access the old analytics on an iPhone.

When we decided to redesign and update our analytics, one of the first things we looked at was updating our charts. Our old charts were Flash-based and as such didn’t work on iPhones or iPads and tended to load a little slow. We wanted to fix that with this release.

I started by looking a wide range of options. The number of options for charts is staggering. In the end, we decided to implement a mixture of Flot for the daily line charts you see at the top of most pages, CSS for our bar charts, and Google Charts for our maps. Let’s see how we specifically implemented each of these.

Flot Charts

The first chart you see on almost all of the screens is a day-by-day breakdown of some important metric related to that screen. For example, the summary page gives you the number of shares along with the number of clicks, while the services page gives you your top two services along with a composite for all of the others. At a glance, it tells you how you are doing over time. Flot makes it incredibly easy. We start by outputting a JavaScript object that contains all the data we will use to draw the chart. We then call Flot and have it create our chart, an HTML Canvas element. Then we add in tooltips for each of our days.

Something just looks missing when looking at the old analytics on an iPhone

Something just looks missing when looking at the old analytics on an iPhone

CSS Charts

All of the bar charts you see are pure CSS. This includes the services chart so you can visually see how different services compare, the Audience chart so you can see the interest breakdown of your audience, and the audience comparison chart so you can see how your audience compares. How it works is that each bar is a span that we assign the display property to block and then each specific bar has a width property assigned inline.

For the comparison charts where you can see both positive and negative numbers, we are actually using two floated spans. The negative span floats to the right, while the positive span floats to the left. By putting these side by side, you can easily see where you are beating the norm, and where you can improve.

The new analytics on an iPhone.  Just as beautiful as on a desktop browser.

The new analytics on an iPhone. Just as beautiful as on a desktop browser.

Google Charts API

The final piece of our chart puzzle was solved by using Google Charts. Google Charts provides an easy to use api that we were able to take advantage of to place world maps that show you quickly how you are doing around the world. The chart wizard allowed us to quickly prototype how we wanted the charts to look and once we were happy with it, we added in real data in a very simple way.

Conclusion

All in all, our charts went from being a clunky, heavy, flash-based monstrosity to being light weight and flexible. If you have any questions about our charts, specifics as to how we did things or ideas to improve them, please comment below.

  • http://www.fusioncharts.com Sanket Nadhani

    I am from FusionCharts and my understanding is that you were using our charts for all your reporting. We have come out with a JavaScript fallback specifically to combat the iPad/iPhone issue – more info at http://www.fusioncharts.com/ipad

    Basically on devices that support Flash, the good-looking Flash charts will be displayed and on iPads/iPhones, the JavaScript fallback will automatically be displayed.

    Might consider switching again :)

  • http://jeffwongdesign.com jeffwongdesign

    @Sanket Nadhani, Thanks for checking in. I’ll pass the word on to our developers. As you sated, the original reason why we had to switch was because we wanted to reach our iPad and iPhone users. Cheers!

  • http://aaron.jorb.in Aaron Jorbin

    Thanks for stopping by Sanket. While we did check out your implementation of HighCharts, we found that our site loaded with less resources by doing a strictly javascript solution and also allowed the experience to be much more consistent between browser and mobile. The fact that Flot is both free as an beer and free as in speech helped. Next time we evaluate the offerings out there, we will make sure to check out FusionCharts again.

  • Matt

    Its my understanding that Google Charting API renders in Flash. Is that not the case? Per googles doco “the visualizations are exposed on the page in a variety of different formats: for example: static HTML, GIF image, or a Flash movie. Some visualizations let you choose the format, but most don’t”. Is it just the case that the maps visualizations dont render in flash or were you able to specify the output?

    Thanks,
    Matt

  • http://aaron.jorb.in Aaron Jorbin

    Hi Matt,
    Google has two different charting libraries. The first is the flash based one that you mentioned. There is also the separate Google Chart Tools / Image Charts API which only returns png images, which is what we used for the maps.

  • japan style

    Magnificent goods from you, man. I’ve understand your stuff previous to and you’re just extremely wonderful. I actually like what you have acquired here, really like what you are saying and the way in which you say it. You make it entertaining and you still take care of to keep it wise. I cant wait to read much more from you. This is really a tremendous site.