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:
| Firefox: | 33.7% |
| IE5: | 1.5% |
| IE6: | 38.1% |
| IE7: | 19.2% |
| Mozilla: | 1.3% |
| Opera: | 1.6% |
| Safari: | 1.5% |
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%"> </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%"> </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%"> </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%"> </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%"> </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%"> </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%"> </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.
Due to the large volume of spam, comments are disabled. If you have anything relevant to say, you can leave a comment via Twitter, or contact me directly.
About the author
I'm Ivan Lutrov and I'm the owner of Lutrov Interactive. I have 25 years of experience producing interactive work and I create cost effective business websites that are simple, engaging and easy to use. I practice what I preach and I say what I really think, even if it's sometimes not what you want to hear. Subscribe to the Lutrov Interactive feed via RSS and follow me on Twitter.