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.