Module:Piechart/doc: Difference between revisions

Revision as of 11:49, 11 February 2024

Latest revision as of 02:24, 24 April 2025

(4 intermediate revisions by 2 users not shown)

Line 2:

<!-- Add categories where indicated at the bottom of this page and interwikis at Wikidata -->

Smooth piechartpie chart module. Accessed via [[Template:Pie chart]].

== Usage ==

Line 8:

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

== Examples ==

Line 16:

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

<syntaxhighlight lang="wikitext">

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

</syntaxhighlight>

{{PiechartPie 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.

<syntaxhighlight lang="wikitext">

{{PiechartPie chart| [

{"label": "women: $v", "value": 33.3},

{"label": "men: $v"}

]

|thumb=none

| meta = {"legend":true}

}}

</syntaxhighlight>

{{PiechartPie chart| [

{"label": "women: $v", "value": 33.3},

{"label": "men: $v"}

]

|thumb=none

| meta = {"legend":true}

}}

Line 41 ⟶ 43:

<syntaxhighlight lang="wikitext">

{{PiechartPie chart| [

{"label": "women: $v", "value": 750},

{"label": "men: $v", "value": 250}

]

|thumb=none

| meta = {"legend":true}

}}

</syntaxhighlight>

{{PiechartPie chart| [

{"label": "women: $v", "value": 750},

{"label": "men: $v", "value": 250}

]

|thumb=none

| meta = {"legend":true}

}}

Line 58 ⟶ 62:

The module allows displaying multiple values, not just 2.

<syntaxhighlight lang="wikitext">

{{PiechartPie chart| [

{"label": "sweets: $v", "value": 5, "color":"darkred"},

{"label": "sandwiches: $v", "value": 3, "color":"wheat"},

Line 64 ⟶ 68:

{"label": "drinks: $v", "value": 1, "color":"#ccf"}

]

|thumb=none

|meta={"autoscale":true, "legend":true}

}}

</syntaxhighlight>

{{PiechartPie chart| [

{"label": "sweets: $v", "value": 5, "color":"darkred"},

{"label": "sandwiches: $v", "value": 3, "color":"wheat"},

Line 73 ⟶ 78:

{"label": "drinks: $v", "value": 1, "color":"#ccf"}

]

|thumb=none

|meta={"autoscale":true, "legend":true}

}}

Note that in this case, it was necessary to provide the additional option <code>"autoscale":true</code>. This is necessary when the sum is less than 100.

=== Links ===

{{Pie chart| [

{"label": "[[candy|sweets]]: $v", "value": 5, "color":"darkred"},

{"label": "[[sandwich]]es: $v", "value": 3, "color":"wheat"},

{"label": "[[cookie]]s: $v", "value": 2, "color":"goldenrod"},

{"label": "[[drink]]s: $v", "value": 1, "color":"#ccf"}

]

|thumb=none

|meta={"autoscale":true, "legend":true}

}}

== Legend and Its Position ==

Line 86 ⟶ 103:

* column-reverse – column layout, reversed (chart on top).

<syntaxhighlight lang="wikitext">

{{PiechartPie chart| [

{"label": "cookies: $v", "value": 2, "color":"goldenrod"},

{"label": "drinks: $v", "value": 1, "color":"#ccf"},

Line 92 ⟶ 109:

{"label": "sandwiches: $v", "value": 3, "color":"wheat"}

]

|thumb=none

|meta={"autoscale":true, "legend":true, "direction":"row-reverse"}

}}

Line 100 ⟶ 118:

<div style="border:1px solid darkgreen; padding: 0 .5em .5em">

'''row''' (default ''direction'')

{{PiechartPie chart| [

{"label": "cookies: $v", "value": 2, "color":"goldenrod"},

{"label": "drinks: $v", "value": 1, "color":"#ccf"},

Line 106 ⟶ 124:

{"label": "sandwiches: $v", "value": 3, "color":"wheat"}

]

|thumb=none

|meta={"autoscale":true, "legend":true, "direction":"row"}

}}

Line 111 ⟶ 130:

<div style="border:1px solid darkgreen; padding: 0 .5em .5em">

'''row-reverse'''

{{PiechartPie chart| [

{"label": "cookies: $v", "value": 2, "color":"goldenrod"},

{"label": "drinks: $v", "value": 1, "color":"#ccf"},

Line 117 ⟶ 136:

{"label": "sandwiches: $v", "value": 3, "color":"wheat"}

]

|thumb=none

|meta={"autoscale":true, "legend":true, "direction":"row-reverse"}

}}

Line 124 ⟶ 144:

<div style="border:1px solid darkgreen; padding: 0 .5em .5em">

'''column'''

{{PiechartPie chart| [

{"label": "cookies: $v", "value": 2, "color":"goldenrod"},

{"label": "drinks: $v", "value": 1, "color":"#ccf"},

Line 130 ⟶ 150:

{"label": "sandwiches: $v", "value": 3, "color":"wheat"}

]

|thumb=none

|meta={"autoscale":true, "legend":true, "direction":"column"}

}}

Line 135 ⟶ 156:

<div style="border:1px solid darkgreen; padding: 0 .5em .5em">

'''column-reverse'''

{{PiechartPie chart| [

{"label": "cookies: $v", "value": 2, "color":"goldenrod"},

{"label": "drinks: $v", "value": 1, "color":"#ccf"},

Line 141 ⟶ 162:

{"label": "sandwiches: $v", "value": 3, "color":"wheat"}

]

|thumb=none

|meta={"autoscale":true, "legend":true, "direction":"column-reverse"}

}}

Line 149 ⟶ 171:

== Direct functions ==

In case you want to use without the {{t|PiechartPie chart}} template, you can use this main functions:

* <code><nowiki>{{</nowiki>#invoke:Piechart|''pie''<nowiki>|json_data|meta=json_options}}</nowiki></code>

* <code><nowiki>{{</nowiki>#invoke:Piechart|''color''<nowiki>|number}}</nowiki></code>

Line 155 ⟶ 177:

Note that direct calls to the ''pie'' function require adding CSS:

<syntaxhighlight lang="javascript">

<templatestyles src="PiechartPie chart/style.css"/>

{{#invoke:Piechart|pie| [ {"value":33.3}, {} ] }}

</syntaxhighlight>

Line 180 ⟶ 202:

== Feature requests ==

For feature requests and bugs write to me, the author of the piechartepiechart module: [[User:Nux|Maciej Nux]].

== See also ==

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

{{Template:Graph, chart and plot templates}}

Line 190 ⟶ 209:

<!-- Categories below this line, please; interwikis at Wikidata -->

[[Category:Chart, diagram and graph formatting and function templates]]

[[Category:Graph, chart and plot templates]]

}}</includeonly>