Difference between revisions of "Template:Brick chart/doc"
imported>Wikid77 (→Parameters: +option "align=left") |
imported>Wikid77 (→Examples: introduced the 3 examples as "<pre>" format; for German parliament, set new brick_size=2.6; noted option "legend_margin") |
||
| Line 16: | Line 16: | ||
=== Examples === | === Examples === | ||
| + | {{Brick chart |style=Bricks | ||
| + | | 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 | ||
| + | }} | ||
| − | {{Brick chart | | + | {{Brick chart |
| − | |value1=42 | label1=one | + | | caption=Religion in the Czech republic |
| − | |value2=32 | label2=two | + | | label1 = [[Atheist]]s / [[agnostic]]s |
| − | |value3=12 | label3=three | + | | value1 = 59 | color1 = silver |
| − | |value4=3 | label4=four | + | | label2 = [[Catholic Church|Catholics]] |
| − | |value5=2 | label5=five | + | | value2 = 26.8 | color2 = #008 |
| − | |value6= | + | | label3 = [[Protestantism|Protestants]] |
| + | | value3 = 2.5 | color3 = #08f | ||
| + | | legend_margin=0 0 0 6px | ||
| + | }} | ||
| + | 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. | ||
| + | <pre> | ||
| + | {{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 | ||
}} | }} | ||
| − | {{Brick chart | + | {{Brick chart |
| − | |caption = | + | | caption=Religion in the Czech republic |
| − | |label1 = [[ | + | | label1 = [[Atheist]]s / [[agnostic]]s |
| − | |value1 = 59 | + | | value1 = 59 | color1 = silver |
| − | |color1 = silver | + | | label2 = [[Catholic Church|Catholics]] |
| − | |label2 = [[Catholic Church|Catholics]] | + | | value2 = 26.8 | color2 = #008 |
| − | |value2 = 26.8 | + | | label3 = [[Protestantism|Protestants]] |
| − | |color2 = #008 | + | | value3 = 2.5 | color3 = #08f |
| − | |label3 = [[Protestantism|Protestants]] | + | | legend_margin=0 0 0 6px |
| − | |value3 = 2.5 | ||
| − | |color3 = #08f | ||
}} | }} | ||
| + | </pre> | ||
| + | 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 color model|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 6px from the left margin (default: 3px 0 0 10px). | ||
| + | {{clear}} | ||
{{Brick chart |style=Bricks | {{Brick chart |style=Bricks | ||
| − | |caption = Seats in the German federal | + | |caption = Seats in the German federal parliament |
|total = 614 | |total = 614 | ||
|unit = seats | |unit = seats | ||
|stride = 20 | |stride = 20 | ||
| − | |brick_size= | + | |brick_size=2.6 |
|label1=[[Christian Democratic Union (Germany)|Christian Democratic Union]] | |label1=[[Christian Democratic Union (Germany)|Christian Democratic Union]] | ||
| color1=black | | color1=black | ||
| Line 64: | Line 90: | ||
| value6=51 | | value6=51 | ||
}} | }} | ||
| + | '''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. | ||
| + | |||
| + | <pre> | ||
| + | {{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 | ||
| + | }} | ||
| + | </pre> | ||
== Performance considerations == | == Performance considerations == | ||
Revision as of 07:22, 18 September 2012
| This is a documentation subpage for Template:Brick chart. It contains usage information, categories and other content that is not part of the original template page. |
Draws "brick charts" (poor man's substitute for pie charts), useful for showing percentages, seats in a legislature, etc.
Parameters
- value1-value9 = values for each category. Values must be integers ("2"), not fractions ("1/2") or decimals ("2.1").
- label1-label9 = labels for each category, displayed in the legend
- color1-color9 = html colors to be used for each category, 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".
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 "[".%;">
Expression error: Unrecognized punctuation character "[".<div style="
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
background:#08f; float:left; clear:none; height:10%; overflow:hidden; width:Expression error: Unrecognized punctuation character "[".%;">
Religion in the Czech republic
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.
{{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
}}
{{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 6px 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
- {{Visualizer}}
- {{Pie chart}}