Module:Piechart/doc
![]() | This is a documentation subpage for Module:Piechart. It may contain usage information, categories and other content that is not part of the original module page. |
Smooth piechart module.
Usage
[edit]Draws charts in HTML with an accessible legend (optional). A list of all features is in the "TODO" section of the main `p.pie` function.
Most of the time you should use with a helper template that adds required CSS: {{Piechart}}.
Examples
[edit]Minimalistic
[edit]Note that you don't need to provide the second value as it's calculated (assuming they sum up to 100).
{{Piechart| [ {"value":33.3}, {} ] }}
Labels and Legend
[edit]Here we add some custom labels. Also note that we add a meta option to add legend on the side.
{{Piechart| [
{"label": "women: $v", "value": 33.3},
{"label": "men: $v"}
]
| meta = {"legend":true}
}}
- women: 33.3%
- men: 66.7%
Automatic Scaling
[edit]In cases where you don't have calculated percentages, you can use automatic scaling. Just provide both values in this case.
{{Piechart| [
{"label": "women: $v", "value": 750},
{"label": "men: $v", "value": 250}
]
| meta = {"legend":true}
}}
- women: 750 (75.0%)
- men: 250 (25.0%)
Multiple Values
[edit]The module allows displaying multiple values, not just 2.
{{Piechart| [
{"label": "sweets: $v", "value": 5, "color":"darkred"},
{"label": "sandwiches: $v", "value": 3, "color":"wheat"},
{"label": "cookies: $v", "value": 2, "color":"goldenrod"},
{"label": "drinks: $v", "value": 1, "color":"#ccf"}
]
|meta={"autoscale":true, "legend":true}
}}
- sweets: 5 (45.5%)
- sandwiches: 3 (27.3%)
- cookies: 2 (18.2%)
- drinks: 1 (9.1%)
Note that in this case, it was necessary to provide the additional option "autoscale":true
. This is necessary when the sum is less than 100.
Legend and Its Position
[edit]The legend is added using the meta property legend as shown. However, you can also change the order using direction. Possible values include:
- row (default) – order is list, chart;
- row-reverse – reverse order, i.e., chart, list;
- column – column layout (vertical).
- column-reverse – column layout, reversed (chart on top).
{{Piechart| [
{"label": "cookies: $v", "value": 2, "color":"goldenrod"},
{"label": "drinks: $v", "value": 1, "color":"#ccf"},
{"label": "sweets: $v", "value": 5, "color":"darkred"},
{"label": "sandwiches: $v", "value": 3, "color":"wheat"}
]
|meta={"autoscale":true, "legend":true, "direction":"row-reverse"}
}}
row (default direction)
- cookies: 2 (18.2%)
- drinks: 1 (9.1%)
- sweets: 5 (45.5%)
- sandwiches: 3 (27.3%)
row-reverse
- cookies: 2 (18.2%)
- drinks: 1 (9.1%)
- sweets: 5 (45.5%)
- sandwiches: 3 (27.3%)
column
- cookies: 2 (18.2%)
- drinks: 1 (9.1%)
- sweets: 5 (45.5%)
- sandwiches: 3 (27.3%)
column-reverse
- cookies: 2 (18.2%)
- drinks: 1 (9.1%)
- sweets: 5 (45.5%)
- sandwiches: 3 (27.3%)
Green frames added for clarity in examples. They are not normally added.
Direct functions
[edit]In case you want to use without the {{Piechart}} template, you can use this main functions:
{{#invoke:Piechart|pie|json_data|meta=json_options}}
{{#invoke:Piechart|color|number}}
Note that direct calls to the pie function require adding CSS:
<templatestyles src="Piechart/style.css"/>
{{#invoke:Piechart|pie| [ {"value":33.3}, {} ] }}
Example of json_data:
[
{ "label": "pie: $v", "color": "wheat", "value": 40 },
{ "label": "cheese pizza $v", "color": "#fc0", "value": 20 },
{ "label": "mixed pizza: $v", "color": "#f60", "value": 20 },
{ "label": "raw pizza $v", "color": "#f30" }
]
- Note that the last value is missing. The last value is optional as long as the values are intended to sum up to 100 (as in 100%).
- Notice
$v
label, this is a formatted number (see `function prepareLabel
`). - Colors are hex or names. Default palette is in shades of green.
Example of meta=json_options:
|meta = {"size":200, "autoscale":false, "legend":true}
All meta options are optional (see `function p.setupOptions
`).
Feature requests
[edit]For feature requests and bugs write to me, the author of the piecharte module: Maciej Nux.
See also
[edit]- {{Pie chart}}, also pie, but with classic template parameters (enumerated); that chart is shown on the right (like a thumbnail image).