Module:Bar/doc

This is the documentation page for Module:Bar

This is a documentation subpage for Module:Bar.
It contains usage information, categories, and other content that is not part of the original module page.

Module:Bar generates a coloured bar for bar charts or progress bars with any number of data series. This is intended for use in more general templates.

Usage edit

Series edit

The bar is invoked with a series of values that represent data series. Each series specifies two or three arguments: the value, the colour, and an optional tooltip title. For example:

{{#invoke:bar|format|4,green,done|2,gray,pending|4,#FCC,not done}}

Total edit

You can explicitly specify the total number of values in the bar. If you do and the series add up to a smaller value, an equivalent empty space will be included at the end:

{|
| {{#invoke:bar|format|7,green,done|total=10}}
|-
| {{#invoke:bar|format|4,green,done|total=10}}
|-
| {{#invoke:bar|format|2,green,done|total=10}}
|}

Width edit

By default the bar will be set to 100% width, but you can specify any valid CSS width instead:

{|
| {{#invoke:bar|format|7,green,done|width=5em}}
|-
| {{#invoke:bar|format|7,green,done|width=15em}}
|}

Bar CSS edit

You can customize the appearance of the bar with CSS:

{{#invoke:bar|format|7,green,done|total=10|width=30em|barCSS=border:1px solid #CCC}}

Examples edit

Progress bar edit

{|
| {{#invoke:bar|format|7,green,done|total=10|width=30em|barCSS=border:1px solid #CCC}}
| {{#expr:7 / 10 * 100}}%
|}

70%

Stacked bar chart edit

{|
|+ Expenses vs profits
|-
| 2011
| {{#invoke:bar|format|100,red,expenses|50,green,profits|total=170|width=30em}}
|-
| 2012
| {{#invoke:bar|format|75,red,expenses|90,green,profits|total=170|width=30em}}
|}

Expenses vs profits

2011

2012

Grouped bar chart edit

{|
|+ Expenses vs revenue
|-
| 2011
| {{#invoke:bar|format|150,green,revenue|total=160|width=15em}}
{{#invoke:bar|format|100,red,expenses|total=160|width=15em}}
|-
| 2012
| {{#invoke:bar|format|160,green,revenue|total=160|width=15em}}
{{#invoke:bar|format|75,red,expenses|total=160|width=15em}}
|}

Expenses vs revenue

2011

2012