Template:Brick chart
TemplateData for Brick chart
Draws a "brick chart" (square alternative to pie charts) as a rectangular-box chart with brick segments inside, useful for showing percentages, seats in a legislature, etc.
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| Alignment | thumb | Align graph to left or right of page (floating), centre it, or no alignment option.
| String | optional |
| Style | style | Additional CSS for container | String | optional |
| Width | width | Width in pixels
| Number | optional |
| Total | total | The total number of bricks (defaults to 100)
| Number | optional |
| Stride | stride | The number of bricks in each row, defaults to 10.
| Number | optional |
| Value 1 | value1 | Values for each brick. Values can be integers, decimals ("2.4"), formulas, or use '+' in mixed number fractions ("3+1/2"). | Unknown | required |
| Brick size | brick_size | Value represented by one brick - defaults to one. | Number | optional |
| Colour 1 | color1 | CSS colour of each brick, defaults to various colours. E.g. red, blue, #893.
| Unknown | optional |
| Value 2 | value2 | no description | Unknown | required |
| Colour 2 | color2 | no description
| String | optional |
| value3 | value3 | no description | Unknown | optional |
| Color 3 | color3 | no description
| Unknown | optional |
| value4 | value4 | no description | Unknown | optional |
| Color 4 | color4 | no description
| Unknown | optional |
| value5 | value5 | no description | Unknown | optional |
| Color 5 | color5 | no description
| Unknown | optional |
| value6 | value6 | no description | Unknown | optional |
| Color 6 | color6 | no description
| Unknown | optional |
| value7 | value7 | no description | Unknown | optional |
| Color 7 | color7 | no description
| Unknown | optional |
| value8 | value8 | no description | Unknown | optional |
| Color 8 | color8 | no description
| Unknown | optional |
| value9 | value9 | no description | Unknown | optional |
| Color 9 | color9 | no description
| Unknown | optional |
| Caption | caption | no description | Line | optional |
| Legend margin | legend_margin | A CSS margin value to override the default | String | optional |
| Label 1 | label1 | Legend label for the first brick. | Line | required |
| Unit | unit | Unit to display in the legend, default to % | String | optional |
| Label 2 | label2 | no description | Line | suggested |
| Label 3 | label3 | no description | Line | suggested |
| Label 4 | label4 | no description | Line | suggested |
| Label 5 | label5 | no description | Line | suggested |
| Label 6 | label6 | no description | Line | suggested |
| Label 7 | label7 | no description | Line | suggested |
| Label 8 | label8 | no description | Line | suggested |
| Label 9 | label9 | no description | Line | suggested |
| "Other" label | other | Legend for the leftover space in the graph, defaults to "Other". | Line | optional |
Examples
Example of 6 amounts
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. <syntaxhighlight lang="wikitext">
Example of 6 amounts
</syntaxhighlight>
Note how the bottom value, value6=0.4, 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: color1, color2, color3.
Religion in the Czech Republic
<syntaxhighlight lang="wikitext">
Religion in the Czech Republic
</syntaxhighlight> 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).
Seats in the German federal parliament
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.
<syntaxhighlight lang="wikitext">
Seats in the German federal parliament
</syntaxhighlight>
Performance considerations
The Template:Brick_chart draws the chart by using div-tags ("<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.
See also
- {{Pie chart}}