<pie-chart> and <progress-circle> examples

Load

<script src="https://pie-meister.github.io/PieMeister.min.js"></script>
            OR
<script src="https://pie-meister.github.io/PieMeister-with-Progress.min.js"></script>

Use

Then ALL HTML required to display a pie-chart is:

The <pie-chart> Web Component processes all innerHTML <slice> elements and creates an SVG Element in shadowDOM

The style element is copied to shadowDOM

Apple $size Strawberry $size Pumpkin $size Cherry‍‍ $size Blueberry $size Lemon $size Chocolate $size Other $size

- documentation

Minimal HTML to happieness.

Get 6 colors free

Mark the first <slice> as a percentage size="10%" to create a 100 percent pie

Specify the distance with pull="100" and which slice to pull

The SVG has a default 1000 x 1000 units viewBox
pull="100" creates a 1100x1100 viewBox so pulled slices are not cut off

Add a <style> tag to activate labels.

If a custom label is declared, the word '$size' is replaced.

An empty <slice> auto-completes a percentage pie

Red! $size Blue!

Similar concept to pull

labels can be pulled with pulltext= in or outward from the slice middle point

Format a single slice

See F12 console: There are plenty of extra attributes available to play with

Add any SVG you want

The SVG <circle>, <text> and <style> elements become part of the created <svg> element

$size to go! Pie Meister

SVG Fill patterns

As the <pie-chart> element copies all SVG, you can apply all SVG patterns,masks,animations you can find online.

Note: in SVG, styles have higher Specificity than SVG element attributes

Thus an inline style is used to override the stroke color.

Set the (default) stroke-width="500" to a lower value to create a Donut chart

A negative pull value pull="-85" makes the viewBox smaller, removing (unwanted) padding.

The <slice size="20" pull> is still pulled outward

Slices can have different pull and stroke-width values.

If you know SVG: all <slice> attributes are copied to the SVG <path> element

80 120 160 default 200

fill="stroke-width" on the <pie-chart> makes the <slice> stroke-width start from the Pie Chart center, creating a Polar chart

300 200 300 400 500 default

Don't like the 6 default colors? Specify an array of colors: stroke="blue,red,green"

And/or color a slice stroke="gold".

The slice stroke="gold" 'saves' using a color from the stroke array

<pie-chart> Challenge: Radiation

Now knowing <pie-chart> syntax; how would you create this?

How many slices do you see?
How many circles do you see?
Hint: The first slice starts at the top

Progress Circle

Use SVG tspan (textspan) elements to create more complex labels.

See the <progress-circle> below for a advanced version

$size Progress

Recreating Google Analytics multiple percentages

By adding extra slices, that always start at offset="top"
and clever CSS translating the label locations
this chart with 4 percentages can be created.

The <progress-circle> Web Component (below) creates this <pie-chart> code in 6 HTML lines

SEO $size Social $size Maps $size Traffic $size

<progress-circle> Web Component

Is built on top of the PieMeister Base Class and converts innerHTML to <pie-chart> notation

The previous 30 lines HTML/CSS code can now be written as:

SEO Social Maps Traffic

A single <progress-circle> Element

can be configured with Attributes:

width
fill
stroke
color
edge

When no label is defined the presentation defaults to a large value in equal color.

width=50

fill=lightgreen

stroke=red

color=red

edge=red

- Notes

(contrary to HTML) <style> definitions overrule attributes on SVG elements
<circle /> self-closing tags do not work
A <slice> is converted to a SVG <path>, it can only contain SVG Elements not HTML elements
```
<slize size="10"><span> HTML here breaks the SVG </span></slice>
```
Fun fact: does not use any Pi calculations!

GZip analysis

PieMeister code is an optimized balance between function, size and performance

Blue is best compression, Red is worst compression

Can you squeeze out more bytes?

PieMeister:

PieMeister with Progress:

- Experiments

CSS filter styles all SVG elements.

Maybe create multiple SVGs, for slices and labels, and stack them, like done in the ChessMeister Chessboard experiment

Label