Difference between revisions of "Template:Brick chart/doc"

From blackwiki
Jump to navigation Jump to search
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 |style=Bricks
+
{{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=1 | label6=six
+
| 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 |style=Bricks
+
{{Brick chart
|caption = religion in the Czech republic
+
| caption=Religion in the Czech republic
|label1 = [[Atheism|Atheists]] and [[Agnosticism|agnostics]]
+
| 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 parliamet
+
|caption = Seats in the German federal parliament
 
|total = 614
 
|total = 614
 
|unit = seats
 
|unit = seats
 
|stride = 20
 
|stride = 20
|brick_size=10
+
|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

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

<div style="

 background:red;
 float:left;         
 clear:left;
 height:10%;
 overflow:hidden;
 width:Expression error: Unrecognized punctuation character "[".%;
"> 
Expression error: Unrecognized punctuation character "[".<div style="
 background:green;
 float:left;         
 clear:none;
 height:10%;
 overflow:hidden;
 width:Expression error: Unrecognized punctuation character "[".%;
"> 
Expression error: Unrecognized punctuation character "[".<div style="
 background:blue;
 float:left;         
 clear:none;
 height:10%;
 overflow:hidden;
 width:Expression error: Unrecognized punctuation character "[".%;
"> 
Expression error: Unrecognized punctuation character "[".<div style="
 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

  one - 42 %
  two - 32 %
  three - 12 %
  four - 3 %
  five - 2 %
  six - 0.4 %
  other - 8.6 %

<div style="

 background:silver;
 float:left;         
 clear:left;
 height:10%;
 overflow:hidden;
 width:Expression error: Unrecognized punctuation character "[".%;
"> 
Expression error: Unrecognized punctuation character "[".<div style="
 background:#008;
 float:left;         
 clear:none;
 height:10%;
 overflow:hidden;
 width:Expression error: Unrecognized punctuation character "[".%;
"> 
Expression error: Unrecognized punctuation character "[".<div style="
 background:#08f;
 float:left;         
 clear:none;
 height:10%;
 overflow:hidden;
 width:Expression error: Unrecognized punctuation character "[".%;
"> 
Expression error: Unrecognized punctuation character "[".

Religion in the Czech republic

  Atheists / agnostics - 59 %
  Catholics - 26.8 %
  Protestants - 2.5 %
  other - 11.7 %

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).

<div style="

 background:black;
 float:left;         
 clear:left;
 height:5%;
 overflow:hidden;
 width:Expression error: Unrecognized punctuation character "[".%;
"> 
Expression error: Unrecognized punctuation character "[".<div style="
 background:#ccf;
 float:left;         
 clear:none;
 height:5%;
 overflow:hidden;
 width:Expression error: Unrecognized punctuation character "[".%;
"> 
Expression error: Unrecognized punctuation character "[".<div style="
 background:red;
 float:left;         
 clear:none;
 height:5%;
 overflow:hidden;
 width:Expression error: Unrecognized punctuation character "[".%;
"> 
Expression error: Unrecognized punctuation character "[".<div style="
 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