====== Dokuwiki Plugin : AV Bar Chart ======

---- plugin ----
description: Generates a simple HTML/CSS bar chart.
author     : Sherri W. (http://www.start.ofitall.com)
email      : (use my website to contact me)
type       : syntax
lastupdate : 2007-10-19
compatible : rc2007-05-24
depends    : 
conflicts  : 
similar    : 
tags       : chart, charts, graph, graphs, graphing, barchart, CSS
----

^ Updated ^ 2007-10-19 ^

===== Description =====
With this plugin you can create a quick and easy bar chart on your docuwiki page. It uses CSS and HTML only and no images needed. 

Screenshot and info available here: [[http://www.source.ofitall.com/devel/avbarchart/index.php|source.ofitall.com]].



===== Syntax and Usage =====
{{http://www.source.ofitall.com/devel/avbarchart/avbarchart.gif?nolink}}
<code>
<barchart>1000|A:500,B:50,C:250,D:1000</barchart>
</code>
  * The first value is the max number that your data set will go to.
  * After the | you have a comma separated list of labels and values to be graphed.
  * In the source of the plugin are config vars that let you customize the size, color and font of your chart.
  * Tested in IE 6 and Firefox 2.0.

You can then use regular DokuWiki syntax to put a title above it and if needed, a legend below to describe the labels. If you make the bars wide, the labels can be full text.

===== Installation =====
To get the plugin to work, manually install the plugin (I haven't made a tar ball for the installer, sorry):
  - Make a new directory ''avbarchart/'' in your plugins directory.
  - Add the source code below to a file ''syntax.php'' in the avbarchart directory.
  - Edit the config vars in the source code to customize your chart.

===== Configuration Vars: =====
<code>
// ********* CHART CONFIG SETTINGS *************

var $barWidth = 20;         //Pixel width of chart bars.
var $barColor = "#ccccff";  //Color of graph bars.
var $fontSize = "8pt;";     //Font size of labels and values.
var $maxPxHeight = "100";   //Maximum height of the chart in pixels.

// *********************************************
</code>

If your barWidth is not wider than the labels, your chart will look funny.
Different colors for different bars is not supported currently.


===== Known Bugs =====
  * None so far.

===== To Do =====


===== Changelog =====
==== 2007-10-19 ====
  * created plugin.

===== Source =====



==== syntax.php ====
<code php>
<?php
/**
 * Plugin AVBarChart: Generates a very simple CSS/HTML bar chart"
 * 
 * USAGE: <barchart>MAXVAL|Label1:#,Label2:#,Label3:#</barchart>
 *
 * EXAMPLE: <barchart>100|A:55,B:5,C:23,D:38</barchart>
 *
 * @license    GPL 2 (http://www.gnu.org/licenses/gpl.html)
 * @author     Sherri W. (http://www.start.ofitall.com)
 */
 
if(!defined('DOKU_INC')) define('DOKU_INC',realpath(dirname(__FILE__).'/../../').'/');
if(!defined('DOKU_PLUGIN')) define('DOKU_PLUGIN',DOKU_INC.'lib/plugins/');
require_once(DOKU_PLUGIN.'syntax.php');
 
/**
 * All DokuWiki plugins to extend the parser/rendering mechanism
 * need to inherit from this class
 */
class syntax_plugin_avbarchart extends DokuWiki_Syntax_Plugin {
 

// ********* CHART CONFIG SETTINGS *************

var $barWidth = 20;         //Pixel width of chart bars.
var $barColor = "#ccccff";  //Color of graph bars.
var $fontSize = "8pt;";     //Font size of labels and values.
var $maxPxHeight = "100";   //Maximum height of the chart in pixels.

// *********************************************


    /**
     * return some info
     */
    function getInfo(){
        return array(
            'author' => 'Sherri W.',
            'email'  => 'Use my website: www.start.ofitall.com',
            'date'   => '2007-10-19',
            'name'   => 'AV Bar Chart',
            'desc'   => 'Generates a very simple CSS/HTML bar chart.',
            'url'    => 'http://www.dokuwiki.org/wiki:plugins',
        );
    }
 
    /**
     * What kind of syntax are we?
     */
    function getType(){
        return 'substition';
    } 
 
    /**
     * Where to sort in?
     */ 
    function getSort(){
        return 999;
    }
 
 
    /**
     * Connect pattern to lexer
     */
    function connectTo($mode) {
      $this->Lexer->addEntryPattern('\<barchart\>',$mode,'plugin_avbarchart');
    }
 
    function postConnect() {
      $this->Lexer->addExitPattern('\</barchart\>','plugin_avbarchart');
    }
 
 
    /**
     * Handle the match
     */
    function handle($match, $state, $pos, &$handler){
        switch ($state) {
          case DOKU_LEXER_ENTER : 
            return array($state, '');
          case DOKU_LEXER_MATCHED :
            break;
          case DOKU_LEXER_UNMATCHED :

            $chart = "";
            list($maxRange,$data1) = split("\|", $match);
            $maxRange = floatval($maxRange);
            
            if($maxRange > 0 && !empty($data1)){

            $values = split(",", $data1);

            $chart = "";
            foreach($values as $col){
              if(!empty($col)){
		list($label, $amount) = split(":", $col);
                $amount = floatval($amount);
                if(empty($label)){$label='&nbsp;';}
                if($amount >= 0){
                  $height = round(($amount/$maxRange*$this->maxPxHeight));
                  $chart .= "<td valign='bottom' align='center'><span style='font-size:".$this->fontSize.";'>".$amount."</span><br clear='all'><table style='display:inline;' cellpadding='1' cellspacing='0'><tr><td height='".$height."' width='".$this->barWidth."' bgcolor='".$this->barColor."' valign='bottom'></td></tr></table><br clear='all' /><span style='font-size:".$this->fontSize.";'><b>".$label."</b></span></td>";
                }
			  }
            }

            }

            $match = $chart;
            return array($state, $match);


          case DOKU_LEXER_EXIT :
            return array($state, '');
          case DOKU_LEXER_SPECIAL :
            break;
        }
        return array();
    }
 

    /**
     * Create output
     */
    function render($mode, &$renderer, $data) {
      if($mode == 'xhtml'){
        list($state, $match) = $data;
          
        switch ($state) {
          case DOKU_LEXER_ENTER : 
            $renderer->doc .= "<table border='0' cellspacing='2'><tr>"; 
            break;

          case DOKU_LEXER_MATCHED :
            break;

          case DOKU_LEXER_UNMATCHED :

            $renderer->doc .= $match; break;          

          case DOKU_LEXER_EXIT :
            $renderer->doc .= "</tr></table>"; 
            break;

          case DOKU_LEXER_SPECIAL :
            break;
        }
        return true; 
      }
   return false;
}
 

} // End class
?>
</code>






===== Comments / Discussion =====

Hi everyone, let me know what you think.  ~Sherri

Simple and elegant plugin. Excellent work!. ~Dmitri

I liked it, too. But what I miss is a simple plugin for Gantt charts. This plugin could be the  one if horizontal bars and different start points were allowed. Thanks!  ~TJPP