This page (revision-1) was last changed on 29-Nov-2024 16:16 by UnknownAuthor

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note

Page References

Incoming links Outgoing links
GraphBars
GraphBars

Version management

Difference between version and

At line 1 added 430 lines
!!! 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|HTML Colour Names|HTML Colour Names|HTMLColourNames];
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|http://www.jspwiki.org/wiki/IdeaTableDecorators] )
--[DF|DirkFrederickx], 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
%%tabbedSection
%%tab-DefaultUsage
!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
%%graphBars
* %%gBar 20 apples %%
* %%gBar 40 %% pears
* %%gBar 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
%%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 %%
%%
%%
%%tab-BarLengths
! 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
%%graphBars-min5-max15
| apples | %%gBar 20 kg %%
| bananas | %%gBar 60 kg %%
%%
%%
%%tab-BarColor
!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
%%graphBars-fuchsia
| apples | %%gBar 20 %%
| pears | %%gBar 40 %%
| bananas | %%gBar 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
%%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 37 %%
%%
%%
%%
%%tab-NamedBars
!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
%%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 %%
%%
%%
__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
%%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
%%
%%
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
%%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
%%
%%
%%
%%tab-VerticalBars
!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
%%graphBars-vertical
|| apples || pears || bananas || strawberry || cherry
| %%gBar 20 %% | %%gBar 40 %% | %%gBar 60 %% | %%gBar 120 %% | %%gBar 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
%%graphBars-ffff00-669900-vertical
Some text %%gBar 20 %% %%gBar 40 %% %%gBar 120 %% %%gBar 20 %% %%gBar 49 %% and some bars
%%
%%
%%tab-ProgressBars
!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
%%graphBars-ffff00-669900-progress
| apple | %%gBar 20 %%
| pear | %%gBar 40 %%
| banana | %%gBar 60 %%
| strawberry | %%gBar 120 %%
| cherry | %%gBar 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
%%graphBars-ffff00-669900-vertical-progress
|| apples || pears || bananas || strawberry || cherry
| %%gBar 20 %% | %%gBar 40 %% | %%gBar 60 %% | %%gBar 120 %% | %%gBar 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
%%graphBars-red-progress
%%sortable
|| Fruit || Turn-over
| 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 %%
%%
%%
%%
%%tab-GaugeBars
!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
%%graphBars-ffff00-669900-gauge
%%sortable
|| Fruit || Turn-over
| apple | %%gBar 20 %%
| pear | %%gBar 40 %%
| banana | %%gBar 60 %%
| strawberry | %%gBar 49 %%
| cherry | %%gBar 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
%%graphBars-ffff00-669900-vertical-gauge
|| apples || pears || bananas || strawberry || cherry
| %%gBar 20 %% | %%gBar 40 %% | %%gBar 60 %% | %%gBar 120 %% | %%gBar 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
%%graphBars-red-gauge
%%sortable
|| Fruit || Turn-over
| 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 %%
%%
%%
%%
%%
This page (revision-1) was last changed on 29-Nov-2024 16:16 by UnknownAuthorTop