Content deleted Content added
→Examples: examples |
rm redundant cat |
||
| (6 intermediate revisions by 3 users not shown) | |||
Line 1:
{{Module rating|
<!-- Add categories where indicated at the bottom of this page and interwikis at Wikidata -->
Smooth
== 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|
== 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">
<templatestyles src="Piechart/style.css"/>▼
{{#invoke:Piechart|pie| [ {"value":33.3}, {} ] }}▼
▲{{Piechart| [ {"value":33.3}, {} ] }}
</syntaxhighlight>
{{
=== 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">
{{
{"label": "women: $v", "value": 33.3},
{"label": "men: $v"}
]
|thumb=none
|
}}
</syntaxhighlight>
{{
{"label": "women: $v", "value": 33.3},
{"label": "men: $v"}
]
|thumb=none
|
}}
Line 46 ⟶ 43:
<syntaxhighlight lang="wikitext">
{{
{"label": "women: $v", "value": 750},
{"label": "men: $v", "value": 250}
]
|thumb=none
|
}}
</syntaxhighlight>
{{
{"label": "women: $v", "value": 750},
{"label": "men: $v", "value": 250}
]
|thumb=none
|
}}
Line 63 ⟶ 62:
The module allows displaying multiple values, not just 2.
<syntaxhighlight lang="wikitext">
{{
{"label": "sweets: $v", "value": 5, "color":"darkred"},
{"label": "sandwiches: $v", "value": 3, "color":"wheat"},
Line 69 ⟶ 68:
{"label": "drinks: $v", "value": 1, "color":"#ccf"}
]
|thumb=none
|meta={"autoscale":true, "legend":true}
}}
</syntaxhighlight>
{{
{"label": "sweets: $v", "value": 5, "color":"darkred"},
{"label": "sandwiches: $v", "value": 3, "color":"wheat"},
Line 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 91 ⟶ 103:
* column-reverse – column layout, reversed (chart on top).
<syntaxhighlight lang="wikitext">
{{
{"label": "cookies: $v", "value": 2, "color":"goldenrod"},
{"label": "drinks: $v", "value": 1, "color":"#ccf"},
Line 97 ⟶ 109:
{"label": "sandwiches: $v", "value": 3, "color":"wheat"}
]
|thumb=none
|meta={"autoscale":true, "legend":true, "direction":"row-reverse"}
}}
Line 105 ⟶ 118:
<div style="border:1px solid darkgreen; padding: 0 .5em .5em">
'''row''' (default ''direction'')
{{
{"label": "cookies: $v", "value": 2, "color":"goldenrod"},
{"label": "drinks: $v", "value": 1, "color":"#ccf"},
Line 111 ⟶ 124:
{"label": "sandwiches: $v", "value": 3, "color":"wheat"}
]
|thumb=none
|meta={"autoscale":true, "legend":true, "direction":"row"}
}}
Line 116 ⟶ 130:
<div style="border:1px solid darkgreen; padding: 0 .5em .5em">
'''row-reverse'''
{{
{"label": "cookies: $v", "value": 2, "color":"goldenrod"},
{"label": "drinks: $v", "value": 1, "color":"#ccf"},
Line 122 ⟶ 136:
{"label": "sandwiches: $v", "value": 3, "color":"wheat"}
]
|thumb=none
|meta={"autoscale":true, "legend":true, "direction":"row-reverse"}
}}
Line 129 ⟶ 144:
<div style="border:1px solid darkgreen; padding: 0 .5em .5em">
'''column'''
{{
{"label": "cookies: $v", "value": 2, "color":"goldenrod"},
{"label": "drinks: $v", "value": 1, "color":"#ccf"},
Line 135 ⟶ 150:
{"label": "sandwiches: $v", "value": 3, "color":"wheat"}
]
|thumb=none
|meta={"autoscale":true, "legend":true, "direction":"column"}
}}
Line 140 ⟶ 156:
<div style="border:1px solid darkgreen; padding: 0 .5em .5em">
'''column-reverse'''
{{
{"label": "cookies: $v", "value": 2, "color":"goldenrod"},
{"label": "drinks: $v", "value": 1, "color":"#ccf"},
Line 146 ⟶ 162:
{"label": "sandwiches: $v", "value": 3, "color":"wheat"}
]
|thumb=none
|meta={"autoscale":true, "legend":true, "direction":"column-reverse"}
}}
Line 154 ⟶ 171:
== Direct functions ==
In case you want to use without the {{t|
* <code><nowiki>{{</nowiki>#invoke:Piechart|''pie''<nowiki>|json_data|meta=json_options}}</nowiki></code>
* <code><nowiki>{{</nowiki>#invoke:Piechart|''color''<nowiki>|number}}</nowiki></code>
Note that direct calls to the ''pie'' function require adding CSS:
<syntaxhighlight lang="javascript">
▲{{#invoke:Piechart|pie| [ {"value":33.3}, {} ] }}
</syntaxhighlight>
Example of '''json_data''':
Line 177 ⟶ 200:
All meta options are optional (see `<code>function p.setupOptions</code>`).
▲]]
== Feature requests ==
For feature requests and bugs write to me, the author of the
{{Template:Graph, chart and plot templates}}
<includeonly>{{Sandbox other||▼
<!-- Categories below this line; interwikis at Wikidata -->▼
▲<includeonly>{{Sandbox other||
▲<!-- Categories below this line, please; interwikis at Wikidata -->
[[Category:Chart, diagram and graph formatting and function templates]]
}}</includeonly>
| |||