Examples for indirect use of jquery-progresspiesvg.js via progresspiesvgAppl.js

Default mode:

<span class="progresspie">100</span> %

0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %

<span class="progressring">100</span> %

0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %

Predefined modes

Color mode (dynamic color)

<span class="progresspie color">100</span> %

0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %

<span class="progressring color">100</span> %

0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %

Green mode (static color)

<span class="progresspie green">100</span> %

0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %

<span class="progressring green">100</span> %

0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %

Red mode (static color)

<span class="progresspie red">100</span> %

0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %

<span class="progressring red">100</span> %

0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %

Advanced: User-defined colors

User-defined static color and demonstration of valign

The following example shows alternating pies with and without the vcenter class in a line with a line-height greater than the font-size (so that alignment makes a difference). Also, the last three lines show different possible notations for color values (not with equivalent color, as you may have noticed).

<p style="line-height: 2em">
    <span class="progresspie vcenter" data-piecolor="#93A">0</span> %
    <span class="progresspie" data-piecolor="#93A">5</span> %
    …
    <span class="progresspie vcenter" data-piecolor="rgb(180,30,200)">80</span> %
    <span class="progresspie" data-piecolor="rgb(200,50,220)">99</span> %
    <span class="progresspie vcenter" data-piecolor="#9030A0">100</span> %</p>
</p>

0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %

The same with class progressring instead of progresspie:

0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %

data-piecolor-function Attribute

This example shows a color function which utilizes the default colorByPercent function used in color mode, but modifies the mapping so that all values less than 50% get drawn in red and all the other colors are only used for greater values:

<head>
    …
    <script type="text/javascript">
        function colorGt50(percent) {
            var p = percent <= 50 ? 0 : 2 * (percent - 50);
            return $.fn.progressPie.colorByPercent(p);
        }
    </script>
    …
</head>
…
<body>
    …
    <span class="progresspie" data-piecolor-function="colorGt50">100</span> %
    …
</body>

0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %

The same with class progressring instead of progresspie:

0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %

Percent value invisible in data-percent-attribute instead of element content

<span class="progresspie red" data-percent="0"> some text</span>
<span class="progresspie red" data-percent="5"></span>
…

some text

The same with class progressring instead of progresspie:

some text

Notice the slightly different size: The first pie gets sized to fit the content "some text". The others all get a default size because the empty span does not define a height the pie could adjust to. (See plugin documentation for details on sizing.)

Take value from form input element

Consider you're designing an HTML form for a user to fill, you might want to add a pie or ring chart visualizing the value of an input (like a text input or a select box). In that case, simply add the data-input attribute and fit it with a jQuery selector specifying the input element from which to read the value. In the simplest form, if the input has an id, the selector is # followed by the input's id value:

<select id="valueSelect">
    <option value="0">—</option>
    <option value="20">20 %</option>
    <option value="40">40 %</option>
    <option value="60">60 %</option>
    <option value="80">80 %</option>
    <option value="100">100 %</option>
</select>
<span class="progresspie" data-input="#valueSelect"></span>
<input id="valueInput" type="text" value="50" size="3">
<span class="progresspie" data-input="#valueInput"></span>

Updating

<head>
    …
    <script type="text/javascript">
        var timerVal = 0;
        var timerRunning = false;
        
        function startStopTimer() {
            timerRunning = !timerRunning;
            if (timerRunning) {     
                timer();
            }   
        }
        
        function timer() {
            if (timerRunning) {
                timerVal+= 1;
                if (timerVal > 100) { 
                    timerVal = 0;
                }
                $("#update1").text(timerVal);
                $("#update2").text("%").attr("data-percent", timerVal);
                progressPies.draw();
                if (timerVal < 100)
                    window.setTimeout(timer, 400);
                else
                    timerRunning = false;
            }
        }
    </script>
</head>
…
<body>
    …
    <p><span id="update1" class="progresspie color">0</span> %<br>
        <span id="update2" class="progressring color" data-percent="0">%</span><br>
        <button onclick="timer()">Start / Stop</button>
    </p>
    …
</body>

0 %
%

Default “Busy-Indicators”

Add the class busy to progresspie or progressring in order to render a “busy-indicator” not showing a percent value but displaying either a rotating pie slice or a ring with a gap in order to indicate that your application is busy without any progress being measured.

See examples.html for more possible “busy-indicators” using the plug-in directly. This simple “application” script provides only these two default graphics, yet they may be combined with other classes or attributes as shown above, e.g. in order to define the color.

<span class="progresspie busy"></span>
<span class="progressring busy" data-piecolor="navy"></span>