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 colour; 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#

Default#

Here is a default case, without parameters.

Numbers (integers or floats ) inside a bullet list.

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

Date & Time

%%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 %% 
%%
becomes
Project Planning 23 Jun 2017 today
Requirement Capture 1 Jan 2006
Analyse 15 Feb 2006
Build 1 Apr 2006
Validate 15 Jun 2006

Bar Lengths#

You can specify bar lengths with prefix min and max. The values you specifiy determine the number of pixels for the shortest and the tallest graph-bar.
%%graphBars-min5-max15
| apples  | %%gBar 20 kg %% 
| bananas | %%gBar 60 kg %%
%%
becomes
apples 20 kg
bananas 60 kg

Bar Colors#

You can use HTML hexadecimal Color codes or HTML Color Name.

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

You can specify 2 colors. Each bar will be colored differently, gradually moving from color1 to color2

%%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 %% 
%%
%%
becomes
apple 20 20
pear 40 10
banana 60 5
strawberry 49 7
cherry 37 12
apple 120 13
pear 40 10
banana 60 17
strawberry 49 2
cherry 37 37

Named Bars#

Named bars allow you to specify different graphbar styles in a single page section or table

Example 1: nested named graph-bars

%%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 %% 
%%
%%
becomes
apple 20 20
pear 40 10
banana 60 5
strawberry 49 7
cherry 37 12

Example 2: named graphbars in tables

When using bars inside a table, you can omit the gBar tags around each value. The graphBar will automatically detect which column or row it should work on.

%%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 
%%
%%
becomes
Category Size Length
apple 20 20
pear 40 10
banana 60 5
strawberry 49 7
cherry 37 12

With vertical bars (row based table)

%%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   
%%
%%

becomes

Fruit apples pears bananas strawberry cherry
Weight 20 40 60 120 49
Cost 5 3 7 20 9

Vertical Bars#

Vertical bars are typically used inside tables; although inline vertical bars are possible too.

You can get vertical layout with normal bars, progress bars and gauge bars.

Tables with vertical bars

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

becomes

apples pears bananas strawberry cherry
20 40 60 120 49

Inline Vertical bars ( may not be vey useful )

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

becomes

Some text 20 40 120 20 49 and some bars

Progress Bar#

Progress bars have equal lengths and consist of 2 colors.

Horizontal (default) progress bar

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

Vertical Progress Bar

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

becomes

apples pears bananas strawberry cherry
20 40 60 120 49

Invert colors If you don't specify color2, the invert of 'color1' will be taken,

%%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 %%
%%
becomes
Fruit Turn-over
apple 20
pear 40
banana 60
strawberry 49
cherry 37
apple 80
pear 90
banana 120
strawberry 149
cherry 137

Gauge Bars#

The color of the bar varies depending on the value of the bar.

Horizontal (default) gauge bar

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

Vertical gauge bar

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

becomes

apples pears bananas strawberry cherry
20 40 60 120 49

Invert colors If you don't specify color2, the invert of 'color1' will be taken,

%%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 %%
%%
becomes
Fruit Turn-over
apple 20
pear 40
banana 60
strawberry 49
cherry 37
apple 80
pear 90
banana 120
strawberry 149
cherry 137

Add new attachment

Only authorized users are allowed to upload new attachments.
« This page (revision-1) was last changed on 18-Aug-2014 15:55 by jim