My project during summer 2011 at Quantcast was to design and implement new, interactive traffic charts. Traffic charts are graphs that show detailed user traffic information about a website, which can include the number of unique visitors, page views, or user sessions over a time period. These graphs, along with other graphs on each website’s profile, provide insight about the type of audience the web property attracts.

Quantcast Chart Example

The legacy traffic charts were simply a generated image. Different options could be selected through a series of buttons, but the design left many features out, including the ability to select a custom timeframe.

The primary goal, however, was to make the charts interactive, so that users could view day-by-day traffic statistics. Now, users can select a custom timeframe and scroll through all of the history for each website profile.

Since the new charts were a complete redesign, I had to start from scratch. I spent several weeks with a product manager and a UX designer creating the prototypes for the design. During the design phase, I started planning out how I would implement the chart. Cross-browser compatibility was obviously a factor, but Flash player was ruled out early because it is heavy (resource-wise) and requires users to download a plugin. So naturally, Javascript was used, along with the relatively new Canvas element. Next was the selection of Javascript library, if any. There were several available at the time that looked useful, including RGraph, but all provided much more functionality than necessary. To make the library as small as possible, I decided to implement a basic library myself. In the end, this worked out for the best as the prototype graph’s Javascript was smaller than the RGraph library.