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#
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 | 09 Feb 2023 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
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 |
Back to BrushedTemplate