வார்ப்புரு:Bar box

Template documentation[view] [edit] [history] [purge]

This 'Bar box' template documentation is transcluded for all Bar box/doc including templates [edit].Masterpage

{{Bar box}}, {{bar percent}}, {{bar pixel}}, {{bar stacked}} and {{bar gap}} are a family of templates for construction of horizontal bar charts.

Usage

{{Bar box
|width   =  width of the graph         (optional)
|barwidth=  width of the bararea       (optional, defaults to 100px)
|float   =  (left|right|none)          (optional, defaults to none)
|title   =  title of the chart         (optional)
|titlebar=  title bar colour           (optional, defaults to none)
|left1   =  first left column header   (optional)
|left2   =  second left column header  (optional)
|right1  =  first right column header  (optional)
|right2  =  second right column header (optional)
|bars    =  chart contents             (see below)
|caption =  caption under the chart    (optional)
}}

Chart contents

Bar box can contain any number of bars. There are four types of bars:

Percentage bar:

{{bar percent|row label|colour|value (width in percents)|optional value label}}

If value label is not provided, it is constructed from the percentage and "%". This bar type also has the {{bar percent 2}} and {{bar percent 3}} variations which display more bars for the same row label.

Pixel bar:

{{bar pixel|row label|colour|value (width in pixels)|value suffix|optional value label}}

If value label is provided, value suffix is ignored. Otherwise, the value label is constructed from the value and the value suffix. This is used as shorthand. Both following examples give identical results:

{{bar pixel|foo|red|12||12,345}}
{{bar pixel|foo|red|12|,345}}

This bar type also has the {{bar pixel 2}} variation which displays two bars for the same row label.

Stacked bars:

{{bar stacked|1st left label|1st right label|color 1|width 1 (in pixels)|...|color 5|width 5 (in pixels)|note1=2nd left label|note2=2nd right label|title1="tooltip" 1|...|title5="tooltip" 5|align=xxxx(l|c|r|d)|collapsed=(yes|y|1)|id=collapsible id}}

titlex sets the "tooltip" of the respective bar and is viewed when hovered over. align sets the text-alignment (left, center, right or default) for each column based on the respective initials. All parameters are optional, but if id is not supplied, collapsed has no effect. Use a custom toggle as the default toggle will distort the chart (see the last example).

Gap bar:

{{bar gap|optional separator|height=any valid length (omitting unit defaults to px, default is 10px)}}

Ommiting the separator generates a blank row. Another useful separator is <hr> which produces a horizontal line.

Examples

{{Bar box
|float=right
|caption=distribution of stuff
|width=200px
|bars=
{{bar percent|foo|red|30}}
{{bar percent|bar|green|40}}
{{bar percent|baz|blue|20}}
{{bar percent|bla|orange|8}}
{{bar percent|bla1|teal|2|1/50}}
}}


foo			30%
bar			40%
baz			20%
bla			8%
bla1			1/50
distribution of stuff

{{Bar box
|title=Quantity of stuff
|titlebar=#DDD
|left1=kinds of stuff
|right2=pcs.
|width=400px
|bars=
{{bar pixel|Foobar|red|33|,213}}
{{bar pixel|Barfoo|green|123|,123}}
{{bar pixel|Bazbar|blue|210|,121}}
{{bar pixel|Barfoobaz|orange|13||12,854}}
|caption=Some stuff displayed by quantity.
}}

Quantity of stuff
kinds of stuff		pcs.
Foobar	33,213
Barfoo	123,123
Bazbar	210,121
Barfoobaz	12,854
Some stuff displayed by quantity.

{{Bar box
|float=right
|title=Election results
|titlebar=#AAF
|left1=party
|left2=year
|right1=votes
|right2=change
|width=300px
|bars=
{{bar percent 2|Left|1898|silver|33|1902|red|42|+9%}}
{{bar percent 2|Right|1898|silver|40|1902|black|35|-5%}}
{{bar percent 2|Middle|1898|silver|17|1902|blue|10|-7%}}
{{bar percent 2|Other|1898|silver|10|1902|gray|13|+3%}}
|caption=1902 and 1898 election results in Freedonia compared.
}}

Election results
party	year	votes	change
Left	1898	33%	+9%
Left	1902	42%	+9%
Right	1898	40%	-5%
Right	1902	35%	-5%
Middle	1898	17%	-7%
Middle	1902	10%	-7%
Other	1898	10%	+3%
Other	1902	13%	+3%
1902 and 1898 election results in Freedonia compared.

{{Bar box
|width=250px
|title=
<div class="mw-customtoggle-a mw-customtoggle-b">Toggle all</div>
<div class="mw-customtoggle-b">Toggle last</div>
|bars=
{{bar stacked|January|(---)|red|3|blue|22|align=ddcd|id=a}}
{{bar stacked|February|+60.3%|red|8|blue|26|green|6|id=a}}
{{bar stacked|March|99|red|11|blue|18|green|8|orange|11|magenta|20|note2=+25%|align=cdrl|id=a}}
{{bar stacked|April|142|red|15|blue|24|green|8|orange|13|magenta|26|note1=foo|note2=+11%|collapsed=yes|id=b}}
}}

Toggle all Toggle last

January		(---)
February		+60.3%
March		99	+25%
April	foo	142	+11%

Tracking category

பகுப்பு:Pages using bar box without float left or float right (15)

Usage

Chart contents

Examples

Tracking category

See also