Simple HTML chart

One of our readers recently observed that we don’t seem to be using any images to draw our barcharts and wondered how it was done.

We use a custom-written HTML chart generator, written in PHP and designed to be run as a CLI script. For instance, plotting the current browser market share figures:

is done by simply running the script on the command line:

php simplechart.php -d "Firefox=33.7|IE5=1.5|IE6=38.1|IE7=19.2|Mozilla=1.3|Opera=1.6|Safari=1.5" -t "Browser market share: May 2007" -u "%" -c "royalblue|limegreen|gold|crimson"

This will create the following output, which you can simply copy and paste into your website page content:

<div id="simplechart">
<table>
<caption>Browser market share: May 2007</caption>
<tr><td class="key first">Firefox:</td><td class="value first"><div class="bar" style="background: royalblue; width: 75%">&nbsp;</div><div class="figure">33.7%</div></td></tr>
<tr><td class="key">IE5:</td><td class="value"><div class="bar" style="background: limegreen; width: 3%">&nbsp;</div><div class="figure">1.5%</div></td></tr>
<tr><td class="key">IE6:</td><td class="value"><div class="bar" style="background: gold; width: 85%">&nbsp;</div><div class="figure">38.1%</div></td></tr>
<tr><td class="key">IE7:</td><td class="value"><div class="bar" style="background: crimson; width: 42%">&nbsp;</div><div class="figure">19.2%</div></td></tr>
<tr><td class="key">Mozilla:</td><td class="value"><div class="bar" style="background: royalblue; width: 2%">&nbsp;</div><div class="figure">1.3%</div></td></tr>
<tr><td class="key">Opera:</td><td class="value"><div class="bar" style="background: limegreen; width: 3%">&nbsp;</div><div class="figure">1.6%</div></td></tr>
<tr><td class="key last">Safari:</td><td class="value last"><div class="bar" style="background: gold; width: 3%">&nbsp;</div><div class="figure">1.5%</div></td></tr>
</table>
</div>

The script accepts up to four arguments which dictate the output:

• -d: data values, delimited by a pipe (|) character and the key/value pairs assigned with an equals (=) character.
• -t: optional chart title.
• -u: optional unit of measure.
• -c: optional colour values, delimited by a pipe (|) character.

The CSS declaration required (which should be placed in a separate file) is included in the source code archive.

Posted in CSS, HTML, PHP, Tips by Ivan