TwitterFacebookDiscord

Difference between revisions of "User:Simpsons88/Pie chart"

Wikisimpsons - The Simpsons Wiki
< User:Simpsons88
(Created page with "<includeonly><div style="width:{{{size|200}}}px; height:{{{size|200}}}px; border-radius: 50%; background: {{#ifexpr: ({{{a1|0}}}+{{{a2|0}}}+{{{a3|0}}}+{{{a4|0}}}+{{{a5|0}}}) =...")
 
 
Line 1: Line 1:
−
<includeonly><div style="width:{{{size|200}}}px; height:{{{size|200}}}px; border-radius: 50%;
+
<includeonly>
 +
{| style="background:#F9F9F9; width:{{{size|200}}}px; border:1px dotted gray; padding:3px"
 +
! {{{title|Pie chart title}}}
 +
|-
 +
| style="padding:5px" |
 +
<div style="width:{{{size|200}}}px; height:{{{size|200}}}px; border-radius: 50%;
 
background:
 
background:
−
{{#ifexpr: ({{{a1|0}}}+{{{a2|0}}}+{{{a3|0}}}+{{{a4|0}}}+{{{a5|0}}}) = 0 |
+
{{#ifexpr:  
 +
  ({{#if:{{{a1|}}}|{{{a1}}}|0}} + {{#if:{{{a2|}}}|{{{a2}}}|0}} + {{#if:{{{a3|}}}|{{{a3}}}|0}} + {{#if:{{{a4|}}}|{{{a4}}}|0}} + {{#if:{{{a5|}}}|{{{a5}}}|0}}) = 0 |
 
   lightgray
 
   lightgray
 
|
 
|
 
   conic-gradient(
 
   conic-gradient(
−
     #FFD700 0% {{#expr: {{{a1|0}}}*100/({{{a1|0}}}+{{{a2|0}}}+{{{a3|0}}}+{{{a4|0}}}+{{{a5|0}}}) round 0}}%,
+
     #F19424 0% {{#expr: {{#if:{{{a1|}}}|{{{a1}}}|0}}*100/({{#if:{{{a1|}}}|{{{a1}}}|0}}+{{#if:{{{a2|}}}|{{{a2}}}|0}}+{{#if:{{{a3|}}}|{{{a3}}}|0}}+{{#if:{{{a4|}}}|{{{a4}}}|0}}+{{#if:{{{a5|}}}|{{{a5}}}|0}}) round 0}}%,
−
     #FFEB3B {{#expr: {{{a1|0}}}*100/({{{a1|0}}}+{{{a2|0}}}+{{{a3|0}}}+{{{a4|0}}}+{{{a5|0}}}) round 0}}% {{#expr: ({{{a1|0}}}+{{{a2|0}}})*100/({{{a1|0}}}+{{{a2|0}}}+{{{a3|0}}}+{{{a4|0}}}+{{{a5|0}}}) round 0}}%,
+
     #D94F03 {{#expr: {{#if:{{{a1|}}}|{{{a1}}}|0}}*100/({{#if:{{{a1|}}}|{{{a1}}}|0}}+{{#if:{{{a2|}}}|{{{a2}}}|0}}+{{#if:{{{a3|}}}|{{{a3}}}|0}}+{{#if:{{{a4|}}}|{{{a4}}}|0}}+{{#if:{{{a5|}}}|{{{a5}}}|0}}) round 0}}% {{#expr: ({{#if:{{{a1|}}}|{{{a1}}}|0}}+{{#if:{{{a2|}}}|{{{a2}}}|0}})*100/({{#if:{{{a1|}}}|{{{a1}}}|0}}+{{#if:{{{a2|}}}|{{{a2}}}|0}}+{{#if:{{{a3|}}}|{{{a3}}}|0}}+{{#if:{{{a4|}}}|{{{a4}}}|0}}+{{#if:{{{a5|}}}|{{{a5}}}|0}}) round 0}}%,
−
     #F0E68C {{#expr: ({{{a1|0}}}+{{{a2|0}}})*100/({{{a1|0}}}+{{{a2|0}}}+{{{a3|0}}}+{{{a4|0}}}+{{{a5|0}}}) round 0}}% {{#expr: ({{{a1|0}}}+{{{a2|0}}}+{{{a3|0}}})*100/({{{a1|0}}}+{{{a2|0}}}+{{{a3|0}}}+{{{a4|0}}}+{{{a5|0}}}) round 0}}%,
+
     #E3C960 {{#expr: ({{#if:{{{a1|}}}|{{{a1}}}|0}}+{{#if:{{{a2|}}}|{{{a2}}}|0}})*100/({{#if:{{{a1|}}}|{{{a1}}}|0}}+{{#if:{{{a2|}}}|{{{a2}}}|0}}+{{#if:{{{a3|}}}|{{{a3}}}|0}}+{{#if:{{{a4|}}}|{{{a4}}}|0}}+{{#if:{{{a5|}}}|{{{a5}}}|0}}) round 0}}% {{#expr: ({{#if:{{{a1|}}}|{{{a1}}}|0}}+{{#if:{{{a2|}}}|{{{a2}}}|0}}+{{#if:{{{a3|}}}|{{{a3}}}|0}})*100/({{#if:{{{a1|}}}|{{{a1}}}|0}}+{{#if:{{{a2|}}}|{{{a2}}}|0}}+{{#if:{{{a3|}}}|{{{a3}}}|0}}+{{#if:{{{a4|}}}|{{{a4}}}|0}}+{{#if:{{{a5|}}}|{{{a5}}}|0}}) round 0}}%,
−
     #FFD966 {{#expr: ({{{a1|0}}}+{{{a2|0}}}+{{{a3|0}}})*100/({{{a1|0}}}+{{{a2|0}}}+{{{a3|0}}}+{{{a4|0}}}+{{{a5|0}}}) round 0}}% {{#expr: ({{{a1|0}}}+{{{a2|0}}}+{{{a3|0}}}+{{{a4|0}}})*100/({{{a1|0}}}+{{{a2|0}}}+{{{a3|0}}}+{{{a4|0}}}+{{{a5|0}}}) round 0}}%,
+
     #BDA522 {{#expr: ({{#if:{{{a1|}}}|{{{a1}}}|0}}+{{#if:{{{a2|}}}|{{{a2}}}|0}}+{{#if:{{{a3|}}}|{{{a3}}}|0}})*100/({{#if:{{{a1|}}}|{{{a1}}}|0}}+{{#if:{{{a2|}}}|{{{a2}}}|0}}+{{#if:{{{a3|}}}|{{{a3}}}|0}}+{{#if:{{{a4|}}}|{{{a4}}}|0}}+{{#if:{{{a5|}}}|{{{a5}}}|0}}) round 0}}% {{#expr: ({{#if:{{{a1|}}}|{{{a1}}}|0}}+{{#if:{{{a2|}}}|{{{a2}}}|0}}+{{#if:{{{a3|}}}|{{{a3}}}|0}}+{{#if:{{{a4|}}}|{{{a4}}}|0}})*100/({{#if:{{{a1|}}}|{{{a1}}}|0}}+{{#if:{{{a2|}}}|{{{a2}}}|0}}+{{#if:{{{a3|}}}|{{{a3}}}|0}}+{{#if:{{{a4|}}}|{{{a4}}}|0}}+{{#if:{{{a5|}}}|{{{a5}}}|0}}) round 0}}%,
−
     #FFFACD {{#expr: ({{{a1|0}}}+{{{a2|0}}}+{{{a3|0}}}+{{{a4|0}}})*100/({{{a1|0}}}+{{{a2|0}}}+{{{a3|0}}}+{{{a4|0}}}+{{{a5|0}}}) round 0}}% 100%
+
     #CC8D1A {{#expr: ({{#if:{{{a1|}}}|{{{a1}}}|0}}+{{#if:{{{a2|}}}|{{{a2}}}|0}}+{{#if:{{{a3|}}}|{{{a3}}}|0}}+{{#if:{{{a4|}}}|{{{a4}}}|0}})*100/({{#if:{{{a1|}}}|{{{a1}}}|0}}+{{#if:{{{a2|}}}|{{{a2}}}|0}}+{{#if:{{{a3|}}}|{{{a3}}}|0}}+{{#if:{{{a4|}}}|{{{a4}}}|0}}+{{#if:{{{a5|}}}|{{{a5}}}|0}}) round 0}}% 100%
 
   )
 
   )
−
}};
+
}}; border: 7px solid #FFDC76;">
−
border: 3px solid #DAA520;">
+
</div>
−
</div></includeonly><noinclude>
+
|-
 +
| style="padding:5px; font-size:80%" |
 +
{| style="width:100%; background:white; border:1px dotted gray; padding:3px"
 +
|
 +
{{#ifexpr: {{#if:{{{a1|}}}|{{{a1}}}|0}} > 0 |
 +
<div style="display:inline-flex; align-items:center"><div style="width:10px; height:10px; border:1px solid gray; background:#F19424"></div>&nbsp;{{#expr: {{#if:{{{a1|}}}|{{{a1}}}|0}}*100 / ({{#if:{{{a1|}}}|{{{a1}}}|0}} + {{#if:{{{a2|}}}|{{{a2}}}|0}} + {{#if:{{{a3|}}}|{{{a3}}}|0}} + {{#if:{{{a4|}}}|{{{a4}}}|0}} + {{#if:{{{a5|}}}|{{{a5}}}|0}}) round 0}}% - {{{d1|Description 1}}}</div>
 +
}}<!--
 +
-->{{#ifexpr: {{#if:{{{a2|}}}|{{{a2}}}|0}} > 0 |
 +
<br><div style="display:inline-flex; align-items:center"><div style="width:10px; height:10px; border:1px solid gray; background:#D94F03"></div>&nbsp;{{#expr: {{#if:{{{a2|}}}|{{{a2}}}|0}}*100 / ({{#if:{{{a1|}}}|{{{a1}}}|0}} + {{#if:{{{a2|}}}|{{{a2}}}|0}} + {{#if:{{{a3|}}}|{{{a3}}}|0}} + {{#if:{{{a4|}}}|{{{a4}}}|0}} + {{#if:{{{a5|}}}|{{{a5}}}|0}}) round 0}}% - {{{d2|Description 2}}}</div>
 +
}}<!--
 +
-->{{#ifexpr: {{#if:{{{a3|}}}|{{{a3}}}|0}} > 0 |
 +
<br><div style="display:inline-flex; align-items:center"><div style="width:10px; height:10px; border:1px solid gray; background:#E3C960"></div>&nbsp;{{#expr: {{#if:{{{a3|}}}|{{{a3}}}|0}}*100 / ({{#if:{{{a1|}}}|{{{a1}}}|0}} + {{#if:{{{a2|}}}|{{{a2}}}|0}} + {{#if:{{{a3|}}}|{{{a3}}}|0}} + {{#if:{{{a4|}}}|{{{a4}}}|0}} + {{#if:{{{a5|}}}|{{{a5}}}|0}}) round 0}}% - {{{d3|Description 3}}}</div>
 +
}}<!--
 +
-->{{#ifexpr: {{#if:{{{a4|}}}|{{{a4}}}|0}} > 0 |
 +
<br><div style="display:inline-flex; align-items:center"><div style="width:10px; height:10px; border:1px solid gray; background:#BDA522"></div>&nbsp;{{#expr: {{#if:{{{a4|}}}|{{{a4}}}|0}}*100 / ({{#if:{{{a1|}}}|{{{a1}}}|0}} + {{#if:{{{a2|}}}|{{{a2}}}|0}} + {{#if:{{{a3|}}}|{{{a3}}}|0}} + {{#if:{{{a4|}}}|{{{a4}}}|0}} + {{#if:{{{a5|}}}|{{{a5}}}|0}}) round 0}}% - {{{d4|Description 4}}}</div>
 +
}}<!--
 +
-->{{#ifexpr: {{#if:{{{a5|}}}|{{{a5}}}|0}} > 0 |
 +
<br><div style="display:inline-flex; align-items:center"><div style="width:10px; height:10px; border:1px solid gray; background:#CC8D1A"></div>&nbsp;{{#expr: {{#if:{{{a5|}}}|{{{a5}}}|0}}*100 / ({{#if:{{{a1|}}}|{{{a1}}}|0}} + {{#if:{{{a2|}}}|{{{a2}}}|0}} + {{#if:{{{a3|}}}|{{{a3}}}|0}} + {{#if:{{{a4|}}}|{{{a4}}}|0}} + {{#if:{{{a5|}}}|{{{a5}}}|0}}) round 0}}% - {{{d5|Description 5}}}</div>
 +
}}
 +
|}
 +
|}</includeonly><noinclude>
  
 
== Use ==
 
== Use ==
Line 20: Line 46:
 
<pre>
 
<pre>
 
{{User:Simpsons88/Pie chart
 
{{User:Simpsons88/Pie chart
 +
|title =
 
|d1 =  | a1 =  
 
|d1 =  | a1 =  
 
|d2 =  | a2 =  
 
|d2 =  | a2 =  
Line 28: Line 55:
 
</pre>
 
</pre>
  
−
Additional parameters: Size (in px), and colors (c1, ..., c5).
+
=== Examples ===
 +
{|
 +
| style="vertical-align:top" |
 
<pre>
 
<pre>
−
|size =  
+
{{User:Simpsons88/Pie chart
−
|c1 =  
+
|title = Example 1
−
...
+
|d1 = Slice 1 | a1 = 25
−
|c5 =  
+
|d2 = Slice 2 | a2 = 25
 +
|d3 = Slice 3 | a3 = 50
 +
}}
 
</pre>
 
</pre>
 +
| style="vertical-align:top" |
 +
<pre>
 +
{{User:Simpsons88/Pie chart
 +
|title = Example 2
 +
|d1 = Slice 1 | a1 = 20
 +
|d2 = Slice 2 | a2 = 20
 +
|d3 = Slice 3 | a3 = 20
 +
|d4 = Slice 4 | a4 = 20
 +
|d5 = Slice 5 | a5 = 20
 +
}}
 +
</pre>
 +
|-
 +
| style="vertical-align:top" |
 +
{{User:Simpsons88/Pie chart
 +
|title = Example 1
 +
|d1 = Slice 1 | a1 = 25
 +
|d2 = Slice 2 | a2 = 25
 +
|d3 = Slice 3 | a3 = 50
 +
}}
 +
| style="vertical-align:top" |
 +
{{User:Simpsons88/Pie chart
 +
|title = Example 2
 +
|d1 = Slice 1 | a1 = 20
 +
|d2 = Slice 2 | a2 = 20
 +
|d3 = Slice 3 | a3 = 20
 +
|d4 = Slice 4 | a4 = 20
 +
|d5 = Slice 5 | a5 = 20
 +
}}
 +
|}</noinclude>

Latest revision as of 14:41, May 8, 2025


Use[edit]

Up to five slices. Insert descriptions (Text/Wikilinks) and amounts (Numbers). 

{{User:Simpsons88/Pie chart
|title = 
|d1 =  | a1 = 
|d2 =  | a2 = 
|d3 =  | a3 = 
|d4 =  | a4 = 
|d5 =  | a5 = 
}}

Examples[edit]

{{User:Simpsons88/Pie chart
|title = Example 1
|d1 = Slice 1 | a1 = 25
|d2 = Slice 2 | a2 = 25
|d3 = Slice 3 | a3 = 50
}}

{{User:Simpsons88/Pie chart
|title = Example 2
|d1 = Slice 1 | a1 = 20
|d2 = Slice 2 | a2 = 20
|d3 = Slice 3 | a3 = 20
|d4 = Slice 4 | a4 = 20
|d5 = Slice 5 | a5 = 20
}}
Example 1
 25% - Slice 1

 25% - Slice 2

 50% - Slice 3
Example 2
 20% - Slice 1

 20% - Slice 2

 20% - Slice 3

 20% - Slice 4

 20% - Slice 5
Retrieved from "https://simpsonswiki.com/w/index.php?title=User:Simpsons88/Pie_chart&oldid=1390839"
  • Modified on May 8, 2025, at 14:41.
  • Attribution-ShareAlike 3.0 Unported
  • Powered by MediaWiki