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

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

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

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

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

%%graphBars-progress-maxv100  %%gBar 66/%% /%  \\
%%progress-info 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 /%
/%

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

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

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

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

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

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