တူၺ်းငဝ်ႈငႃႇ တွၼ်ႈတႃႇ ထႅမ်းပလဵတ်ႉ:Brick chart/doc

{{Documentation subpage}}
<!-- PLEASE ADD CATEGORIES WHERE INDICATED AT THE BOTTOM OF THIS PAGE -->
{{TemplateData header}}
<templatedata>
{
	"params": {
		"thumb": {
			"label": "Alignment",
			"description": "Align graph to left or right of page (floating), centre it, or no alignment option.",
			"type": "string",
			"suggestedvalues": [
				"left",
				"right",
				"none",
				"center"
			]
		},
		"style": {
			"label": "Style",
			"description": "Additional CSS for container",
			"type": "string"
		},
		"width": {
			"label": "Width",
			"description": "Width in pixels",
			"type": "number",
			"default": "180"
		},
		"total": {
			"label": "Total",
			"description": "The total number of bricks (defaults to 100)",
			"type": "number",
			"default": "100"
		},
		"stride": {
			"label": "Stride",
			"description": "The number of bricks in each row, defaults to 10.",
			"type": "number",
			"default": "10"
		},
		"value1": {
			"label": "Value 1",
			"description": "Values for each brick. Values can be integers, decimals (\"2.4\"), formulas, or use '+' in mixed number fractions (\"3+1/2\").",
			"type": "unknown",
			"required": true
		},
		"brick_size": {
			"label": "Brick size",
			"description": "Value represented by one brick - defaults to one.",
			"type": "number"
		},
		"color1": {
			"label": "Colour 1",
			"description": "CSS colour of each brick, defaults to various colours. E.g. red, blue, #893.",
			"default": "red"
		},
		"value2": {
			"label": "Value 2",
			"required": true
		},
		"color2": {
			"label": "Colour 2",
			"type": "string",
			"default": "green"
		},
		"value3": {},
		"color3": {
			"label": "Color 3",
			"default": "blue"
		},
		"value4": {},
		"color4": {
			"label": "Color 4",
			"default": "yellow"
		},
		"value5": {},
		"color5": {
			"label": "Color 5",
			"default": "magenta"
		},
		"value6": {},
		"color6": {
			"label": "Color 6",
			"default": "cyan"
		},
		"value7": {},
		"color7": {
			"label": "Color 7",
			"default": "brown"
		},
		"value8": {},
		"color8": {
			"label": "Color 8",
			"default": "orange"
		},
		"value9": {},
		"color9": {
			"label": "Color 9",
			"default": "purple"
		},
		"caption": {
			"label": "Caption",
			"type": "line"
		},
		"legend_margin": {
			"label": "Legend margin",
			"description": "A CSS margin value to override the default",
			"type": "string"
		},
		"label1": {
			"label": "Label 1",
			"description": "Legend label for the first brick.",
			"type": "line",
			"required": true
		},
		"unit": {
			"label": "Unit",
			"description": "Unit to display in the legend, default to %",
			"type": "string"
		},
		"label2": {
			"label": "Label 2",
			"type": "line",
			"suggested": true
		},
		"label3": {
			"label": "Label 3",
			"type": "line",
			"suggested": true
		},
		"label4": {
			"label": "Label 4",
			"type": "line",
			"suggested": true
		},
		"label5": {
			"label": "Label 5",
			"type": "line",
			"suggested": true
		},
		"label6": {
			"label": "Label 6",
			"type": "line",
			"suggested": true
		},
		"label7": {
			"label": "Label 7",
			"type": "line",
			"suggested": true
		},
		"label8": {
			"label": "Label 8",
			"type": "line",
			"suggested": true
		},
		"label9": {
			"label": "Label 9",
			"type": "line",
			"suggested": true
		},
		"other": {
			"label": "\"Other\" label",
			"description": "Legend for the leftover space in the graph, defaults to \"Other\".",
			"type": "line"
		}
	},
	"description": "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.\n"
}
</templatedata>

=== 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
}}
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.
<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
}}
</pre>
Note how the bottom value, <code>value6=0.4</code>, 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: <code>color1, color2, color3</code>.
{{clear}}<hr width=380px>
{{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
}}
<pre>
{{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
}}
</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 6 [[pixels]] from the left margin (default: 3px 0 0 10px).
{{clear}}
{{Brick chart |style=Bricks
|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 (Germany)|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
}}
'''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 ==
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.

== တူၺ်းပႃး ==
* {{tl|Pie chart}}

{{Graph, chart and plot templates}}

<includeonly>{{Sandbox other|
| <!-- CATEGORIES BELOW THIS LINE, PLEASE: -->
[[Category:Chart, diagram and graph formatting and function templates]]
}}</includeonly>