Generating HTML / CSS bar charts for WordPress
It started after a client’s web developer and I had a chat about their dashboard. The whole thing was a bit of a mess and we were chatting about how to rebuild it so it would work in any browser. Server side technology was the obvious solution and we threw around a few ideas. Eventually he settled on dynamically generating images.
A few days later I returned to the discussion we’d had and decided to see if I could create my own solution. Specifically I wondered if I could create a plugin for WordPress that would allow me to populate bar charts as and when I wanted.
The paper design
My starting point was to decide what bits of the bar chart went where. Paper and pencil came in useful as I drew out a chart and started partitioning it into rough divs that I could use later as I started building the design up.
Once I had the design sketched out I reached for the code.
Then comes the HTML
Fingers hit keyboard and I cut some basic HTML that put the framework down. Everything I needed was on the page, so now it was a case of tweaking it. Methodically I worked through the code, adding and tweaking CSS until everything was in place.
Worth noting at this point I realised there were going to be some constraints. The biggest one is the bar chart can’t be more than a dozen bars wide because anything more than that and it all gets rather messy. For my purposes that seemed perfectly fine.
So two-and-a-bit hours in I have an HTML / CSS bar chart that’s responsive and configurable.
Ah, PHP, come to me
I decided against just diving into the PHP and start hacking code together. Instead I spent a half hour looking over the design and working out the best way of doing it. I had a few options, but remember I’m aiming for something I can configure on the fly and throw into WordPress.
To make sure I didn’t miss anything I turned to my trusty Trello boards and built up some user stories. Even for small gigs like this I like to put some discipline behind my work.
Systematically I worked through the solution until I had a PHP script that took input, checked it was the right input, then generated HTML code that matched to my CSS.
And finally a plugin
My last task was to knit the whole thing together into a plugin for WordPress. I constructed the shortcode format and attributes, then built a pre-processing function. The plugin calls the pre-processor to interpret the shortcode, but the main function can be called independently if the need arises.
What I can now do is include a snippet of code within my blog posts with a handful of variables and have it generate a bar chart for me. There’s no need to create images separately as the code is generated each time the page is loaded. A small change in data can be reflected by changing a couple of variables and nothing more. With each implementation I can also modify the styling fairly easily as it just means updating a stylesheet.
The following examples are generated in HTML / CSS using the plugin.
The annual sales performance
Breakdown for the month
Breakdown for the week
What did I learn?
There’s a few things that came out of this exercise. The first is there’s usually more than one way to solve a problem, which is driven by what’s available. Then there’s the pure design exercise of putting together an HTML / CSS bar chart and the coding exercise of being able to update it using PHP.
And of course I now have another tool in the kitbag for when it’s time to build a prototype or dashboard for a client quickly.