Module:Piechart/doc: Difference between revisions

Smooth piechart module.

Usage

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

Minimalistic

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

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

1. women: 33.3%
2. men: 66.7%

Automatic Scaling

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

1. women: 750 (75.0%)
2. men: 250 (25.0%)

Multiple Values

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

1. sweets: 5 (45.5%)
2. sandwiches: 3 (27.3%)
3. cookies: 2 (18.2%)
4. drinks: 1 (9.09%)

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

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)

1. cookies: 2 (18.2%)
2. drinks: 1 (9.09%)
3. sweets: 5 (45.5%)
4. sandwiches: 3 (27.3%)

row-reverse

1. cookies: 2 (18.2%)
2. drinks: 1 (9.09%)
3. sweets: 5 (45.5%)
4. sandwiches: 3 (27.3%)

column

1. cookies: 2 (18.2%)
2. drinks: 1 (9.09%)
3. sweets: 5 (45.5%)
4. sandwiches: 3 (27.3%)

column-reverse

1. cookies: 2 (18.2%)
2. drinks: 1 (9.09%)
3. sweets: 5 (45.5%)
4. sandwiches: 3 (27.3%)

Green frames added for clarity in examples. They are not normally added.

Direct functions

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

For feature requests and bugs write to me, the author of the piecharte module: Maciej Nux.

See also

• {{Pie chart}}, also pie, but with classic template parameters (enumerated); that chart is shown on the right (like a thumbnail image).