Graph Bars#

This JSPWiki Style allows to insert graph bars in your wiki pages. Check out the FindPage which shows the search results as horizontal bars. The nice thing about this implementation is that it is completely running client side (js + css); you can specify any color; there is no need for an external .gif.

The first version is included in JSPWiki v2.4.x. The version of Jul 2006 in BrushedTemplate supports numeric and date values, multiple colors, both horizontal and vertical layouts and additional bar types such as progress bars and gauge bars (inspired by IdeaTableDecorators ) --DF, Sep 2005, Jul 2006

Usage#

Default syntax:

  %%graphBars
    %%gBar integer or date value %%  renders first graph bar
    %%gBar integer or date value %%  renders 2nd graph bar
    ...
  %%

Specify extra parameters to define color, size, orientation and type of the graphic bars. Use a dash (-) as separator.

  %%graphBars<name>-min<integer>-max<integer>-<color1>-<color2>-vertical-progress-gauge   
    ... %%gBar<name> value %% ...  
  %%

• name : optional name of the graphBar.
  Using graphbars with names allows you to nest multiple graphBars. When you specify a name, make sure to use that name for the corresponding values. (eg %%graphBarsPlan should match with %%gBarPlan
  When using with tables, you can omit the %%gBar tags and use a column- or row-name of the table. (eg %%graphBarsPlan will generate bars for all table-cells in the Plan column)
• min<integer> : minimum size of the bars in pixel (default min = 20px)
• max<integer> : maximum size of the bars in pixel (default max = 200px)
• <color1> : hexadecimal HTML Color Code, default value is determined by jspwiki.css
• <color2> : hexadecimal HTML Color Code, the use of the 2nd color is determined by the bar-type By default, color2 is used to gradually blend the bar colors from color1 to color2.
• vertical : default = horizontal; vertical or horizontal
• progress : All bars have equal length and 2 colors. The value determines the size of the bars with color1.
• gauge : The bar value determines color gradient between color1 and color2.

Examples#

%%graphBars
* %%gBar 20 %% apples
* %%gBar 40 %% pears
* %%gBar 60 %% bananas
%%

%%graphBars-progress
||Project Planning   ||%%gBar [{CurrentTimePlugin format='dd MMM yyyy' }]%% today 
|Requirement Capture | %%gBar 1 Jan 2006 %% 
|Analyse             | %%gBar 15 Feb 2006 %% 
|Build               | %%gBar 1 Apr 2006 %% 
|Validate            | %%gBar 15 Jun 2006 %% 
%%

%%graphBars-min5-max15
| apples  | %%gBar 20 kg %% 
| bananas | %%gBar 60 kg %%
%%

%%graphBars-fuchsia
| apples  | %%gBar 20 %% 
| pears   | %%gBar 40 %% 
| bananas | %%gBar 60 %%
%%

%%graphBars-ffff00-669900
%%graphBarsW-ffff00-669900-progress-max50
| apple      | %%gBar 20 %% | %%gBarW 20 %% 
| pear       | %%gBar 40 %% | %%gBarW 10 %% 
| banana     | %%gBar 60 %% | %%gBarW  5 %% 
| strawberry | %%gBar 49 %% | %%gBarW  7 %% 
| cherry     | %%gBar 37 %% | %%gBarW 12 %% 
| apple      | %%gBar 120 %%| %%gBarW 13 %% 
| pear       | %%gBar 40 %% | %%gBarW 10 %% 
| banana     | %%gBar 60 %% | %%gBarW 17 %% 
| strawberry | %%gBar 49 %% | %%gBarW  2 %% 
| cherry     | %%gBar 37 %% | %%gBarW 14 %% 
%%
%%

%%graphBars-ffff00-669900
%%graphBarsW-ffff00-669900-progress-max50
| apple      | %%gBar 20 %% | %%gBarW 20 %% 
| pear       | %%gBar 40 %% | %%gBarW 10 %% 
| banana     | %%gBar 60 %% | %%gBarW  5 %% 
| strawberry | %%gBar 49 %% | %%gBarW  7 %% 
| cherry     | %%gBar 37 %% | %%gBarW 12 %% 
%%
%%

%%graphBarsSize-ffff00-669900
%%graphBarsLength-ffff00-669900-progress-max50
||Category   || Size || Length 
| apple      | 20    | 20 
| pear       | 40    | 10 
| banana     | 60    |  5 
| strawberry | 49    |  7 
| cherry     | 37    | 12 
%%
%%

%%graphBarsCost-vertical-min3-max20-progress-lime
%%graphBarsWeight-vertical-red-max60
||Fruit  | apples | pears | bananas | strawberry | cherry       
||Weight | 20     | 40    | 60      | 120        | 49   
||Cost   | 5      | 3     | 7       | 20         |  9   
%%
%%

%%graphBars-vertical
|| apples      || pears       || bananas     || strawberry   || cherry       
| %%gBar 20 %% | %%gBar 40 %% | %%gBar 60 %% | %%gBar 120 %% | %%gBar 49 %%  
%%

%%graphBars-ffff00-669900-vertical
Some text %%gBar 20 %% %%gBar 40 %% %%gBar 120 %% %%gBar 20 %% %%gBar 49 %% and some bars
%%

%%graphBars-ffff00-669900-progress
| apple      | %%gBar 20 %% 
| pear       | %%gBar 40 %% 
| banana     | %%gBar 60 %%
| strawberry | %%gBar 120 %%
| cherry     | %%gBar 49 %%
%%

%%graphBars-ffff00-669900-vertical-progress
|| apples      || pears       || bananas     || strawberry   || cherry       
| %%gBar 20 %% | %%gBar 40 %% | %%gBar 60 %% | %%gBar 120 %% | %%gBar 49 %%  
%%

%%graphBars-red-progress
| apple      | %%gBar 20 %% 
| pear       | %%gBar 40 %% 
| banana     | %%gBar 60 %%
| strawberry | %%gBar 49 %%
| cherry     | %%gBar 37 %%
| apple      | %%gBar 80 %% 
| pear       | %%gBar 90 %% 
| banana     | %%gBar 120 %%
| strawberry | %%gBar 149 %%
| cherry     | %%gBar 137 %%
%%

%%graphBars-ffff00-669900-gauge
| apple      | %%gBar 20 %% 
| pear       | %%gBar 40 %% 
| banana     | %%gBar 60 %%
| strawberry | %%gBar 49 %%
| cherry     | %%gBar 37 %%
%%

%%graphBars-ffff00-669900-vertical-gauge
|| apples      || pears       || bananas     || strawberry   || cherry       
| %%gBar 20 %% | %%gBar 40 %% | %%gBar 60 %% | %%gBar 120 %% | %%gBar 49 %%  
%%

%%graphBars-red-gauge
| apple      | %%gBar 20 %% 
| pear       | %%gBar 40 %% 
| banana     | %%gBar 60 %%
| strawberry | %%gBar 49 %%
| cherry     | %%gBar 37 %%
| apple      | %%gBar 80 %% 
| pear       | %%gBar 90 %% 
| banana     | %%gBar 120 %%
| strawberry | %%gBar 149 %%
| cherry     | %%gBar 137 %%
%%