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: AV Bar Chart for Dokuwiki.

<barchart>1000|A:700,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.

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.

Add a hex color code to individual bars like so:

<barchart>1000|A:700:#ff0000,B:50,C:250,D:1000</barchart>

• Plugin Manager: Paste this URL into the Plugin Manager to install AVBarChart automatically: https://github.com/syntaxseed/AVBarChart/archive/master.zip

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

• None.

• Support dokuwiki syntax inside task description.

• 2007-10-19
  • Created plugin.
• 2009-05-15
  • Added URL to zip for automatic installation.
• 2013-02-25
  • Updated layout bugs for latest browsers and version of Dokuwiki.
  • Updated this wiki page to remove redundant comments.
• 2020-02-07
  • Update for PHP v 7+.
  • Move to GitHub repo.
  • Add colored bars support. Contributed by ~ Gregor Anželj

https://github.com/syntaxseed/AVBarChart

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

Simple and elegant plugin. Excellent work!. ~Dmitri

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

It's amazing what effect a few small CSS styles can bring to this bar chart: round corners, a dropshadow and gradient background. Here I post my modified syntax.php, it implements following changes:

• new bar-styles (round corners, a 3d-border, dropshadow, gradient background)
• a new setting “$barPadding” that allows bars to be spaced evenly even when labels have different widths
• better alignment of labels when there is a line-break in the text

Example:

<barchart>325|Google:268:red,Yahoo!<br>Mail:185:blue,GMX:86,Others:152</barchart>

Here is changed syntax.php file (Warning this code uses and older version of this plugin.):

syntax.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://syntaxseed.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 = "25px";     //Pixel width of chart bars.
var $barPadding = "10px";   //Pixel padding on each side (left/right) of a bar.
var $barColor = "#ccccff";  //Color of graph bars.
var $fontSize = "8pt;";     //Font size of labels and values.
var $maxPxHeight = "200px"; //Maximum height of the chart in pixels.
 
// *********************************************
 
 
    /**
     * return some info
     */
    function getInfo(){
        return array(
            'author' => 'Sherri W.',
            'email'  => 'Use my website: http://syntaxseed.com',
            'date'   => '2009-05-15',
            'name'   => 'AV Bar Chart',
            'desc'   => 'Generates a very simple CSS/HTML bar chart.',
            'url'    => 'https://www.dokuwiki.org/plugin:avbarchart',
        );
    }
 
    /**
     * 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 = "";
	    $labels = "";
            foreach($values as $col){
              if(!empty($col)){
		list($label, $amount, $color) = split(":", $col);
                $amount = floatval($amount);
                if(empty($label)){$label='&nbsp;';}
		if(empty($color)){$color=$this->barColor;}
                if($amount >= 0){
                  $height = round(($amount/$maxRange*$this->maxPxHeight));
		  $styleBorder = "border:1px outset ".$color.";-moz-border-radius:5px;-webkit-border-radius:5px;";
		  $styleShadow = "box-shadow:3px 2px 5px #888;-webkit-box-shadow:3px 2px 5px #888;-moz-box-shadow:3px 2px 5px #888;";
		  $styleGradient = "background:-moz-linear-gradient(top,".$color.",#FFFFFF);background:-webkit-gradient(linear,left top,left bottom,from(".$color."),to(#FFFFFF));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='".$color."', EndColorStr='#FFFFFF', GradientType=0);";
                  $chart .= "<td style='vertical-align:bottom;text-align:center'>"
			."<span style='font-size:".$this->fontSize.";'>".$amount."</span><br clear='all'>"
			."<table style='display:inline;padding-left:".$this->barPadding.";padding-right:".$this->barPadding.";' cellpadding=1 cellspacing=0>"
			."<tr>"
			."<td height='".$height."' width='".$this->barWidth."' style='height:".$height.";width:".$this->barWidth.";background-color:".$color.";vertical-align:bottom;".$styleBorder.$styleShadow.$styleGradient."'>&nbsp;</td>"
			."</tr>"
			."</table>"
			."</td>";
		  $labels .= "<td style='vertical-align:top;text-align:center;'><span style='font-size:".$this->fontSize.";'><b>".$label."</b></span></td>";
                }
	       }
             }
            }
 
            $match = $chart;
            return array($state, $match."</tr><tr>".$labels);
 
 
          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
?>

~ Philipp Stacker