Alacrify Ltd

CSS3 and Website Statistics Charts

Published on: 28th April 2011
By Alacrify

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.


New Website For Osmington Village Hall

We’re pleased to announce that we have just launched a NEW website for Osmington Village Hall. Osmington Village Hall came to us needing a brand new website as the old one had been taken offline. We built the website from the ground up taking a fresh new approach alongside Osmington Village Hall.

Relaunch Of Weymouth And Portland Info Website

We’re excited to announce that we have relaunched the Weymouth and Portland Information website. The website is an internal project of ours and one that’s needed attention for a while. The main aim of the redesign was to make the website responsive and easier for users to navigate around.

New Website For R-em Therapies

We have just launched a new website for Emma at R-EM Therapies. R-EM Therapies is a new client of Alacrify’s that we’ve thoroughly enjoyed working with. R-EM came to us needing a new website as the old site was starting to show its age. The old site also wasn’t responsive and was also unsecure which negatively impacted the site's search engine rankings as well as being hard for users to access on their mobiles and tablets.

New Website For Ecs Special Projects

We have just launched a new website for ECS Special Projects. This is another website of ours that we originally built many years ago. The old site stood the test of time and still performed very well in Google searches, but the time had come for the look and feel to be updated in line with more contemporary design approaches.