Table of Contents

AV Bar Chart Plugin

Compatible with DokuWiki

  • 2017-02-19 "Frusterick Manners" probably
  • 2016-06-26 "Elenor Of Tsort" probably
  • 2015-08-10 "Detritus" probably
  • 2014-09-29 "Hrun" probably

plugin Generates a simple HTML/CSS bar chart

Last updated on
2013-02-25
Provides
Syntax

Tagged with chart, diagram, images, media

Description

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.

Syntax and Usage

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

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

Configuration Vars:

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

Known Bugs

To Do

Changelog

Source

syntax.php

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 = 25;         //Pixel width of chart bars.
var $barColor = "#ccccff";  //Color of graph bars.
var $fontSize = "8pt;";     //Font size of labels and values.
var $maxPxHeight = "200";   //Maximum height of the chart in pixels.
 
// *********************************************
 
 
    /**
     * return some info
     */
    function getInfo(){
        return array(
            'author' => 'Sherri Wheeler',
            'email'  => 'Use my website: http://syntaxseed.com',
            'date'   => '2013-02-25',
            '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 = "";
            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' style='border:0;vertical-align:bottom;text-align:center;' align='center'><span style='font-size:".$this->fontSize.";'>".$amount."</span><br clear='all' /><table style='display:inline;border:0;' 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' style='border:0;'><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

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

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

Different colors for different bars

You can add the support for this by changing two lines (97 and 102) in your php code. If the color for individual bar is not given, the basic barColor is used instead. Example of usage (Warning this code uses an older version of this plugin.):

<barchart>100|A:55:#FFCCCC,B:5,C:23,D:38</barchart>

Here is changed syntax.php file

syntax.php
<?php
/**
 * Plugin AVBarChart: Generates a very simple CSS/HTML bar chart"
 * 
 * USAGE: <barchart>MAXVAL|Label1:#:Color1,Label2:#:Color2,Label3:#:Color3</barchart>
 *
 * EXAMPLE: <barchart>100|A:55:#FFCCCC,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 = 25;         //Pixel width of chart bars.
var $barColor = "#ccccff";  //Color of graph bars.
var $fontSize = "8pt;";     //Font size of labels and values.
var $maxPxHeight = "200";   //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 = "";
            foreach($values as $col){
              if(!empty($col)){
		list($label, $amount, $color) = 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='".(empty($color) ? $this->barColor: $color)."' 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
?>

~ Gregor Anželj

Modification: New style and small fixes

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:

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