Graph Bars#

The %%graphBars JSPWiki Style allows to insert horizontal or vertical bars into your wiki pages. Check out the Search page which shows the weight of the search results as horizontal bars.

Intro#

Put a ‰%graphBars container around one or more %%gBar elements with a number or a date. Each %%gBar is converted to a coloured bar, sized according to their value. You can add many options to the container, each option separated by a dash -. Nesting of multiple ‰%graphBars is possible too.

%%graphBarsWeight-max150-DarkSeaGreen-GoldenRod
%%graphBarsLength-max150-ff0-690-active
||Category   || Weight || Length 
| apple      | 20    | 20 
| pear       | 40    | 10 
| banana     | 60    |  5 
| strawberry | 49    |  7 
| cherry     | 37    | 12 
/%
/%
Category Weight Length
apple 20 20
pear 40 10
banana 60 5
strawberry 49 7
cherry 37 12

Options#

GraphBars support many options for colour, size, orientation and type of the graphic bars. Use a dash - to separate each option.

%%graphBars<name>-min<integer>-<color1>-<color2>-progress   
    ... %%gBar<name> <some value> /% ...  
/%

Following options are supported:

<name>
The name of the graphBar.
Using %%graphBars with names allows you to identify multiple datasets. All %%gBar elements with the same name form one dataset. Eg %%graphBarsDude will match with all %%gBarDude.
When using tables, you can even omit the %%gBar tags and use the column- or row-name of the table. (eg %%graphBarsDude will generate bars for all table-cells in the Dude column or row)
min<integer>
Minimum size of the bars in pixel (default min = 40px)
max<integer>
Maximum size of the bars in pixel (default max = 400px)
minv<integer>
The value of the smallest bar (defaults to minimum of the dataset)
maxv<integer>
The value of the largest bar (defaults to the maximum of the dataset)
<color1>
The color value expressed as hexadecimal number or HTML-name Color Code. new You can also use predefined colors success, info, warning, danger.
<color2>
The color value (see <color1>) Color2 is used to gradually blend the bar colors between color1 and color2.
vertical or horizontal
the orientation of the bars: default is horizontal
progress
Progress bars have a grey background of a fixed size. The value determines the size of the coloured bar.
gauge
The bar value determines color gradient between color1 and color2.
new inside
Show the %%gBar value as text inside the bar
new striped
Effect with stripes
new active
Effect with animated stripes

Examples#

Here is a simple example, without parameters.

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

Here is an example with dates:

%%graphBars-success
|Planning            | %%gBar 15 Nov 2005 /% today 
|Requirement Capture | %%gBar 1 Jan 2006 /% 
|Analyse             | %%gBar 15 Feb 2006 /% 
|Build               | %%gBar 1 Apr 2006 /% 
|Validate            | %%gBar 15 Jun 2006 /% 
/%
Planning 15 Nov 2005 today
Requirement Capture 1 Jan 2006
Analyse 15 Feb 2006
Build 1 Apr 2006
Validate 15 Jun 2006

Bar Sizes#

You can specify the minimum and maximum size of the bars in pixel. By default the smallest bar gets 40 pixel, the largest gets 400 pixel.

%%graphBars-min50-max150-info
| apples  | %%gBar 20 /% kg
| peach   | %%gBar 40 /% kg
| bananas | %%gBar 60 /% kg
/%

apples 20 kg
peach 40 kg
bananas 60 kg

The values of the bars are automatically adjusted relative to the dataset. This means that the smallest and the largest value of the dataset will be mapped on the smallest and largest bar sizes; the size of all other bars are proportional to those values.

The options minv and maxv allow you to specify what is the lower and upper bound of the dataset, rather then relying on the automatic scaling.
In the next example the values will be shown relative to a scale of 0 to 120. So a value 0 would result in a bar of 50px; a value 120 would result in a bar of 150px.

%%graphBars-min50-max150-minv0-maxv120-warning
| apples  | %%gBar 20 /% kg
| peach   | %%gBar 40 /% kg
| bananas | %%gBar 60 /% kg
/%

apples 20 kg
peach 40 kg
bananas 60 kg
This is especially useful when plotting a single bar, which by default would always show as a maximum sized bar (default 400px). Because this is such a common case for showing a progress bar, you can use the %%progress shortcut for that.
%%graphBars-progress-maxv100  %%gBar 66/%% /%  \\
%%progress-info 66/%%
66%
66%

Bar Colors#

Colors can be specified as hexadecimal number or HTML Color Name. Also a number of predefined colors are available: success, info, warning, danger.
And you can add stripes -striped and animation -active too!

  • 10 default color
  • 20 hex color code ff1eb2
  • 20 HTML Color Name Gold
  • 40 success
  • 60 info
  • 80 warning, striped
  • 100 danger, active

When specifying 2 colors, each bar will be coloured differently, gradually moving from color1 to color2.

%%graphBars-DarkSeaGreen-GoldenRod-max150
| apples  | %%gBar 20 /% 
| pears   | %%gBar 40 /% 
| bananas | %%gBar 60 /%
| strawberry | %%gBar 65 /%
| cherry | %%gBar 12 /%
/%

apples 20
pears 40
bananas 60
strawberry 65
cherry 12

Progress Bars#

Progress bars draw a grey background and show the bar relative to that. The total size of a progress bar is always fixed, and equal to the maximum size of the bar.

%%graphBars-info-progress-max150
| apple      | %%gBar 20 /% 
| pear       | %%gBar 40 /% 
| banana     | %%gBar 60 /%
| strawberry | %%gBar 120 /%
/%

apple 20
pear 40
banana 60
strawberry 120

Example of a vertical progress bar:

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

Gauge Bars#

The color of the gauge bars vary depending on the value or size of the bar. In case you didn't specify color2, the invert of color1 will be taken.

%%graphBarsCount-PeachPuff-gauge-max150
%%sortable
|| Fruit     || Count
| apple      | 20  
| pear       | 67  
| banana     | 44 
| strawberry | 249
| cherry     | 137 
/%
/%

Fruit Count
apple 20
pear 67
banana 44
strawberry 249
cherry 137

Example of a vertical gauge bar

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

Vertical Bars#

Vertical bars can be used inside tables or inline in a text. You can combine vertical layout with normal, progress and gauge bars.

%%graphBarsCost-vertical-min5-max40-progress-555-active
%%graphBarsWeight-vertical-warning-max60
||Fruit  | apples | pears | bananas | strawberry | cherry       
||Weight | 20     | 40    | 60      | 120        | 49   
||Cost   | 5      | 3     | 7       | 20         |  9   
/%
/%
Fruit apples pears bananas strawberry cherry
Weight 20 40 60 120 49
Cost 5 3 7 20 9

Example of an Inline Vertical bars:

%%graphBars-ff0-690-vertical-max50-min20
Some text %%gBar 20 /% %%gBar 40 /% %%gBar 120 /% %%gBar 20 /% %%gBar 49 /% and some bars
/%
Some text 20 40 120 20 49 and some bars