Differences

This shows you the differences between two versions of the page.

--- plugin:avbarchart [2010-11-15 19:52] – Updated project WebPage ~SW 72.38.239.190
+++ plugin:avbarchart [2022-09-23 16:39] (current) – Make code example reflect the values used in the image johng
@@ Line 1: / Line 1: @@
-====== DokuWiki Plugin : AV Bar Chart ======
+====== AV Bar Chart Plugin ======
 ---- plugin ----
-description: Generates a simple HTML/CSS bar chart.
+description: Generates a simple HTML/CSS bar chart. Supports colored bars.
-author     : Sherri W. (http://SyntaxSeed.com)
+author     : Sherri Wheeler
-email      : (use my website to contact me)
+email      : Twitter @SyntaxSeed or http://SyntaxSeed.com
 type       : syntax
-lastupdate : 2009-05-15
+lastupdate : 2022-08-08
-compatible : rc2007-05-24 +
+compatible : 2018-04-22b+, 2020-07-29+, 2022-07-31+
 depends    :
 conflicts  :
 similar    :
 tags       : media, images, diagram, chart
+downloadurl: https://github.com/syntaxseed/avbarchart/archive/master.zip
-downloadurl: http://syntaxseed.com/downloads/plugin-avbarchart.zip
+bugtracker : https://github.com/syntaxseed/avbarchart/issues
-bugtracker :
+sourcerepo : https://github.com/syntaxseed/avbarchart
-sourcerepo :
 donationurl:
+screenshot_img: https://raw.githubusercontent.com/syntaxseed/avbarchart/master/example.png
 ----
 ===== 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: [[http://syntaxseed.com/downloads/plugin-avbarchart.zip|AV Bar Chart for Dokuwiki]].
+Screenshot and info available here: [[https://github.com/syntaxseed/avbarchart]].
 ===== Syntax and Usage =====
-{{http://syntaxseed.com/assets/screenshots/avbarchart.png?nolink}}
+{{https://raw.githubusercontent.com/syntaxseed/avbarchart/master/example.png?nolink}}
 <code>
 <barchart>1000|A:500,B:50,C:250,D:1000</barchart>
@@ Line 34: / Line 38: @@
   * 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.
-===== Installation =====
-  * Plugin Manager: Paste this URL into the Plugin Manager to install AVBarChart automatically: [[http://syntaxseed.com/downloads/plugin-avbarchart.zip]]
+==== Colored Bars ====
-  * Manually: To get the plugin to work, manually install the plugin:
-    - Make a new directory ''avbarchart/'' in your plugins directory.
+Add a hex color code to individual bars like so:
-    - 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 *************
+<barchart>1000|A:500:#ff0000,B:50,C:250,D:1000</barchart>
-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.
+===== Installation =====
-===== Known Bugs =====
+  * Plugin Manager: Paste this URL into the Plugin Manager to install AVBarChart automatically: [[https://github.com/syntaxseed/avbarchart/archive/master.zip]]
-  * 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
-===== To Do =====
+===== Configuration Vars: =====
-===== Changelog =====
+<code>
-** 2007-10-19 **
-  * created plugin.
-** 2009-05-15 **
-  * added URL to zip for automatic installation.
-===== 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://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 *************
@@ Line 113: / Line 67: @@
 // *********************************************
+</code>
+If your barWidth is not wider than the labels, your chart will look funny.
-    /**
-     * return some info
-     */
+===== Source =====
-    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 = "";
+https://github.com/syntaxseed/avbarchart
-            list($maxRange,$data1) = split("\|", $match);
-            $maxRange = floatval($maxRange);
-            if($maxRange > 0 && !empty($data1)){
-            $values = split(",", $data1);
-            $chart = "";
+==== Contributing ====
-            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>";
-                }
-			  }
-            }
-            }
+Please submit a PR to the GitHub repo.
-            $match = $chart;
-            return array($state, $match);
+===== Known Bugs =====
-          case DOKU_LEXER_EXIT :
+  * None.
-            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>
+===== To Do =====
+  * Nicer style of bars.
+  * Use divs instead of table.
+===== Changelog =====
+  * ** 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
+  * ** 2022-08-08**
+    * Test on 2022-07-31 "Igor".
+    * Test and fix for PHP 8.1.
 ===== Comments / Discussion =====
@@ Line 251: / Line 116: @@
 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
-==== 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:
-<code>
-<barchart>100|A:55:#FFCCCC,B:5,C:23,D:38</barchart>
-</code>
-Here is changed **syntax.php** file
-<code 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://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 = 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'    => 'http://wiki.splitbrain.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, $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
-?>
-</code>
-~ 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:
-  * 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:
-<code>
-<barchart>325|Google:268:red,Yahoo!<br>Mail:185:blue,GMX:86,Others:152</barchart>
-</code>
-Here is changed **syntax.php** file
-<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 = "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: www.start.ofitall.com',
-            'date'   => '2009-05-15',
-            'name'   => 'AV Bar Chart',
-            'desc'   => 'Generates a very simple CSS/HTML bar chart.',
-            'url'    => 'http://wiki.splitbrain.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 = "";
-	    $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
-?>
-</code>
-~ Philipp Stacker