DokuWiki Plugin : AV Bar Chart

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

Screenshot and info available here: source.ofitall.com.

<barchart>1000|A:500,B:50,C:250,D:1000</barchart>

• 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, 7 and Firefox 2.0, 3.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.

• Plugin Manager: Paste this URL into the Plugin Manager to install AVBarChart automatically: http://www.source.ofitall.com/devel/avbarchart/plugin-avbarchart.zip
• Manually: To get the plugin to work, manually install the plugin:
  1. Make a new directory avbarchart/ in your plugins directory.
  2. Add the source code below to a file syntax.php in the avbarchart directory.
  3. Edit the config vars in the source code to customize your chart.

// ********* 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.

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

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

• 2009/03/12 - Yohan W (yohan [dot] widyakencana [at] kreators [dot] com)
  • Error Warning: Cannot modify header information - headers already sent by (output started at C:\Program Files\xampp\htdocs\dokuwiki_castor\lib\plugins\avbarchart\syntax.php:157) in C:\Program Files\xampp\htdocs\dokuwiki_castor\inc\actions.php on line 154 when using headings (H1-H5).
  • Not A Bug: Sorry, I've tested it with headings above and below the barchart plugin text and I don't get that error. This problem you're having is something different. Note that you cannot put wiki syntax IN the barchart plugin.~Sherri

2007-10-19

• created plugin.

2009-05-15

• added URL to zip for automatic installation.

<?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'   => '2009-05-15,
            '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
?>

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

This is a nice plugin. Whenever I use this avbarchart plugin, I kept getting an error message IF I'm using headers (H1-H5), stating that headers already been sent bla bla bla… How to solve this? Thanks ~Yohan

• Sorry Yohan I don't know. The PHP error about headers have already been sent shouldn't be related to having headings on your page. ~Sherri
• You using headers (h1-h5) shouldn't have anything to do with that. Probably you left an empty line in the beginning or the end of a .php file you edited (the plugin one?). Remove any of those and you'll be fine. ~ tduarte