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}}
|}
| 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}}
|}
| 2011 | |||||
| 2012 |