>>**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)
<?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>&nbsp;$percent%";
						$div_bar = "<div style=\"width:{$width}px;$color\">&nbsp; " . $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)
<?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====

%%(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====

{{image alt="Screenshot of the BarGraph action's output" url="http://bytebrite.com/img/bg2ss.gif"}}

====Authors====

DennyShimkoski

----
CategoryUserContributions