Jump to content

Module:Piechart/doc

From Wikipedia, the free encyclopedia


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}
}}
  1. women: 33.3%
  2. 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}
}}
  1. women: 750 (75.0%)
  2. 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}
}}
  1. sweets: 5 (45.5%)
  2. sandwiches: 3 (27.3%)
  3. cookies: 2 (18.2%)
  4. 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)

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

row-reverse

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

column

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

column-reverse

  1. cookies: 2 (18.2%)
  2. drinks: 1 (9.1%)
  3. sweets: 5 (45.5%)
  4. 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).