plugin:avbarchart
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
plugin:avbarchart [2015-09-12 20:27] – Aleksandr | plugin:avbarchart [2022-09-23 16:39] (current) – Make code example reflect the values used in the image johng | ||
---|---|---|---|
Line 2: | Line 2: | ||
---- plugin ---- | ---- plugin ---- | ||
- | description: | + | description: |
- | author | + | author |
- | email : (use my website to contact me) | + | email : Twitter @SyntaxSeed or http:// |
type : syntax | type : syntax | ||
- | lastupdate : 2013-02-25 | + | lastupdate : 2022-08-08 |
- | compatible : rc2007-05-24+, 2012-10-13+ | + | compatible : 2018-04-22b+, 2020-07-29+, 2022-07-31+ |
depends | depends | ||
conflicts | conflicts | ||
similar | similar | ||
tags : media, images, diagram, chart | tags : media, images, diagram, chart | ||
- | + | downloadurl: | |
- | downloadurl: | + | bugtracker : https:// |
- | bugtracker : | + | sourcerepo : https:// |
- | sourcerepo : | + | |
donationurl: | donationurl: | ||
+ | |||
+ | |||
+ | screenshot_img: | ||
---- | ---- | ||
Line 23: | Line 25: | ||
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. | 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/project/avbarchart/|AV Bar Chart for Dokuwiki]]. | + | Screenshot and info available here: [[https://github.com/syntaxseed/ |
===== Syntax and Usage ===== | ===== Syntax and Usage ===== | ||
- | {{http://syntaxseed.com/assets/ | + | |
+ | {{https://raw.githubusercontent.com/syntaxseed/avbarchart/ | ||
< | < | ||
- | < | + | < |
</ | </ | ||
* The first value is the max number that your data set will go to. | * The first value is the max number that your data set will go to. | ||
Line 37: | Line 40: | ||
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. | 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. | ||
+ | |||
+ | |||
+ | ==== Colored Bars ==== | ||
+ | |||
+ | Add a hex color code to individual bars like so: | ||
+ | |||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | |||
===== Installation ===== | ===== Installation ===== | ||
- | * Plugin Manager: Paste this URL into the Plugin Manager to install AVBarChart automatically: | + | * Plugin Manager: Paste this URL into the Plugin Manager to install AVBarChart automatically: |
- | * Manually: To get the plugin to work, manually install the plugin: | + | |
- | - Make a new directory '' | + | |
- | - Add the source code below to a file '' | + | |
- | - Edit the config vars in the source code to customize your chart. | + | |
===== Configuration Vars: ===== | ===== Configuration Vars: ===== | ||
+ | |||
< | < | ||
// ********* CHART CONFIG SETTINGS ************* | // ********* CHART CONFIG SETTINGS ************* | ||
Line 59: | Line 70: | ||
If your barWidth is not wider than the labels, your chart will look funny. | If your barWidth is not wider than the labels, your chart will look funny. | ||
- | Different colors for different bars is not supported currently. | + | |
+ | |||
+ | ===== Source ===== | ||
+ | |||
+ | https:// | ||
+ | |||
+ | |||
+ | ==== Contributing ==== | ||
+ | |||
+ | Please submit a PR to the GitHub repo. | ||
Line 65: | Line 85: | ||
* None. | * None. | ||
+ | |||
===== To Do ===== | ===== To Do ===== | ||
- | * Support dokuwiki syntax inside task description. | + | * Nicer style of bars. |
+ | * Use divs instead of table. | ||
===== Changelog ===== | ===== Changelog ===== | ||
Line 79: | Line 102: | ||
* Updated layout bugs for latest browsers and version of Dokuwiki. | * Updated layout bugs for latest browsers and version of Dokuwiki. | ||
* Updated this wiki page to remove redundant comments. | * Updated this wiki page to remove redundant comments. | ||
- | + | | |
- | ===== Source ===== | + | * Update for PHP v 7+. |
- | + | * Move to GitHub repo. | |
- | + | * Add colored | |
- | + | * ** 2022-08-08** | |
- | ==== syntax.php ==== | + | * Test on 2022-07-31 "Igor". |
- | <code php syntax.php> | + | * Test and fix for PHP 8.1. |
- | <?php | + | |
- | /** | + | |
- | * Plugin AVBarChart: Generates a very simple CSS/HTML bar chart" | + | |
- | * | + | |
- | * USAGE: < | + | |
- | * | + | |
- | * EXAMPLE: < | + | |
- | * | + | |
- | * @license | + | |
- | * @author | + | |
- | */ | + | |
- | + | ||
- | if(!defined(' | + | |
- | if(!defined(' | + | |
- | require_once(DOKU_PLUGIN.' | + | |
- | + | ||
- | /** | + | |
- | * All DokuWiki plugins to extend the parser/ | + | |
- | * need to inherit from this class | + | |
- | */ | + | |
- | class syntax_plugin_avbarchart extends DokuWiki_Syntax_Plugin { | + | |
- | + | ||
- | + | ||
- | // ********* CHART CONFIG SETTINGS ************* | + | |
- | + | ||
- | var $barWidth = 25; // | + | |
- | var $barColor = "# | + | |
- | var $fontSize = " | + | |
- | var $maxPxHeight = " | + | |
- | + | ||
- | // ********************************************* | + | |
- | + | ||
- | + | ||
- | /** | + | |
- | * return some info | + | |
- | */ | + | |
- | function getInfo(){ | + | |
- | return array( | + | |
- | ' | + | |
- | ' | + | |
- | ' | + | |
- | ' | + | |
- | ' | + | |
- | ' | + | |
- | ); | + | |
- | } | + | |
- | + | ||
- | /** | + | |
- | * What kind of syntax are we? | + | |
- | */ | + | |
- | | + | |
- | return ' | + | |
- | } | + | |
- | + | ||
- | /** | + | |
- | * Where to sort in? | + | |
- | */ | + | |
- | function getSort(){ | + | |
- | return 999; | + | |
- | } | + | |
- | + | ||
- | + | ||
- | /** | + | |
- | * Connect pattern to lexer | + | |
- | */ | + | |
- | function connectTo($mode) { | + | |
- | $this->Lexer-> | + | |
- | } | + | |
- | + | ||
- | function postConnect() { | + | |
- | $this-> | + | |
- | } | + | |
- | + | ||
- | + | ||
- | /** | + | |
- | * Handle the match | + | |
- | */ | + | |
- | function handle($match, | + | |
- | switch ($state) { | + | |
- | case DOKU_LEXER_ENTER : | + | |
- | return array($state, | + | |
- | case DOKU_LEXER_MATCHED : | + | |
- | break; | + | |
- | case DOKU_LEXER_UNMATCHED : | + | |
- | + | ||
- | $chart = "" | + | |
- | list($maxRange, | + | |
- | $maxRange = floatval($maxRange); | + | |
- | + | ||
- | if($maxRange > 0 && !empty($data1)){ | + | |
- | + | ||
- | $values = split(",", | + | |
- | + | ||
- | $chart = ""; | + | |
- | foreach($values as $col){ | + | |
- | if(!empty($col)){ | + | |
- | list($label, | + | |
- | $amount = floatval($amount); | + | |
- | if(empty($label)){$label='& | + | |
- | if($amount >= 0){ | + | |
- | $height = round(($amount/ | + | |
- | $chart | + | |
- | } | + | |
- | } | + | |
- | } | + | |
- | + | ||
- | } | + | |
- | + | ||
- | $match = $chart; | + | |
- | return array($state, | + | |
- | + | ||
- | + | ||
- | case DOKU_LEXER_EXIT : | + | |
- | return array($state, | + | |
- | case DOKU_LEXER_SPECIAL : | + | |
- | break; | + | |
- | } | + | |
- | return array(); | + | |
- | | + | |
- | + | ||
- | + | ||
- | /** | + | |
- | * Create output | + | |
- | */ | + | |
- | function render($mode, | + | |
- | if($mode == ' | + | |
- | list($state, | + | |
- | + | ||
- | switch ($state) { | + | |
- | case DOKU_LEXER_ENTER : | + | |
- | $renderer-> | + | |
- | break; | + | |
- | + | ||
- | case DOKU_LEXER_MATCHED : | + | |
- | break; | + | |
- | + | ||
- | case DOKU_LEXER_UNMATCHED : | + | |
- | + | ||
- | $renderer-> | + | |
- | + | ||
- | case DOKU_LEXER_EXIT : | + | |
- | $renderer-> | + | |
- | break; | + | |
- | + | ||
- | case DOKU_LEXER_SPECIAL : | + | |
- | break; | + | |
- | } | + | |
- | return true; | + | |
- | } | + | |
- | | + | |
- | } | + | |
- | + | ||
- | + | ||
- | } // End class | + | |
- | + | ||
- | </ | + | |
- | + | ||
- | + | ||
===== Comments / Discussion ===== | ===== Comments / Discussion ===== | ||
Line 252: | Line 116: | ||
Simple and elegant plugin. Excellent work!. ~Dmitri | 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! | ||
- | |||
- | 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 | ||
- | * Sorry Yohan I don't know. The PHP error about headers have already been sent shouldn' | ||
- | * You using headers (h1-h5) shouldn' | ||
- | |||
- | ==== 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 and older version of this plugin.)**: | ||
- | |||
- | < | ||
- | < | ||
- | </ | ||
- | |||
- | Here is changed **syntax.php** file | ||
- | |||
- | <code php syntax.php> | ||
- | <?php | ||
- | /** | ||
- | * Plugin AVBarChart: Generates a very simple CSS/HTML bar chart" | ||
- | | ||
- | * USAGE: < | ||
- | * | ||
- | * EXAMPLE: < | ||
- | * | ||
- | * @license | ||
- | * @author | ||
- | */ | ||
- | |||
- | if(!defined(' | ||
- | if(!defined(' | ||
- | require_once(DOKU_PLUGIN.' | ||
- | |||
- | /** | ||
- | * All DokuWiki plugins to extend the parser/ | ||
- | * need to inherit from this class | ||
- | */ | ||
- | class syntax_plugin_avbarchart extends DokuWiki_Syntax_Plugin { | ||
- | |||
- | |||
- | // ********* CHART CONFIG SETTINGS ************* | ||
- | |||
- | var $barWidth = 25; // | ||
- | var $barColor = "# | ||
- | var $fontSize = " | ||
- | var $maxPxHeight = " | ||
- | |||
- | // ********************************************* | ||
- | |||
- | |||
- | /** | ||
- | * return some info | ||
- | */ | ||
- | function getInfo(){ | ||
- | return array( | ||
- | ' | ||
- | ' | ||
- | ' | ||
- | ' | ||
- | ' | ||
- | ' | ||
- | ); | ||
- | } | ||
- | |||
- | /** | ||
- | * What kind of syntax are we? | ||
- | */ | ||
- | function getType(){ | ||
- | return ' | ||
- | } | ||
- | |||
- | /** | ||
- | * Where to sort in? | ||
- | | ||
- | function getSort(){ | ||
- | return 999; | ||
- | } | ||
- | |||
- | |||
- | /** | ||
- | * Connect pattern to lexer | ||
- | */ | ||
- | function connectTo($mode) { | ||
- | $this-> | ||
- | } | ||
- | |||
- | function postConnect() { | ||
- | $this-> | ||
- | } | ||
- | |||
- | |||
- | /** | ||
- | * Handle the match | ||
- | */ | ||
- | function handle($match, | ||
- | switch ($state) { | ||
- | case DOKU_LEXER_ENTER : | ||
- | return array($state, | ||
- | case DOKU_LEXER_MATCHED : | ||
- | break; | ||
- | case DOKU_LEXER_UNMATCHED : | ||
- | |||
- | $chart = ""; | ||
- | list($maxRange, | ||
- | $maxRange = floatval($maxRange); | ||
- | | ||
- | if($maxRange > 0 && !empty($data1)){ | ||
- | |||
- | $values = split(",", | ||
- | |||
- | $chart = ""; | ||
- | foreach($values as $col){ | ||
- | if(!empty($col)){ | ||
- | list($label, | ||
- | $amount = floatval($amount); | ||
- | if(empty($label)){$label='& | ||
- | if($amount >= 0){ | ||
- | $height = round(($amount/ | ||
- | $chart .= "< | ||
- | } | ||
- | } | ||
- | } | ||
- | |||
- | } | ||
- | |||
- | $match = $chart; | ||
- | return array($state, | ||
- | |||
- | |||
- | case DOKU_LEXER_EXIT : | ||
- | return array($state, | ||
- | case DOKU_LEXER_SPECIAL : | ||
- | break; | ||
- | } | ||
- | return array(); | ||
- | } | ||
- | |||
- | |||
- | /** | ||
- | * Create output | ||
- | */ | ||
- | function render($mode, | ||
- | if($mode == ' | ||
- | list($state, | ||
- | | ||
- | switch ($state) { | ||
- | case DOKU_LEXER_ENTER : | ||
- | $renderer-> | ||
- | break; | ||
- | |||
- | case DOKU_LEXER_MATCHED : | ||
- | break; | ||
- | |||
- | case DOKU_LEXER_UNMATCHED : | ||
- | |||
- | $renderer-> | ||
- | |||
- | case DOKU_LEXER_EXIT : | ||
- | $renderer-> | ||
- | break; | ||
- | |||
- | case DOKU_LEXER_SPECIAL : | ||
- | break; | ||
- | } | ||
- | return true; | ||
- | } | ||
- | | ||
- | } | ||
- | |||
- | |||
- | } // End class | ||
- | ?> | ||
- | </ | ||
- | |||
- | ~ Gregor Anželj | ||
- | |||
- | ==== Modification: | ||
- | 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 " | ||
- | * better alignment of labels when there is a line-break in the text | ||
- | |||
- | Example: | ||
- | |||
- | < | ||
- | < | ||
- | </ | ||
- | |||
- | Here is changed **syntax.php** file **(Warning this code uses and older version of this plugin.)**: | ||
- | |||
- | <code php syntax.php> | ||
- | <?php | ||
- | /** | ||
- | * Plugin AVBarChart: Generates a very simple CSS/HTML bar chart" | ||
- | | ||
- | * USAGE: < | ||
- | * | ||
- | * EXAMPLE: < | ||
- | * | ||
- | * @license | ||
- | * @author | ||
- | */ | ||
- | |||
- | if(!defined(' | ||
- | if(!defined(' | ||
- | require_once(DOKU_PLUGIN.' | ||
- | |||
- | /** | ||
- | * All DokuWiki plugins to extend the parser/ | ||
- | * need to inherit from this class | ||
- | */ | ||
- | class syntax_plugin_avbarchart extends DokuWiki_Syntax_Plugin { | ||
- | |||
- | |||
- | // ********* CHART CONFIG SETTINGS ************* | ||
- | |||
- | var $barWidth = " | ||
- | var $barPadding = " | ||
- | var $barColor = "# | ||
- | var $fontSize = " | ||
- | var $maxPxHeight = " | ||
- | |||
- | // ********************************************* | ||
- | |||
- | |||
- | /** | ||
- | * return some info | ||
- | */ | ||
- | function getInfo(){ | ||
- | return array( | ||
- | ' | ||
- | ' | ||
- | ' | ||
- | ' | ||
- | ' | ||
- | ' | ||
- | ); | ||
- | } | ||
- | |||
- | /** | ||
- | * What kind of syntax are we? | ||
- | */ | ||
- | function getType(){ | ||
- | return ' | ||
- | } | ||
- | |||
- | /** | ||
- | * Where to sort in? | ||
- | | ||
- | function getSort(){ | ||
- | return 999; | ||
- | } | ||
- | |||
- | |||
- | /** | ||
- | * Connect pattern to lexer | ||
- | */ | ||
- | function connectTo($mode) { | ||
- | $this-> | ||
- | } | ||
- | |||
- | function postConnect() { | ||
- | $this-> | ||
- | } | ||
- | |||
- | |||
- | /** | ||
- | * Handle the match | ||
- | */ | ||
- | function handle($match, | ||
- | switch ($state) { | ||
- | case DOKU_LEXER_ENTER : | ||
- | return array($state, | ||
- | case DOKU_LEXER_MATCHED : | ||
- | break; | ||
- | case DOKU_LEXER_UNMATCHED : | ||
- | |||
- | $chart = ""; | ||
- | list($maxRange, | ||
- | $maxRange = floatval($maxRange); | ||
- | | ||
- | if($maxRange > 0 && !empty($data1)){ | ||
- | |||
- | $values = split(",", | ||
- | |||
- | $chart = ""; | ||
- | $labels = ""; | ||
- | foreach($values as $col){ | ||
- | if(!empty($col)){ | ||
- | list($label, | ||
- | $amount = floatval($amount); | ||
- | if(empty($label)){$label='& | ||
- | if(empty($color)){$color=$this-> | ||
- | if($amount >= 0){ | ||
- | $height = round(($amount/ | ||
- | $styleBorder = " | ||
- | $styleShadow = " | ||
- | $styleGradient = " | ||
- | $chart .= "< | ||
- | ."< | ||
- | ."< | ||
- | ."< | ||
- | ."< | ||
- | ."</ | ||
- | ."</ | ||
- | ."</ | ||
- | $labels .= "< | ||
- | } | ||
- | } | ||
- | } | ||
- | } | ||
- | |||
- | $match = $chart; | ||
- | return array($state, | ||
- | |||
- | |||
- | case DOKU_LEXER_EXIT : | ||
- | return array($state, | ||
- | case DOKU_LEXER_SPECIAL : | ||
- | break; | ||
- | } | ||
- | return array(); | ||
- | } | ||
- | |||
- | |||
- | /** | ||
- | * Create output | ||
- | */ | ||
- | function render($mode, | ||
- | if($mode == ' | ||
- | list($state, | ||
- | | ||
- | switch ($state) { | ||
- | case DOKU_LEXER_ENTER : | ||
- | $renderer-> | ||
- | break; | ||
- | |||
- | case DOKU_LEXER_MATCHED : | ||
- | break; | ||
- | |||
- | case DOKU_LEXER_UNMATCHED : | ||
- | |||
- | $renderer-> | ||
- | |||
- | case DOKU_LEXER_EXIT : | ||
- | $renderer-> | ||
- | break; | ||
- | |||
- | case DOKU_LEXER_SPECIAL : | ||
- | break; | ||
- | } | ||
- | return true; | ||
- | } | ||
- | | ||
- | } | ||
- | |||
- | } // End class | ||
- | ?> | ||
- | </ | ||
- | |||
- | ~ Philipp Stacker |
plugin/avbarchart.1442082432.txt.gz · Last modified: 2015-09-12 20:27 by Aleksandr