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