Template:Brick chart/doc

Draws a "brick chart" (poor man's substitute for pie charts) as a rectangular-box chart with brick segments inside, useful for showing percentages, seats in a legislature, etc.

Parameters

 * value1-value9 – values for each brick. Values can be integers, decimals ("2.4"), formulas, or use '+' in mixed number fractions ("3+1/2").
 * label1-label9 – labels for each brick, displayed in the legend
 * color1-color9 – web colors to be used for each brick, defaults to various colours
 * caption – the caption for the legend
 * total  – the total number of bricks (defaults to 100)
 * stride – the number of bricks in each row, defaults to 10
 * unit   – unit to display in the legend, default to %
 * width – the width of the chart in pixels, the height is calculated automatically
 * align – (left|right) where to align the chart, defaults to "right".
 * legend_margin=0 0 0 6px – shifts legend boxes 6 pixels from left margin (default: 3px 0 0 10px).

Examples
The following 2 examples have numbers in the range of 0-100 units, as percentages. The total is assumed as total=100, to calculate the "other" amount by subtracting all brick values from 100.

Note how the bottom value,, generates a "tiny sliver" of a brick, and the calculated remainder, the "other" value is also a decimal amount as 8.6.

The brick colours use the defaults: red, dark green, blue, yellow, purple, and cyan, as the first 6 hues. The next example, below, shows use of some colour parameters by setting:.

The 2nd example, for Religion in the Czech Republic, shows the use of indented parameters for the value/color under each label phrase. The color #008 (for "Catholic") is a hexadecimal code for dark blue, using RGB notation, where the 3rd digit "8" is half of blue intensity levels, 0-F.

It is customary to list the larger percentages first, in a table; however, the numbers can be displayed in any order as needed for the text on a page. A small decimal amount, such as 0.4, will show a tiny sliver among the various brick bars.

The option "legend_margin=0 0 0 6px" resets the alignment of the legend boxes, as only 6 pixels from the left margin (default: 3px 0 0 10px).

Larger amounts: The following example has numbers in the range of 0-300 units, as counts. The total is set to total=614. The options stride=20 and brick_size=2.6 scale the bar line segments to fit within the box, rather than 6x times larger, as 614 compared to 100.

Performance considerations
The Template:Brick_chart draws the chart by using div-tags ("&lt;div>") to show colored bars for line segments of the calculated length. The template can format a brick chart within 1/6 second, so 3 brick charts could appear within a page and add only 1/2 second to reformat, or edit-preview. The initial creation of the template occurred in August 2009; however, the alignment for display problems with overlapped bars was fixed in September 2012, over 3 years later.