Content deleted Content added
←Created page with '{{Module rating|beta<!-- Values: pre-alpha • alpha • beta • release • protected • semiprotected -- If a rating not needed/relevant, delete this template call -->}} <!-- Add categories where indicated at the bottom of this page and interwikis at Wikidata --> 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 ti...' |
→Examples: examples |
||
Line 12:
== Examples ==
=== Minimalistic ===
<syntaxhighlight lang="wikitext" lang="javascript"></syntaxhighlight>
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}, {} ] }}
OR
{{Piechart| [ {"value":33.3}, {} ] }}
</syntaxhighlight>
{{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.
<syntaxhighlight lang="wikitext">
{{Piechart| [
{"label": "women: $v", "value": 33.3},
{"label": "men: $v"}
]
| meta = {"legend":true}
}}
</syntaxhighlight>
{{Piechart| [
{"label": "women: $v", "value": 33.3},
{"label": "men: $v"}
]
| meta = {"legend":true}
}}
=== Automatic Scaling ===
In cases where you don't have calculated percentages, you can use automatic scaling. Just provide both values in this case.
<syntaxhighlight lang="wikitext">
{{Piechart| [
{"label": "women: $v", "value": 750},
{"label": "men: $v", "value": 250}
]
| meta = {"legend":true}
}}
</syntaxhighlight>
{{Piechart| [
{"label": "women: $v", "value": 750},
{"label": "men: $v", "value": 250}
]
| meta = {"legend":true}
}}
=== Multiple Values ===
The module allows displaying multiple values, not just 2.
<syntaxhighlight lang="wikitext">
{{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}
}}
</syntaxhighlight>
{{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}
}}
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.
== 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).
<syntaxhighlight lang="wikitext">
{{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"}
}}
</syntaxhighlight>
<div class="wikiflex" style="display:flex; gap: 1em; flex-wrap: wrap;"><!-- top -->
<div class="wikiflex" style="display:flex; gap: 1em; align-items: flex-start; flex-wrap: wrap;"><!-- -->
<div style="border:1px solid darkgreen; padding: 0 .5em .5em">
'''row''' (default ''direction'')
{{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"}
}}
</div>
<div style="border:1px solid darkgreen; padding: 0 .5em .5em">
'''row-reverse'''
{{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"}
}}
</div>
<!-- --></div>
<div class="wikiflex" style="display:flex; gap: 1em; align-items: flex-start; flex-wrap: wrap;"><!-- -->
<div style="border:1px solid darkgreen; padding: 0 .5em .5em">
'''column'''
{{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":"column"}
}}
</div>
<div style="border:1px solid darkgreen; padding: 0 .5em .5em">
'''column-reverse'''
{{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":"column-reverse"}
}}
</div>
<!-- --></div>
<!-- top --></div>
Green frames added for clarity in examples. They are not normally added.
== Direct functions ==
| |||