Deutsch
This page shows examples for how to use the “Application Script”. If you include that (see Getting Started), you don't have to write a single line of JavaScript yourself. Instead you simply add some predefined CSS class names to the elements holding your percent values, and the script will then insert some simple pies for you.
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 jQuery 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>
