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

From blackwiki
Jump to navigation Jump to search
imported>Temporaluser
(+cat)
imported>Wikid77
(new section "Performance considerations".)
Line 1: Line 1:
 
{{Documentation subpage}}
 
{{Documentation subpage}}
 
<!-- PLEASE ADD CATEGORIES AND INTERWIKIS AT THE BOTTOM OF THIS PAGE -->
 
<!-- PLEASE ADD CATEGORIES AND INTERWIKIS AT THE BOTTOM OF THIS PAGE -->
 +
 
Draws "brick charts" (poor man's substitute for pie charts), useful for showing percentages, seats in a legislature, etc.
 
Draws "brick charts" (poor man's substitute for pie charts), useful for showing percentages, seats in a legislature, etc.
  
Line 16: Line 17:
 
=== Examples ===
 
=== Examples ===
  
{{Brick chart
+
{{Brick chart |style=Bricks
|value1=42
+
|value1=42 | label1=one
|label1=one
+
|value2=32 | label2=two
|value2=32
+
|value3=12 | label3=three
|label2=two
+
|value4=3 | label4=four
|value3=12
+
|value5=2 | label5=five
|label3=three
+
|value6=1 | label6=six
|value4=3
 
|label4=four
 
|value5=2
 
|label5=five
 
|value6=1
 
|label6=six
 
 
}}
 
}}
  
{{Brick chart
+
{{Brick chart |style=Bricks
 
|caption = religion in the Czech republic
 
|caption = religion in the Czech republic
 
|label1 = [[Atheism|Atheists]] and [[Agnosticism|agnostics]]
 
|label1 = [[Atheism|Atheists]] and [[Agnosticism|agnostics]]
Line 44: Line 39:
 
}}
 
}}
  
{{Brick chart
+
{{Brick chart |style=Bricks
 
|caption = Seats in the German federal parliamet
 
|caption = Seats in the German federal parliamet
 
|total = 614
 
|total = 614
Line 50: Line 45:
 
|stride = 20
 
|stride = 20
 
|brick_size=10
 
|brick_size=10
 
 
|label1=[[Christian Democratic Union (Germany)|Christian Democratic Union]]
 
|label1=[[Christian Democratic Union (Germany)|Christian Democratic Union]]
|color1=black
+
  | color1=black
|value1=180
+
  | value1=180
 
 
 
|label2=[[Christian Social Union of Bavaria]]
 
|label2=[[Christian Social Union of Bavaria]]
|color2=#ccf
+
  | color2=#ccf
|value2=46
+
  | value2=46
 
 
 
|label3=[[Social Democratic Party of Germany]]
 
|label3=[[Social Democratic Party of Germany]]
|color3=red
+
  | color3=red
|value3=222
+
  | value3=222
 
 
 
|label4=[[Free Democratic Party (Germany)|Free Democratic Party]]
 
|label4=[[Free Democratic Party (Germany)|Free Democratic Party]]
|color4=yellow
+
  | color4=yellow
|value4=61
+
  | value4=61
 
 
 
|label5=[[The Left Party.PDS]]
 
|label5=[[The Left Party.PDS]]
|color5=#800
+
  | color5=#800
|value5=54
+
  | value5=54
 
 
 
|label6=[[Alliance '90/The Greens]]
 
|label6=[[Alliance '90/The Greens]]
|color6=green
+
  | color6=green
|value6=51
+
  | value6=51
 
}}
 
}}
 +
 +
== 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.
  
 
=== See also ===
 
=== See also ===
 
* {{tl|Visualizer}}
 
* {{tl|Visualizer}}
 +
* {{tl|Pie chart}}
  
 
<includeonly>
 
<includeonly>

Revision as of 09:02, 17 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
  • thumb = (left|right) where to thumb 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 "[".

  one - 42 %
  two - 32 %
  three - 12 %
  four - 3 %
  five - 2 %
  six - 1 %
  other - 8 %

<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 and agnostics - 59 %
  Catholics - 26.8 %
  Protestants - 2.5 %
  other - 11.7 %

<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 parliamet

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