Wikka: A Simple HTML-Based Bar Graph

See also:

PageStatsAction

A Simple HTML-Based Bar Graph

This has only been tested on Win 2000 using IE 6 and Firefox 1.0.2.

The previous version of this action assumed the largest specified value was the 100% marker. This behavior has been removed in favor of explicitly setting a "total" value. This way 60% will actually look like 60%!

The Code

The following bar_graph class should be saved as 3rdparty/plugins/bar_graph.php --

<?php

/* Copyright (C) 2005 Denny Shimkoski (denny @ bytebrite DOT com)

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details. */

if (!class_exists('bar_graph'))
{
class bar_graph
{
var $title;
var $total;
var $width;
var $class;
var $values = array();
function bar_graph($title = '', $total = 0, $width = 250, $class = 'bar_graph')
{
$this->title = $title;
$this->total = $total;
$this->width = $width;
$this->class = $class;
}
function add($label, $n, $color = '')
{
$this->values[] = array('label' => $label, 'n' => $n, 'color' => $color);
}
function show($show_numbers = true)
{
if (sizeof($this->values) > 0)
{
$colspan = 2 + $show_numbers;
echo '<table class="' . $this->class . '" cellpadding="6" cellspacing="0" border="0">';
if (!empty($this->title)) echo "\n<tr><th class=\"title\" colspan=\"$colspan\">$this->title</th></tr>";
foreach ($this->values as $value)
{
$total = $this->total;
if (strpos($value['n'], '/')) list($n, $total) = split('/', $value['n']); else $n = $value['n'];
if ($total)
{
$normal = $n / $total;
$percent = round($normal * 100, 2);
$width = ceil($normal * $this->width);
$div_bar = ($percent > 20) ? "$percent%</div>" : "</div> $percent%";
$div_bar = "<div style=\"width:{$width}px;$color\">  " . $div_bar;
}
else
{
$normal = 0;
$div_bar = '0%';
}
$color = !(empty($value['color'])) ? "background-color:{$value[color]}" : '';
$numbers = $show_numbers == true ? "<td class=\"n\" style=\"text-align:right\">$n/$total</td>" : '';
echo "\n<tr><th class=\"var\">{$value[label]}</th>$numbers<td class=\"n\">$div_bar</td></tr>";
}
echo '<tr><td style="height:1px;padding:0;margin:0;" colspan="' . ($colspan - 1) . "\"></td><td style=\"height:1px;padding:0;margin:0;width:{$this->width}px;\"></div></td></tr>";
echo "\n</table>";
}
}
}
}

?>

Save the following code as actions/bargraph.php

<?php
if (isset($vars['title']) && isset($vars['data']))
{
require_once('3rdparty/plugins/bar_graph.php');
$graph = new bar_graph($vars['title']);
if (isset($vars['total'])) $graph->total = $vars['total'];
$data = split(';', $vars['data']);
foreach ($data as $row)
{
$row = split(':', $row);
$color = isset($row[2]) ? $row[2] : '';
$graph->add($row[0], $row[1], $color);
}
$show_numbers = isset($vars['numbers']) && $vars['numbers'] == 'false' ? false : true;
$graph->show($show_numbers);
}

?>

The CSS

.bar_graph {background-color: #eef; border: 1px solid #007; font-size: .9em}
.bar_graph th.title {color:#007; background-color: #ccf; border-style: solid; border-width: 1px; border-color: #eef #007 #007 #eef}
.bar_graph th, .bar_graph td {font-family: verdana, sans-serif; text-align:left;}
.bar_graph th.var {background-color:#ddf;border-style: solid; border-width: 1px; border-color: #fff #aae #aae #fff}
.bar_graph td.n {font-size:10px;background-color:#ddf;border-style: solid; border-width: 1px; border-color: #fff #aae #aae #fff}
.bar_graph td.n div {float:left; text-align:right; color:#333; background-color: #eee; border-style: solid; border-width: 1px; border-color: #fff #003 #003 #fff; padding-right: 5px;}

Feel free to post any alternate styles you come up with.

The Examples

I used the data from InfoHandler to see what it would look like...

{{bargraph title="Page Revisions by User" data="JsnX:124;DarTar:53;JavaWoman:5;WikkaInstaller:1" total="183"}}

{{bargraph title="Page Revisions by User" data="JsnX:124;DarTar:53;JavaWoman:5;WikkaInstaller:1" total="183" show_numbers="false"}}

{{bargraph title="Global Statistics" data="Hits:1/1:#aaf;Revisions:183/10193:#eee;Comments:96/2051:#cfc;Backlinks:50/5549:#fcc;Referrers:34294/67978:#ffc"}}

The Screenshot

Screenshot of the BarGraph action's output

Authors

DennyShimkoski