Module:Chart/doc

From Wikimedia District of Columbia
< Module:Chart
Revision as of 01:33, 1 September 2014 by Kirill Lokshin (talk | contribs) (1 revision: Module:Chart and dependencies from Meta)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

This is the documentation page for Module:Chart

Module Chart exports two functions: bar chart and pie chart

Drawing Bar charts: "bar chart"

Parameters

parameter name what it does
delimiter string to delimit multiple values when given. default to colon ( : ). normally you do not want to touch this, it's provided for the off-chance you'll want to use colon as part of one of the parameters.
width number. if provided, must be at least 200. default: 500
height number. if provided, must be at least 200. default: 350
group n (where "n" is a number. use "group 1", "group 2" etc. for as many groups as there are in the graph) the values to be charted. see below.
tooltip n tooltip to be associated with specific bar. If no tooltip for a specific bar is defined, and this bar has a link, then this link will be used as tooltip. Otherwise, the tooltip will be combined from the group name and the value, optionally with "units prefix" and "units suffix".
links n links to articles to be associated with specific bar
stack whether to stack the different groups on top of each other. do not specify to show bars side by side. Any non-empty value means "yes". To say "no", simply do not supply this parameter at all, or leave the value blank.
tooltip value accumulation useful only with stack: when set to true, tooltip will show accumulated value of all blocks up to current one
colors the colors used to denote the various groups. should have exactly as many values as # of groups. can be given as standard html-recognized color names, or using #xxx or #xxxxxx notation.
x legends The legends for the X values. Wikicode, such as internal links or templates can be used.
hide group legends if set to true, group legends will not be shown below chart. Any non-empty value means "yes". To say "no", simply do not supply this parameter at all, or leave the value blank.
scale per group set to use separate Y- scale for each group. leave empty to use one scale for all groups. incompatible with "stack". Note that even if some of the scales are exactly the same, they will be drawn separately when this setting is on. Any non-empty value means "yes". To say "no", simply do not supply this parameter at all, or leave the value blank.
units prefix used in tooltip. e.g., $, so values will show as "$500" instead of "500" in the tooltip
units suffix ditto for units suffix. use, e.g. "Kg" so values will show as 88Kg instead of 88 in tooltip. underscore ("_") are replaced by spaces, to allow a space between the value and the suffix.
group names names of different groups

Examples

Basic

{{ #invoke:Chart | bar chart
| group 1 = 40 : 50 : 60 : 20
| group 2 = 20 : 60 : 12 : 44
| group 3 = 55 : 14 : 33 : 5
| links 1 = Apple : McCintosh : Golden delicious
| links 2 = Banana : Apricot : Peach
| links 3 = Orange : Pear : Bear
| tooltip 2 = tooltip 1 : tooltip 2 : tooltip 3 : tooltip 4
| colors = green : yellow : orange
| group names = Apple : Banana : Orange
| x legends = Before : During : After : Post mortem
}}


Transparent.png
Transparent.png
Transparent.png
tooltip 1
tooltip 2
tooltip 3
Transparent.png
Transparent.png
Transparent.png
10
20
30
40
50
60
70
Before
During
After
Post mortem
  •   Apple
  •   Banana
  •   Orange


Stacked

Here is the same graph, with more modest height and width, using "stack", and adding "units suffix" for good measure:

{{ #invoke:Chart | bar chart
| height = 250
| width = 300
| stack = 1
| group 1 = 40 : 50 : 60 : 20
| group 2 = 20 : 60 : 12 : 44
| group 3 = 55 : 14 : 33 : 5
| colors = green : yellow : orange
| group names = Apple : Banana : Orange
| units suffix = Kg
| x legends = Before : During : After : Post mortem
}}
25
50
75
100
125
150
Before
During
After
Post mortem
  •   Apple
  •   Banana
  •   Orange


Scale per group

It is possible to show each of the groups using different scale and units:

{{ #invoke:Chart | bar chart
| width = 800
| group 1 = 1500000 : 2500000 : 3500000
| group 2 = 200 : 5000 : 45000
| group 3 = 2000 : 5000 : 20000
| colors = red : blue : green
| group names = People : Cars : Average car cost
| x legends = 1920 : 1965 : 2002
| tooltip 2 = : There is no good data for number of cars in 1965. we use 5,000 as best estimate
| units prefix = : : $
| scale per group = 1
}}

Notice the "units prefix" field: we do not need prefix for the first 2 groups, so we use colons with no content. we could write "::$" instead of " : : $".

Also note the special tooltip for the "Cars" number for 1965.


1,000,000
2,000,000
3,000,000
4,000,000
10,000
20,000
30,000
40,000
50,000
5,000
10,000
15,000
20,000
25,000
30,000
1920
1965
2002
  •   People
  •   Cars
  •   Average car cost
{{ #invoke:Chart | bar chart
| width = 800
| group 1 = 1500000 : 2500000 : 3500000
| group 2 = 200 : 5000 : 45000
| group 3 = 2000 : 5000 : 20000
| colors = red : blue : green
| group names = People : Cars : Average car cost
| x legends = 1920 : 1965 : 2002
| tooltip 2 = : There is no good data for number of cars in 1965. we use 5,000 as best estimate
| units prefix = : : $
| scale per group = 1
}}

Notice the "units prefix" field: we do not need prefix for the first 2 groups, so we use colons with no content. we could write "::$" instead of " : : $".

Also note the special tooltip for the "Cars" number for 1965.


Here is an example with large number of groups - mainly to test how does it look with large number of legends.

25
50
75
100
125
150
1920
1930
1940
1950
1960
1970
1990
2000
2010
  •   Alabama
  •   Alaska
  •   Arizona
  •   Arkansas
  •   California
  •   Colorado
  •   Connecticut
  •   Delaware
  •   Florida
  •   Georgia
  •   Hawaii
  •   Idaho
  •   Illinois
  •   Indiana
  •   Iowa
  •   Kansas
  •   Kentucky
  •   Louisiana
  •   Maine
  •   Maryland
  •   Massachusetts


If there are many values, x legends can be diluted by using delimiters with nothing in between:


{{ #invoke:Chart | bar chart
| group 1 = 1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:24:25:26:27:28:29:30
:31:32:33:34:35:36:37:38:39:40:41:42:43:44:45:46:47:48:49:50:51:52:53:54:55:56:57:58:59
| units suffix = _Things
| group names = Some
| x legends = ::::1940::::::::::1950::::::::::1960::::::::::1970::::::::::1980::::::::::1990::::
}}
10
20
30
40
50
60
1940
1950
1960
1970
1980
1990


Drawing Pie charts: "pie chart"

Parameters

parameter name what it does
delimiter string to delimit multiple values when given. default to colon ( : ). normally you do not want to touch this, it's provided for the off-chance you'll want to use colon as part of one of the parameters.
radius number. The radius of the pie in pixels
slices Tupples, in parenthesis. Use delimiter inside the tupple:
( Value1 : Name1 : Color1 : Link1  ) ( Value2 : Name2 : Color2 : Link2 ) ...

The values are numbers. The numbers can be integers or decimal fractions, or using the scientific notation: 7.24e6, 7,240,000, or 7240000.00 are all acceptable for 7 Million and 240 thousands.

Names are strings. Colors are optional. you can use any Web colors, such as "red" or "#FF0000". Up to 26 default colors are defined, but if your pie has more than 26 slices, you must define the colors of slice #27 and up. Links can be external or internal links, including linking to internal anchors and paragraphs in the same article, like so: [[Article|Tooltip]] for internal link, [[#Paragraph name|Tooltip]] for linking to an anchor in same article, or [http://example.org Tooltip] for external link.

slice n alternative syntax to "alices". n is the slice number, beginning with 1. make sure not to skip: if you define "slice 1", "slice 2", "slice 4", "slice 5"..., skipping slice 3, only the first two slices will be shown. this syntax is incompatible with "slices", i.e., they should not be used in conjunction in the same invocation. Using both "slices" and "slice n" in the same invocation will cause unpredictable results. The value is like a single "tupple" as explained above, but without the parenthesis:
 | slice 1 = Value1 : Name1 : Color1 : Link1
 | slice 2 = Value2 : Name2 : Color2 : Link2
 | ...

This syntax allows you to use parenthesis in names, links, and colors.

percent if used, the percentage of each slice will be calculated and added to the legend: so if you have two slices, like so: ( 1 : Younglings ) ( 3 : elders ), and use define "percent", the legends will become "Younglings: 1 (25%)" and "Elders: 3 (75%)", instead of simply "Younglings: 1" and "Elders: 3". Any non-empty value means "yes". To say "no", simply do not supply this parameter at all, or leave the value blank.
units prefix used in the legend. e.g., defining "units prefix=$", values will show as "$500" instead of "500" in the legends
units suffix ditto for units suffix. use, e.g. "Kg" so values will show as 88Kg instead of 88 in legend. underscore ("_") are replaced by spaces, to allow a space between the value and the suffix.
hide group legends Setting to true prevents displaying of the group legends under the chart. Any non-empty value means "yes". To say "no", simply do not supply this parameter at all, or leave the value blank.

Examples

{{#invoke:Chart|pie chart
| radius = 150
| slices = 
    ( 1000000 : Apples ) 
    ( 2000000 : Bananas  : gold) 
    ( 1440000 : Apricots ) 
    ( 6.4e5 : Pears : : [[Pear|Pears]] )
    ( 750,000 : Pineapples )
| units suffix = _Tonne
| percent = true
}}

Note that we can leave the color empty to use the default, but in order to add the link to "Pear", 
we had to mark the parameter by adding an extra delimiter to mark the omitted color parameter   

Also note that the values can be provided with "language specific" format (like 1,000), 
or scientific notation like 6.4e5. In the legends, numbers will always be displayed in 
language-adjusted mode (can look different if module imported to other wikis).

<imagemap> Image:Circle frame.svg|300px poly 100 100 200 100 199 99 199 97 199 95 199 93 199 91 199 89 199 87 198 85 198 83 198 81 197 79 197 77 196 75 196 73 195 71 194 69 194 67 193 65 192 63 192 62 191 60 190 58 189 56 188 54 187 53 186 51 185 49 184 47 183 46 182 44 181 42 180 41 178 39 177 38 176 36 175 35 173 33 172 32 171 30 169 29 168 27 166 26 165 25 163 23 162 22 160 21 158 20 157 19 155 17 154 16 152 15 150 14 148 13 147 12 100 100 Apples: 1,000,000 Tonne (17.2%) poly 100 100 147 12 145 11 143 11 141 10 140 9 138 8 136 7 134 7 132 6 130 5 128 5 126 4 125 4 123 3 121 3 119 2 117 2 115 2 113 1 111 1 109 1 107 1 105 1 103 1 101 1 99 1 97 1 95 1 93 1 91 1 89 1 87 1 85 2 83 2 81 2 79 3 77 3 75 4 73 4 71 5 69 5 67 6 65 6 64 7 62 8 60 9 58 9 56 10 54 11 53 12 51 13 49 14 47 15 46 16 44 17 42 18 41 20 39 21 38 22 36 23 35 24 33 26 32 27 30 28 29 30 27 31 26 33 25 34 23 36 22 37 21 39 20 40 18 42 17 44 16 45 15 47 14 49 13 50 12 52 11 54 10 56 9 58 8 59 8 61 7 63 6 65 5 67 5 69 4 71 4 72 3 74 2 76 2 78 2 80 1 82 1 84 1 86 0 88 0 90 0 92 0 94 0 96 0 98 0 100 0 102 0 104 0 106 0 108 0 110 100 100 Bananas: 2,000,000 Tonne (34.3%) poly 100 100 0 110 0 112 0 114 1 116 1 118 1 120 2 122 2 123 3 125 3 127 4 129 4 131 5 133 6 135 6 137 7 139 8 141 9 142 10 144 10 146 11 148 12 149 13 151 14 153 15 155 16 156 18 158 19 160 20 161 21 163 22 164 24 166 25 167 26 169 28 170 29 172 31 173 32 174 34 176 35 177 37 178 38 180 40 181 41 182 43 183 45 184 46 185 48 186 50 187 52 188 53 189 55 190 57 191 59 192 61 193 62 193 64 194 66 195 68 195 70 196 72 197 74 197 76 198 78 198 80 199 82 199 84 199 86 200 88 200 90 200 92 200 94 200 96 200 98 200 100 200 102 200 104 200 106 200 107 200 100 100 Apricots: 1,440,000 Tonne (24.7%) poly 100 100 107 200 109 200 111 200 113 200 115 199 117 199 119 199 121 198 123 198 125 197 126 197 128 196 130 196 132 195 134 194 136 194 138 193 140 192 141 191 143 190 145 190 147 189 149 188 150 187 152 186 154 185 155 183 157 182 159 181 160 180 162 179 163 177 165 176 166 175 168 173 169 173 100 100 Pears poly 100 100 169 173 170 171 171 170 173 169 174 167 175 166 177 164 178 162 179 161 180 159 182 158 183 156 184 154 185 153 186 151 187 149 188 147 189 146 190 144 190 142 191 140 192 138 193 137 193 135 194 133 195 131 195 129 196 127 196 125 197 123 197 121 198 119 198 117 198 115 199 113 199 111 199 109 199 107 199 105 199 103 199 101 200 101 100 100 Pineapples: 750,000 Tonne (12.9%) desc none </imagemap>

  •   Apples: 1,000,000 Tonne (17.2%)
  •   Bananas: 2,000,000 Tonne (34.3%)
  •   Apricots: 1,440,000 Tonne (24.7%)
  •   Pears: 640,000 Tonne (11.0%)
  •   Pineapples: 750,000 Tonne (12.9%)


An example for the alternative syntax with "slice 1", "slice 2" etc.

{{#invoke:chart|pie chart
|radius= 200
|units suffix = _Units
| slice 1 = 1 : 1
| slice 2 = 7 : 7
| slice 3 = 8 : 8
| slice 4 = 9 : 9
| slice 5 = 10 : 10
| slice 6 = 11 : 11
| slice 7  = 12 : 12
| slice 8  = 13 : 13
| slice 9  = 14 : 14
| slice 10 = 15 : 15
| slice 11 = 16 : 16
| slice 12 = 17 : 17
| slice 13 = 18 : 18
| slice 14 = 19 : 19
| slice 15 = 20 : 20
| slice 16 = 21 : 21
| slice 17 = 22 : 22
| slice 18 = 23 : 23
| slice 19 = 24 : 24
| slice 20 = 25 : 25
| slice 21 = 26 : 26
| slice 22 = 27 : 27
| slice 23 = 28 : 28
| slice 24 = 29 : 29
| slice 25 = 30 : 30
| slice 26 = 31 : 31
| percent = true
}}

<imagemap> Image:Circle frame.svg|400px poly 100 100 200 100 199 99 100 100 1: 1 Units (0.2%) poly 100 100 199 99 199 97 199 95 199 93 199 91 199 90 100 100 7: 7 Units (1.5%) poly 100 100 199 90 199 88 198 86 198 84 198 82 197 80 197 80 100 100 8: 8 Units (1.7%) poly 100 100 197 80 197 78 196 76 196 74 195 72 195 70 194 68 100 100 9: 9 Units (1.9%) poly 100 100 194 68 193 66 193 64 192 62 191 61 190 59 190 57 189 56 100 100 10: 10 Units (2.1%) poly 100 100 189 56 188 54 187 52 186 51 185 49 184 47 183 46 182 44 182 43 100 100 11: 11 Units (2.3%) poly 100 100 182 43 180 42 179 40 178 39 177 37 176 36 174 34 173 33 172 31 100 100 12: 12 Units (2.5%) poly 100 100 172 31 170 30 169 28 167 27 166 26 164 24 163 23 161 22 160 21 159 20 100 100 13: 13 Units (2.7%) poly 100 100 159 20 157 19 155 18 154 17 152 15 150 14 149 13 147 12 145 12 143 11 143 10 100 100 14: 14 Units (2.9%) poly 100 100 143 10 141 10 139 9 137 8 136 7 134 7 132 6 130 5 128 5 126 4 124 4 100 100 15: 15 Units (3.2%) poly 100 100 124 4 122 3 120 3 118 2 116 2 115 2 113 1 111 1 109 1 107 1 105 1 103 1 100 100 16: 16 Units (3.4%) poly 100 100 103 1 101 1 99 1 97 1 95 1 93 1 91 1 89 1 87 1 86 1 84 2 82 2 81 2 100 100 17: 17 Units (3.6%) poly 100 100 81 2 79 3 77 3 75 3 73 4 71 5 69 5 68 6 66 6 64 7 62 8 60 9 59 9 100 100 18: 18 Units (3.8%) poly 100 100 59 9 57 10 55 11 53 12 51 13 50 14 48 15 46 16 44 17 43 18 41 19 40 20 38 22 37 22 100 100 19: 19 Units (4.0%) poly 100 100 37 22 36 24 34 25 33 26 31 28 30 29 28 30 27 32 25 33 24 35 23 36 22 38 20 39 19 41 19 41 100 100 20: 20 Units (4.2%) poly 100 100 19 41 18 43 17 45 16 46 14 48 13 50 12 51 11 53 11 55 10 57 9 58 8 60 7 62 6 64 6 66 100 100 21: 21 Units (4.4%) poly 100 100 6 66 5 67 4 69 4 71 3 73 3 75 2 77 2 79 1 81 1 83 1 85 0 87 0 89 0 91 0 93 0 94 100 100 22: 22 Units (4.6%) poly 100 100 0 94 0 96 0 98 0 100 0 102 0 104 0 106 0 108 0 110 0 112 0 114 1 116 1 118 1 120 2 122 2 124 2 124 100 100 23: 23 Units (4.8%) poly 100 100 2 124 3 126 3 128 4 130 5 132 5 134 6 136 7 137 7 139 8 141 9 143 10 145 11 146 12 148 13 150 14 152 14 153 100 100 24: 24 Units (5.0%) poly 100 100 14 153 16 155 17 157 18 158 19 160 20 161 21 163 23 164 24 166 25 168 27 169 28 170 29 172 31 173 32 175 34 176 35 177 36 178 100 100 25: 25 Units (5.3%) poly 100 100 36 178 38 179 39 180 41 182 43 183 44 184 46 185 48 186 49 187 51 188 53 189 55 190 56 191 58 192 60 192 62 193 64 194 66 195 66 195 100 100 26: 26 Units (5.5%) poly 100 100 66 195 68 195 70 196 72 197 73 197 75 198 77 198 79 198 81 199 83 199 85 199 87 200 89 200 91 200 93 200 95 200 97 200 99 200 101 200 100 100 27: 27 Units (5.7%) poly 100 100 101 200 103 200 105 200 107 200 109 200 111 200 113 200 115 199 117 199 119 199 121 198 123 198 125 197 126 197 128 196 130 196 132 195 134 194 136 194 137 193 100 100 28: 28 Units (5.9%) poly 100 100 137 193 139 192 141 192 142 191 144 190 146 189 148 188 149 187 151 186 153 185 155 184 156 183 158 182 159 181 161 179 163 178 164 177 166 175 167 174 169 173 169 173 100 100 29: 29 Units (6.1%) poly 100 100 169 173 170 171 172 170 173 168 174 167 176 165 177 164 178 162 179 161 181 159 182 157 183 156 184 154 185 152 186 151 187 149 188 147 189 145 190 144 191 142 191 140 100 100 30: 30 Units (6.3%) poly 100 100 191 140 192 138 193 137 193 135 194 133 195 131 195 129 196 127 196 125 197 123 197 121 198 119 198 117 198 115 199 113 199 111 199 109 199 107 199 105 199 103 199 101 200 101 100 100 31: 31 Units (6.5%) desc none </imagemap>

  •   1: 1 Units (0.2%)
  •   7: 7 Units (1.5%)
  •   8: 8 Units (1.7%)
  •   9: 9 Units (1.9%)
  •   10: 10 Units (2.1%)
  •   11: 11 Units (2.3%)
  •   12: 12 Units (2.5%)
  •   13: 13 Units (2.7%)
  •   14: 14 Units (2.9%)
  •   15: 15 Units (3.2%)
  •   16: 16 Units (3.4%)
  •   17: 17 Units (3.6%)
  •   18: 18 Units (3.8%)
  •   19: 19 Units (4.0%)
  •   20: 20 Units (4.2%)
  •   21: 21 Units (4.4%)
  •   22: 22 Units (4.6%)
  •   23: 23 Units (4.8%)
  •   24: 24 Units (5.0%)
  •   25: 25 Units (5.3%)
  •   26: 26 Units (5.5%)
  •   27: 27 Units (5.7%)
  •   28: 28 Units (5.9%)
  •   29: 29 Units (6.1%)
  •   30: 30 Units (6.3%)
  •   31: 31 Units (6.5%)