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
Comments
Comment by DarTar
2005-08-09 15:29:31
Denny - see InfoHandler for something that might take advantage of a BarGraph class.
Comment by GmBowen
2005-08-10 22:15:02
Could we have some licensing/authorship info posted about this file & its origins? Or even in the file? If I wanted to use this code for something else, currently I'd be quite hesitant to. thanks.
Comment by GmBowen
2005-08-11 23:13:49
Thanks Denny. I'm contemplating writing a "poll" tool from scratch & could use this to show the results.
Comment by DennyShimkoski
2005-08-12 18:27:28
That's a wonderful idea, Mike. I'm thinking of making a more sophisticated version of this in flash. Time will tell... :)
Comment by GmBowen
2005-08-12 20:24:12
Ssssshhhhh. Don't say "flash" around here. Many people don't like it (mostly cuz of accessability issues). There actually is a flash-based polling tool that I think is adaptable to flash (with built in graphing) but I've not worked at integrating it cuz of how flash is viewed here. There is a poll tool in comawiki (another fork) that is easily adaptable to work in wikka, but it has that weird licensing which means you can't distribute it.
Comment by gw.bas.roche.com
2005-08-24 10:25:41
why you d'ont ask the author of the poll :)

i'm shur i give you the permission if you ask me ;)

regards
costal
Comment by gw.bas.roche.com
2005-08-24 12:29:28
but i must admit that the code is realy realy horrible, so you d'ont really want it :)
Comment by gw.bas.roche.com
2005-08-24 12:31:02
something other, i'ts not a good idea to let not logged in users delete their comments. i am @work now and we have a proxy, so 7000 peoples with the same host-/ipadress... so everyone here in roche can now delete my comments...

best regards
costal
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki