Template:Brick chart/doc

{	"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" }

Examples
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. Note how the bottom value,, 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:.

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

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.

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.