See also:

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>&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
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


CategoryUserContributions
There are 8 comments on this page. [Show comments]
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki