Template:Xviews/vbar/doc

Generates a styleable progress bar-style graphic that may be used to visually display the value of a given statistic, passed as a value scaled to 0 – 100, and intended for comparison with adjacent bars as part of a bar chart. The largest value passed in a series should be given a value of 100 (or less), and other bars should pass a percent of the max value.

Usage

{{vbar|pct}}

{{vbar|pct|value}}

{{vbar|pct|label=string}}

Parameters

Data params

There are three data parameters, one required:

• |1= – a number from 1..100 indicating the relative size of the bar compared to other bars in the series. By itself, a single bar has no meaning, as it is by definition a comparative value that only makes sense when displayed in multiples.
• |2= – this is just a string used to decorate the end of the bar, and can be anything you want; normally, a number representing the raw statistic, such as 2,133, meaning 2,133 page views for that day, for example. (optional; no default)
• |label= – identifier for the bar (any string); for a time-series chart, this might be the day or time.

Style params

There are four styling params, all optional:

• |label-style= – defaults to 6 characters, monospaced, right-justified.
• |thick= – bar thickness (default: 5px, plus 1px border)
• |val-style= – you may add any CSS parameters applicable to an HTML inline element to alter the appearance of the bar, such as size, width, border, background-color, etc.
• |mode= – set mode to vert to change the bar to a vertical bar; (default: horizontal)     (not implemented yet)

Examples

{{xviews/vbar|13.3|825|06-03}} →

825

{{xviews/vbar|34.5|2133|label=06-05}} →

06-052133

{{xviews/vbar|100|6184|label=06-06}} →

06-066184

Page views of Liberation of France from June 1 to June 10, 2024

06-01533

06-02767

06-03825

06-041049

06-052133

06-066184

06-073233

06-081751

06-091345

06-10937