Difference between revisions of "Template:Brick chart"
imported>Wikid77 (set attributes of outer div-tag: style="align:{align|right}; float:{align|right}; margin:0 0 0 15px; {style|};") |
imported>Wikid77 (added missing parameter "brick_size=1" to scale for units > 0-100; new legend_margin=3px 0 0 10px.) |
||
| Line 12: | Line 12: | ||
| {{Brick chart/{{{style|Bricks}}} | | {{Brick chart/{{{style|Bricks}}} | ||
| offset = 0 | | offset = 0 | ||
| − | | count = {{{value1}}} | + | | count = ({{{value1|0}}}) / {{{brick_size|1}}} |
| color = {{{color1|red}}} | | color = {{{color1|red}}} | ||
| stride = {{{stride|10}}} | | stride = {{{stride|10}}} | ||
| Line 18: | Line 18: | ||
}}{{#if:{{{value2|}}} | }}{{#if:{{{value2|}}} | ||
| {{Brick chart/{{{style|Bricks}}} | | {{Brick chart/{{{style|Bricks}}} | ||
| − | | offset = {{{value1|0}}} | + | | offset = ({{{value1|0}}}) / {{{brick_size|1}}} |
| − | | count = {{{value2}}} | + | | count = ( {{{value2}}} ) / {{{brick_size|1}}} |
| color = {{{color2|green}}} | | color = {{{color2|green}}} | ||
| stride = {{{stride|10}}} | | stride = {{{stride|10}}} | ||
| Line 25: | Line 25: | ||
}}{{#if:{{{value3|}}} | }}{{#if:{{{value3|}}} | ||
| {{Brick chart/{{{style|Bricks}}} | | {{Brick chart/{{{style|Bricks}}} | ||
| − | | offset = ({{{value1|0}}}+{{{value2|0}}}) | + | | offset = ({{{value1|0}}}+{{{value2|0}}} ) / {{{brick_size|1}}} |
| − | | count = {{{value3}}} | + | | count = ( {{{value3}}} ) / {{{brick_size|1}}} |
| color = {{{color3|blue}}} | | color = {{{color3|blue}}} | ||
| stride = {{{stride|10}}} | | stride = {{{stride|10}}} | ||
| Line 32: | Line 32: | ||
}}{{#if:{{{value4|}}} | }}{{#if:{{{value4|}}} | ||
| {{Brick chart/{{{style|Bricks}}} | | {{Brick chart/{{{style|Bricks}}} | ||
| − | | offset = ({{{value1|0}}}+{{{value2|0}}}+{{{value3|0}}}) | + | | offset = ({{{value1|0}}}+{{{value2|0}}}+{{{value3|0}}} ) / {{{brick_size|1}}} |
| − | | count = {{{value4}}} | + | | count = ( {{{value4}}} ) / {{{brick_size|1}}} |
| color = {{{color4|yellow}}} | | color = {{{color4|yellow}}} | ||
| stride = {{{stride|10}}} | | stride = {{{stride|10}}} | ||
| Line 39: | Line 39: | ||
}}{{#if:{{{value5|}}} | }}{{#if:{{{value5|}}} | ||
| {{Brick chart/{{{style|Bricks}}} | | {{Brick chart/{{{style|Bricks}}} | ||
| − | | offset = ({{{value1|0}}}+{{{value2|0}}}+{{{value3|0}}}+{{{value4|0}}}) | + | | offset = ({{{value1|0}}}+{{{value2|0}}}+{{{value3|0}}}+{{{value4|0}}} ) / {{{brick_size|1}}} |
| − | | count = {{{value5}}} | + | | count = ( {{{value5}}} ) / {{{brick_size|1}}} |
| color = {{{color5|magenta}}} | | color = {{{color5|magenta}}} | ||
| stride = {{{stride|10}}} | | stride = {{{stride|10}}} | ||
| Line 46: | Line 46: | ||
}}{{#if:{{{value6|}}} | }}{{#if:{{{value6|}}} | ||
| {{Brick chart/{{{style|Bricks}}} | | {{Brick chart/{{{style|Bricks}}} | ||
| − | | offset = ({{{value1|0}}}+{{{value2|0}}}+{{{value3|0}}}+{{{value4|0}}}+{{{value5|0}}}) | + | | offset = ({{{value1|0}}}+{{{value2|0}}}+{{{value3|0}}}+{{{value4|0}}}+{{{value5|0}}} ) / {{{brick_size|1}}} |
| − | | count = {{{value6}}} | + | | count = ( {{{value6}}} ) / {{{brick_size|1}}} |
| color = {{{color6|cyan}}} | | color = {{{color6|cyan}}} | ||
| stride = {{{stride|10}}} | | stride = {{{stride|10}}} | ||
| Line 53: | Line 53: | ||
}}{{#if:{{{value7|}}} | }}{{#if:{{{value7|}}} | ||
| {{Brick chart/{{{style|Bricks}}} | | {{Brick chart/{{{style|Bricks}}} | ||
| − | | offset = ({{{value1|0}}}+{{{value2|0}}}+{{{value3|0}}}+{{{value4|0}}}+{{{value5|0}}}+{{{value6|0}}}) | + | | offset = ({{{value1|0}}}+{{{value2|0}}}+{{{value3|0}}}+{{{value4|0}}}+{{{value5|0}}}+{{{value6|0}}} ) / {{{brick_size|1}}} |
| − | | count = {{{value7}}} | + | | count = ( {{{value7}}} ) / {{{brick_size|1}}} |
| color = {{{color7|brown}}} | | color = {{{color7|brown}}} | ||
| stride = {{{stride|10}}} | | stride = {{{stride|10}}} | ||
| Line 60: | Line 60: | ||
}}{{#if:{{{value8|}}} | }}{{#if:{{{value8|}}} | ||
| {{Brick chart/{{{style|Bricks}}} | | {{Brick chart/{{{style|Bricks}}} | ||
| − | | offset = ({{{value1|0}}}+{{{value2|0}}}+{{{value3|0}}}+{{{value4|0}}}+{{{value5|0}}}+{{{value6|0}}}+{{{value7|0}}}) | + | | offset = ( {{{value1|0}}}+{{{value2|0}}}+{{{value3|0}}}+{{{value4|0}}}+{{{value5|0}}}+{{{value6|0}}}+{{{value7|0}}} ) / {{{brick_size|1}}} |
| − | | count = {{{value8}}} | + | | count = ( {{{value8}}} ) / {{{brick_size|1}}} |
| color = {{{color8|orange}}} | | color = {{{color8|orange}}} | ||
| stride = {{{stride|10}}} | | stride = {{{stride|10}}} | ||
| Line 67: | Line 67: | ||
}}{{#if:{{{value9|}}} | }}{{#if:{{{value9|}}} | ||
| {{Brick chart/{{{style|Bricks}}} | | {{Brick chart/{{{style|Bricks}}} | ||
| − | | offset = ({{{value1|0}}}+{{{value2|0}}}+{{{value3|0}}}+{{{value4|0}}}+{{{value5|0}}}+{{{value6|0}}}+{{{value7|0}}}+{{{value8|0}}}) | + | | offset = ({{{value1|0}}}+{{{value2|0}}}+{{{value3|0}}}+{{{value4|0}}}+{{{value5|0}}}+{{{value6|0}}}+{{{value7|0}}}+{{{value8|0}}} ) / {{{brick_size|1}}} |
| − | | count = {{{value9}}} | + | | count = ( {{{value9}}} ) / {{{brick_size|1}}} |
| color = {{{color9|purple}}} | | color = {{{color9|purple}}} | ||
| stride = {{{stride|10}}} | | stride = {{{stride|10}}} | ||
| Line 78: | Line 78: | ||
<div class="thumbcaption"> | <div class="thumbcaption"> | ||
{{{caption|}}} | {{{caption|}}} | ||
| + | <div style="margin:{{{legend_margin|3px 0 0 10px}}};"> | ||
{{#if:{{{value1|}}}|{{legend|{{{color1|red}}}|{{{label1|}}} - {{{value1}}} {{{unit|%}}}}} | {{#if:{{{value1|}}}|{{legend|{{{color1|red}}}|{{{label1|}}} - {{{value1}}} {{{unit|%}}}}} | ||
}}{{#if:{{{value2|}}}|{{legend|{{{color2|green}}}|{{{label2|}}} - {{{value2}}} {{{unit|%}}}}} | }}{{#if:{{{value2|}}}|{{legend|{{{color2|green}}}|{{{label2|}}} - {{{value2}}} {{{unit|%}}}}} | ||
| Line 88: | Line 89: | ||
}}{{#if:{{{value9|}}}|{{legend|{{{color9|purple}}}|{{{label9|}}} - {{{value9}}} {{{unit|%}}}}} | }}{{#if:{{{value9|}}}|{{legend|{{{color9|purple}}}|{{{label9|}}} - {{{value9}}} {{{unit|%}}}}} | ||
}}{{#ifexpr:({{{value1|0}}}+{{{value2|0}}}+{{{value3|0}}}+{{{value4|0}}}+{{{value5|0}}}+{{{value6|0}}}+{{{value7|0}}}+{{{value8|0}}}+{{{value9|0}}})<{{{total|100}}}|{{legend|white|outline=silver|{{{other|other}}} - {{#expr:{{{total|100}}}-({{{value1|0}}}+{{{value2|0}}}+{{{value3|0}}}+{{{value4|0}}}+{{{value5|0}}}+{{{value6|0}}}+{{{value7|0}}}+{{{value8|0}}}+{{{value9|0}}})}} {{{unit|%}}}}}}} | }}{{#ifexpr:({{{value1|0}}}+{{{value2|0}}}+{{{value3|0}}}+{{{value4|0}}}+{{{value5|0}}}+{{{value6|0}}}+{{{value7|0}}}+{{{value8|0}}}+{{{value9|0}}})<{{{total|100}}}|{{legend|white|outline=silver|{{{other|other}}} - {{#expr:{{{total|100}}}-({{{value1|0}}}+{{{value2|0}}}+{{{value3|0}}}+{{{value4|0}}}+{{{value5|0}}}+{{{value6|0}}}+{{{value7|0}}}+{{{value8|0}}}+{{{value9|0}}})}} {{{unit|%}}}}}}} | ||
| + | </div><!--end div margin--> | ||
</div> | </div> | ||
</div> | </div> | ||
</div><noinclude>{{Documentation}}</noinclude> | </div><noinclude>{{Documentation}}</noinclude> | ||
Revision as of 05:26, 18 September 2012
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
- unitTemplate:Ns– 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
background:blue; float:left; clear:none; height:10%; overflow:hidden; width:Expression error: Unrecognized punctuation character "[".%;">
background:yellow; float:left; clear:none; height:10%; overflow:hidden; width:Expression error: Unrecognized punctuation character "[".%;">
background:magenta; float:left; clear:none; height:10%; overflow:hidden; width:Expression error: Unrecognized punctuation character "[".%;">
Expression error: Unrecognized punctuation character "[".<div style="
background:cyan; float:left; clear:none; height:10%; overflow:hidden; width:Expression error: Unrecognized punctuation character "[".%;
"> Expression error: Unrecognized punctuation character "[".
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.
{{Brick chart
| caption=Example of 6 amounts
| value1=42 | label1=one
| value2=32 | label2=two
| value3=12 | label3=three
| value4=3 | label4=four
| value5=2 | label5=five
| value6=0.4 | label6=six
}}
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.
background:#08f; float:left; clear:none; height:10%; overflow:hidden; width:Expression error: Unrecognized punctuation character "[".%;">
Religion in the Czech Republic
{{Brick chart
| caption=Religion in the Czech Republic
| label1 = [[Atheist]]s / [[agnostic]]s
| value1 = 59 | color1 = silver
| label2 = [[Catholic Church|Catholics]]
| value2 = 26.8 | color2 = #008
| label3 = [[Protestantism|Protestants]]
| value3 = 2.5 | color3 = #08f
| legend_margin=0 0 0 6px
}}
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).
background:red; float:left; clear:none; height:5%; overflow:hidden; width:Expression error: Unrecognized punctuation character "[".%;">
background:yellow; float:left; clear:none; height:5%; overflow:hidden; width:Expression error: Unrecognized punctuation character "[".%;">
Expression error: Unrecognized punctuation character "[".<div style="
background:#800; float:left; clear:none; height:5%; overflow:hidden; width:Expression error: Unrecognized punctuation character "[".%;
"> Expression error: Unrecognized punctuation character "[".<div style="
background:green; float:left; clear:none; height:5%; overflow:hidden; width:Expression error: Unrecognized punctuation character "[".%;
"> Expression error: Unrecognized punctuation character "[".
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.
{{Brick chart
|caption = Seats in the German federal parliament
|total = 614
|unit = seats
|stride = 20
|brick_size=2.6
|label1=[[Christian Democratic Union (Germany)
|Christian Democratic Union]]
| color1=black
| value1=180
|label2=[[Christian Social Union of Bavaria]]
| color2=#ccf
| value2=46
|label3=[[Social Democratic Party of Germany]]
| color3=red
| value3=222
|label4=[[Free Democratic Party]]
| color4=yellow
| value4=61
|label5=[[The Left Party.PDS]]
| color5=#800
| value5=54
|label6=[[Alliance '90/The Greens]]
| color6=green
| value6=51
}}
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}}
| The above documentation is transcluded from Template:Brick chart/doc. (edit | history) Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages. Please add categories to the /doc subpage. Subpages of this template. |