Module:Piechart/doc: Difference between revisions

Smooth pie chart module. Accessed via Template:Pie chart.

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: {{Pie chart}}.

Examples

Minimalistic

Note that you don't need to provide the second value as it's calculated (assuming they sum up to 100).

{{Pie chart| [ {"value":33.3},  {} ] |thumb=none}}

Labels and Legend

Here we add some custom labels. Also note that we add a meta option to add legend on the side.

{{Pie chart| [
 {"label": "women: $v", "value": 33.3},
 {"label": "men: $v"}
]
|thumb=none
|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.

{{Pie chart| [
 {"label": "women: $v", "value": 750},
 {"label": "men: $v", "value": 250}
]
|thumb=none
|meta = {"legend":true}
}}

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

Multiple Values

The module allows displaying multiple values, not just 2.

{{Pie chart| [
 {"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"}
]
|thumb=none
|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.

Links

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

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

{{Pie chart| [
 {"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"}
]
|thumb=none
|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 {{Pie chart}} 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="Pie chart/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 piechart 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).