This page (revision-8) was last changed on 12-May-2016 19:21 by Dirk Frederickx 

This page was created on 06-Jan-2014 00:06 by Juan Pablo

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Version Date Modified Size Author Changes ... Change note
8 12-May-2016 19:21 9 KB Dirk Frederickx to previous Updated with Haddock additional features
7 29-Apr-2016 21:10 11 KB Dirk Frederickx to previous | to last removed dirt
6 31-Mar-2016 21:49 11 KB Juan Pablo to previous | to last +18556394698 windows 10 online technical support Toll free number ==> JSPWikiStyle
5 31-Mar-2016 19:07 11 KB smith to previous | to last JSPWikiStyle ==> +18556394698 windows 10 online technical support Toll free number
4 08-Jan-2014 10:56 11 KB Ichiro Furusato to previous | to last HTMLColourNames ==> HTML Colour Names
3 08-Jan-2014 10:56 11 KB Ichiro Furusato to previous | to last HTML Colour Names ==> HTMLColourNames
2 06-Jan-2014 00:07 11 KB Juan Pablo to previous | to last
1 06-Jan-2014 00:06 11 KB Juan Pablo to last
Incoming links Outgoing links
GraphBars
GraphBars

Difference between version and

At line 1 added 2 lines
[{SET page-styles='prettify-nonum table-condensed-fit'}]
%%table-condensed-fit-bordered
At line 3 changed 3 lines
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|HTMLColourNames];
there is no need for an external .gif.
The {{%~%graphBars}} %%category [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.
At line 7 changed 3 lines
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
%%tabs
!Intro
At line 11 changed 8 lines
Default syntax:
{{{
%%graphBars
%%gBar integer or date value %% renders first graph bar
%%gBar integer or date value %% renders 2nd graph bar
...
%%
}}}
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.
At line 20 removed one line
Specify extra parameters to define color, size, orientation and type of the graphic bars. Use a dash (-) as separator.
At line 22 changed 3 lines
%%graphBars<name>-min<integer>-max<integer>-<color1>-<color2>-vertical-progress-gauge
... %%gBar<name> value %% ...
%%
%%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
/%
/%
At line 26 removed 13 lines
* __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''.
At line 40 changed one line
!!Examples
%%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
/%
/%
At line 42 removed 4 lines
%%tabbedSection
%%tab-DefaultUsage
!Default
Here is a default case, without parameters.
At line 47 changed 9 lines
__Numbers (integers or floats )__ inside a bullet list.
{{{
%%graphBars
* %%gBar 20 %% apples
* %%gBar 40 %% pears
* %%gBar 60 %% bananas
%%
}}}
becomes
!Options
At line 57 changed 5 lines
%%graphBars
* %%gBar 20 apples %%
* %%gBar 40 %% pears
* %%gBar 60 %% bananas
%%
GraphBars support many options for colour, size, orientation and type of the graphic bars. Use a dash {{-}} to separate each option.
At line 63 removed one line
__Date & Time __
At line 65 changed 7 lines
%%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 %%
%%
%%graphBars<name>-min<integer>-<color1>-<color2>-progress
... %%gBar<name> <some value> /% ...
/%
At line 73 removed one line
becomes
At line 75 changed 7 lines
%%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 %%
%%
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. %%label-warning 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''.
; %%label-warning new/% inside : Show the {{%~%gBar}} value as text inside the bar
; %%label-warning new/% striped : Effect with stripes
; %%label-warning new/% active : Effect with animated stripes
At line 83 changed 2 lines
%%
%%tab-BarLengths
!Examples
At line 86 changed 14 lines
! 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 %%
%%
Here is a simple example, without parameters.
At line 101 removed 7 lines
%%
%%tab-BarColor
!Bar Colors
You can use HTML hexadecimal Color codes or [HTML Color Name].
At line 109 changed 5 lines
%%graphBars-fuchsia
| apples | %%gBar 20 %%
| pears | %%gBar 40 %%
| bananas | %%gBar 60 %%
%%
%%graphBars
* %%gBar 20 /% apples
* %%gBar 40 /% pears
* %%gBar 60 /% bananas
/%
At line 115 removed one line
becomes
At line 117 changed 5 lines
%%graphBars-fuchsia
| apples | %%gBar 20 %%
| pears | %%gBar 40 %%
| bananas | %%gBar 60 %%
%%
%%graphBars
* %%gBar 20 /% apples
* %%gBar 40 /% pears
* %%gBar 60 /% bananas
/%
At line 123 changed one line
You can specify 2 colors. Each bar will be colored differently, gradually moving from ''color1'' to ''color2''
Here is an example with dates:
At line 126 changed 14 lines
%%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 %%
%%
%%
%%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 /%
/%
At line 141 removed one line
becomes
At line 143 changed 14 lines
%%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 %%
%%
%%
%%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 /%
/%
At line 158 removed 2 lines
%%
%%tab-NamedBars
At line 161 changed one line
!Named Bars
!Bar Sizes
At line 163 changed one line
Named bars allow you to specify different graphbar styles in a single page section or table
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.
At line 165 changed 3 lines
__Example 1: nested named graph-bars__
%%columns
At line 169 changed 9 lines
%%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 %%
%%
%%
%%graphBars-min50-max150-info
| apples | %%gBar 20 /% kg
| peach | %%gBar 40 /% kg
| bananas | %%gBar 60 /% kg
/%
At line 179 changed one line
becomes
----
%%graphBars-min50-max150-info
| apples | %%gBar 20 /% kg
| peach | %%gBar 40 /% kg
| bananas | %%gBar 60 /% kg
/%
/%
At line 181 changed 9 lines
%%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 %%
%%
%%
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.
At line 191 changed 6 lines
__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.
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.
%%columns
At line 198 changed 10 lines
%%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
%%
%%
%%graphBars-min50-max150-minv0-maxv120-warning
| apples | %%gBar 20 /% kg
| peach | %%gBar 40 /% kg
| bananas | %%gBar 60 /% kg
/%
At line 209 changed one line
becomes
----
%%graphBars-min50-max150-minv0-maxv120-warning
| apples | %%gBar 20 /% kg
| peach | %%gBar 40 /% kg
| bananas | %%gBar 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.
At line 211 removed 12 lines
%%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)
At line 224 changed 7 lines
%%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
%%
%%
%%graphBars-progress-maxv100 %%gBar 66/%% /% \\
%%progress-info 66/%%
At line 233 changed 8 lines
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
%%
%%
%%graphBars-progress-maxv100 %%gBar 66/%% /% \\
%%progress-info 66/%%
At line 151 added one line
!Bar Colors
At line 243 changed 2 lines
%%
%%tab-VerticalBars
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!
At line 246 changed 2 lines
!Vertical Bars
Vertical bars are typically used inside tables; although inline vertical bars are possible too.
* %%progress-inside 10/% default color
* %%progress-ff1eb2-inside 20/% hex color code {{ff1eb2}}
* %%progress-Gold-inside 20/% HTML Color Name {{Gold}}
* %%progress-success-inside 40/% {{success}}
* %%progress-info-inside 60/% {{info}}
* %%progress-warning-inside-striped 80/% {{warning}}, {{striped}}
* %%progress-danger-inside-active 100/% {{danger}}, {{active}}
At line 249 changed 3 lines
You can get vertical layout with normal bars, ''progress'' bars and ''gauge'' bars.
__Tables with vertical bars__
When specifying 2 colors, each bar will be coloured differently, gradually moving from {{color1}} to {{color2}}.
%%columns
At line 253 changed 4 lines
%%graphBars-vertical
|| apples || pears || bananas || strawberry || cherry
| %%gBar 20 %% | %%gBar 40 %% | %%gBar 60 %% | %%gBar 120 %% | %%gBar 49 %%
%%
%%graphBars-DarkSeaGreen-GoldenRod-max150
| apples | %%gBar 20 /%
| pears | %%gBar 40 /%
| bananas | %%gBar 60 /%
| strawberry | %%gBar 65 /%
| cherry | %%gBar 12 /%
/%
At line 176 added 9 lines
----
%%graphBars-DarkSeaGreen-GoldenRod-max150
| apples | %%gBar 20 /%
| pears | %%gBar 40 /%
| bananas | %%gBar 60 /%
| strawberry | %%gBar 65 /%
| cherry | %%gBar 12 /%
/%
/%
At line 259 removed 5 lines
becomes
%%graphBars-vertical
|| apples || pears || bananas || strawberry || cherry
| %%gBar 20 %% | %%gBar 40 %% | %%gBar 60 %% | %%gBar 120 %% | %%gBar 49 %%
%%
At line 265 changed 6 lines
__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
%%
}}}
!Progress Bars
At line 272 changed 4 lines
becomes
%%graphBars-ffff00-669900-vertical
Some text %%gBar 20 %% %%gBar 40 %% %%gBar 120 %% %%gBar 20 %% %%gBar 49 %% and some 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.
At line 277 changed 7 lines
%%
%%tab-ProgressBars
!Progress Bar
Progress bars have equal lengths and consist of 2 colors.
__Horizontal (default) progress bar__
%%columns
At line 285 changed 7 lines
%%graphBars-ffff00-669900-progress
| apple | %%gBar 20 %%
| pear | %%gBar 40 %%
| banana | %%gBar 60 %%
| strawberry | %%gBar 120 %%
| cherry | %%gBar 49 %%
%%
%%graphBars-info-progress-max150
| apple | %%gBar 20 /%
| pear | %%gBar 40 /%
| banana | %%gBar 60 /%
| strawberry | %%gBar 120 /%
/%
At line 293 changed one line
becomes
----
%%graphBars-progress-info-max150
| apple | %%gBar 20 /%
| pear | %%gBar 40 /%
| banana | %%gBar 60 /%
| strawberry | %%gBar 120 /%
/%
/%
At line 295 changed 10 lines
%%graphBars-ffff00-669900-progress
| apple | %%gBar 20 %%
| pear | %%gBar 40 %%
| banana | %%gBar 60 %%
| strawberry | %%gBar 120 %%
| cherry | %%gBar 49 %%
%%
__Vertical Progress Bar__
Example of a vertical progress bar:
At line 306 changed one line
%%graphBars-ffff00-669900-vertical-progress
%%graphBars-ffff00-669900-vertical-progress-max50
At line 308 changed 2 lines
| %%gBar 20 %% | %%gBar 40 %% | %%gBar 60 %% | %%gBar 120 %% | %%gBar 49 %%
%%
| %%gBar 20 /% | %%gBar 40 /% | %%gBar 60 /% | %%gBar 120 /% | %%gBar 49 /%
/%
At line 312 changed 2 lines
becomes
%%graphBars-ffff00-669900-vertical-progress
%%graphBars-ffff00-669900-vertical-progress-max50
At line 315 changed 2 lines
| %%gBar 20 %% | %%gBar 40 %% | %%gBar 60 %% | %%gBar 120 %% | %%gBar 49 %%
%%
| %%gBar 20 /% | %%gBar 40 /% | %%gBar 60 /% | %%gBar 120 /% | %%gBar 49 /%
/%
At line 318 removed 37 lines
__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
At line 357 changed one line
The color of the bar varies depending on the value of the bar.
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.
At line 359 changed one line
__Horizontal (default) gauge bar__
%%columns
At line 361 changed 7 lines
%%graphBars-ffff00-669900-gauge
| apple | %%gBar 20 %%
| pear | %%gBar 40 %%
| banana | %%gBar 60 %%
| strawberry | %%gBar 49 %%
| cherry | %%gBar 37 %%
%%
%%graphBarsCount-PeachPuff-gauge-max150
%%sortable
|| Fruit || Count
| apple | 20
| pear | 67
| banana | 44
| strawberry | 249
| cherry | 137
/%
/%
At line 369 changed 3 lines
becomes
%%graphBars-ffff00-669900-gauge
----
%%graphBarsCount-PeachPuff-gauge-max150
At line 373 changed 7 lines
|| Fruit || Turn-over
| apple | %%gBar 20 %%
| pear | %%gBar 40 %%
| banana | %%gBar 60 %%
| strawberry | %%gBar 49 %%
| cherry | %%gBar 37 %%
%%%%
|| Fruit || Count
| apple | 20
| pear | 67
| banana | 44
| strawberry | 249
| cherry | 137
/%
/%
/%
At line 381 changed one line
__Vertical gauge bar__
Example of a vertical gauge bar
At line 385 changed 2 lines
| %%gBar 20 %% | %%gBar 40 %% | %%gBar 60 %% | %%gBar 120 %% | %%gBar 49 %%
%%
| %%gBar 20 /% | %%gBar 40 /% | %%gBar 60 /% | %%gBar 120 /% | %%gBar 49 /%
/%
At line 389 removed one line
becomes
At line 392 changed 2 lines
| %%gBar 20 %% | %%gBar 40 %% | %%gBar 60 %% | %%gBar 120 %% | %%gBar 49 %%
%%
| %%gBar 20 /% | %%gBar 40 /% | %%gBar 60 /% | %%gBar 120 /% | %%gBar 49 /%
/%
At line 395 changed 2 lines
__Invert colors__
If you don't specify ''color2'', the invert of 'color1' will be taken,
!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.
At line 398 changed 12 lines
%%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 %%
%%
%%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
/%
/%
At line 411 removed one line
becomes
At line 413 changed 15 lines
%%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 %%
%%
%%
%%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
/%
/%
At line 429 changed 2 lines
%%
%%
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
/%
}}}
At line 295 added 6 lines
%%graphBars-ff0-690-vertical-max50-min20
Some text %%gBar 20 /% %%gBar 40 /% %%gBar 120 /% %%gBar 20 /% %%gBar 49 /% and some bars
/%
/%
/%
This page (revision-8) was last changed on 12-May-2016 19:21 by Dirk Frederickx  Top