the collected interests of
Ross A Hall

Generating HTML / CSS bar charts for WordPress

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.

The parts of a Bar Chart, used in my WordPress plugin

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.

A Trello card showing the user story and simple success criteria

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

Annual Sales Performance.
Revenue (£,000s)
25
12.5
0
January
February
March
April
May
June
July
August
September
October
November
December
Month
Value
Score
January
£ 24 K
February
£ 10 K
March
£ 21 K
April
£ 4 K
May
£ 15 K
June
£ 20 K
July
£ 19 K
August
£ 17 K
September
£ 15 K
October
£ 20 K
November
£ 23 K
December
£ 25 K

Breakdown for the month

This Month's Sales Performance.
Revenue (£,000s)
15
7.5
0
1st-7th
8th-14th
15th-21st
21st-28th
Week
Value
Score
1st-7th
£ 8 K
8th-14th
£ 11 K
15th-21st
£ 3 K
21st-28th
£ 5 K

Breakdown for the week

This Week's Sales Performance.
Revenue (£,000s)
12
6
0
8th
9th
10th
11th
12th
13th
14th
Date
Value
Score
8th
£ 1 K
9th
£ 3 K
10th
£ 5 K
11th
£ 11 K
12th
£ 2 K
13th
£ 1 K
14th
£ 3 K

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.

About Ross A Hall

I'm a freelance business analyst and consultant. When I'm not helping companies grow their sales and profits I take photos and write short stories.

You can read more about me and my work on LinkedIn.

Follow me on social media...
twitter
googleplus
linkedin
© Ross A Hall & Dalmeny Close Ltd. All Rights Reserved.
This site is owned and operated by my service company, Dalmeny Close Ltd.
Dalmeny Close Ltd is registered in England. Company Number: 07550233.
Registered Address: 20-22 Wenlock Road, London, N1 7GU, United Kingdom.
I use cookies to help run this site. Accept Cookies