W3Counter 4.0: HTML & CSS Bar Charts

I was at an early Christmas party with family most of the day so only accomplished one thing: bar charts. I’d like to finish this first report screen before moving on, as a lot of what I write will be reused, and it desperately needed a graph of some sort.

W3Counter 12.24.2006 Dashboard By Day

I went with the bar chart, as the original W3Counter provided for its daily overview. The current version uses a line chart that I’ve come to find doesn’t convey the trends as well as simple bars.

Rather than generate an image with the GD library, or using a Flash chart (which would mean paying royalties on every copy sold as all the decent-looking Flash chart components are commercial), I wrote an HTML-and-CSS chart class inspired by Feedburner’s subscriber count charts. You can see the results in the screenshots.

W3Counter 12.24.2006 Dashboard By Month

I tried to keep it flexible enough to be reused should I want to somewhere else (it takes width and height as parameters, and every bar has a set of properties including label, value, text to show in the bar, an array of options that get transformed into properties of the HTML tag representing the bar for adding classes or styles, etc).

I’m going to refactor the code a bit to clean up the rough spots and possibly share the class here should anyone else want to use it.

My next step will be refactoring the code for this screen since it’s become a bit messy changing the arrangement a few times and adding the chart. After that I’ll be putting together the tracking javascript so I can start collecting live data to use developing the rest of the reports.

Posted on December 24, 2006 in Programming, W3Counter

More from this category

  • Brendon Kozlowski

    Although I am a little curious as to why you decided not to use Ming (other than the complexity problem with it, there’s probably some code libraries or functions out there), I would be interested in this class. I think it’d be extremely useful.

  • Dan

    Although I am a little curious as to why you decided not to use Ming (other than the complexity problem with it, there’s probably some code libraries or functions out there), I would be interested in this class. I think it’d be extremely useful.

    The purpose of using Flash charts in W3Counter was to offload the image processing work to the browser instead of the server. When you have hundreds of people trying to view reports at the same time, the CPU time adds up. Going to Ming means putting the work back on the server, except the output is Flash instead of an image. Building an HTML bar graph costs almost nothing above ordering the data it contains which would be done no matter what method is used.

    That justification is less valid for a downloadable version of W3Counter serving only one or a handful of websites, but it would add a dependency that limits potential users. I’d have to bundle Ming with W3Counter somehow to use Flash, or require GD to generate graphical charts. As it is now, using only HTML or pre-compiled Flash chart components, I can offer a version of W3Counter that doesn’t require GD or Ming if the user doesn’t want graphical counters.