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 4 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 [color|HTML Color Name];
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 8 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 12 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 21 removed one line
Specify extra parameters to define color, size, orientation and type of the graphic bars. Use a dash (-) as separator.
At line 23 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 27 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 41 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 43 removed 4 lines
%%tabbedSection
%%tab-DefaultUsage
!Default
Here is a default case, without parameters.
At line 48 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 58 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 64 removed one line
__Date & Time __
At line 66 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 74 removed one line
becomes
At line 76 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 84 changed 2 lines
%%
%%tab-BarLengths
!Examples
At line 87 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 102 removed 7 lines
%%
%%tab-BarColor
!Bar Colors
You can use HTML hexadecimal Color codes or [HTML Color Name].
At line 110 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 116 removed one line
becomes
At line 118 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 124 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 127 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 142 removed one line
becomes
At line 144 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 159 removed 2 lines
%%
%%tab-NamedBars
At line 162 changed one line
!Named Bars
!Bar Sizes
At line 164 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 166 changed 3 lines
__Example 1: nested named graph-bars__
%%columns
At line 170 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 180 changed one line
becomes
----
%%graphBars-min50-max150-info
| apples | %%gBar 20 /% kg
| peach | %%gBar 40 /% kg
| bananas | %%gBar 60 /% kg
/%
/%
At line 182 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 192 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 199 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 210 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 212 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 225 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 234 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 244 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 247 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 250 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 254 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 260 removed 5 lines
becomes
%%graphBars-vertical
|| apples || pears || bananas || strawberry || cherry
| %%gBar 20 %% | %%gBar 40 %% | %%gBar 60 %% | %%gBar 120 %% | %%gBar 49 %%
%%
At line 266 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 273 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 278 changed 7 lines
%%
%%tab-ProgressBars
!Progress Bar
Progress bars have equal lengths and consist of 2 colors.
__Horizontal (default) progress bar__
%%columns
At line 286 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 294 changed one line
becomes
----
%%graphBars-progress-info-max150
| apple | %%gBar 20 /%
| pear | %%gBar 40 /%
| banana | %%gBar 60 /%
| strawberry | %%gBar 120 /%
/%
/%
At line 296 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 307 changed one line
%%graphBars-ffff00-669900-vertical-progress
%%graphBars-ffff00-669900-vertical-progress-max50
At line 309 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 313 changed 2 lines
becomes
%%graphBars-ffff00-669900-vertical-progress
%%graphBars-ffff00-669900-vertical-progress-max50
At line 316 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 319 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 358 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 360 changed one line
__Horizontal (default) gauge bar__
%%columns
At line 362 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 370 changed 3 lines
becomes
%%graphBars-ffff00-669900-gauge
----
%%graphBarsCount-PeachPuff-gauge-max150
At line 374 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 382 changed one line
__Vertical gauge bar__
Example of a vertical gauge bar
At line 386 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 390 removed one line
becomes
At line 393 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 396 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 399 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 412 removed one line
becomes
At line 414 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 430 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