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 |