Alacrify Ltd

CSS3 and Website Statistics Charts


28th April 2011

CSS3 and Website Statistics Charts

The best methods for presenting site stats depend completely on working out what the client needs.

This month we've been working on a method for showing aggregated stats from a client's Clicky account and finding a simple way render a complex set of statistics as a coherent and easy to understand chart.

Planning the Website Stats Reports

The first stage was to get a clear idea of our client's needs. In this case it was for a monthly summary of visits, totalled by week, for various page types on the site.

This simple statement took a long process of discussion to get clear and focused. We needed to look at what was a sensible length of time to report on; whether to report by day, month or week; whether to sum all pages or sets of pages; and how frequently to run the stats queries.

Once these parameters were set we could look to the code to interrogate the Clicky API, optimising it so it ran quickly and efficiently without timing out.

Once the data was stored we could then build the database queries to create the monthly results for charting.

Finally we created the charts shown below, utilising the styling possibilities of CSS3 to give texture and depth to the bars and text in the chart and make it easy to read and interpret.

Example of the Website Visitor Statistics Chart


This example demonstrates the sort of month-to-view, weekly totalled, page visits to a particular set of pages (in this case "regions") , with each week given an alternate gradient background, and presenting the total visits as a number on the top of each bar.

The chart also has a "tooltip" or "popup" box that appears when you hover on the number which then explains in detail what the data point means; e.g. 125 page visits during the week of 1-6 March 2011.

This combination of useful data with clear presentation really enriches the site's reporting capability. The charts therefore become a key performance indicator [KPI] for the client to use to monitor the efficacy of their work and the performance of their website. The reports efficiently digest complex and disperate information into a meaningful and visual report on performance.

Previous News Post