The following examples each show a JavaScript line of the kind:
$(selector).progressPie(options)selector is a jQuery selector string, depending on the actual HTML document. In these cases it's a selector
specific to this actual HTML page, selecting the span elements corresponding to the respective example.options portion of each example.
<head>
…
<script type="text/javascript">
$(function() {
$(selector).progressPie(options);
}
</script>
</head>$(".pp.default").progressPie();<span class="pp default">100</span> %0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
$(".pp.dyncolor").progressPie({mode:$.fn.progressPie.Mode.COLOR});0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
$(".pp.green").progressPie({mode:$.fn.progressPie.Mode.GREEN});0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
$(".pp.red").progressPie({mode:$.fn.progressPie.Mode.RED});0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
$(".pr.red").progressPie({mode:$.fn.progressPie.Mode.RED, ringWidth: 4});0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
It's recommended to combine the ring display with a thinner outer circle using the strokeWidth
option:
$(".pr.dyncolor").progressPie({mode:$.fn.progressPie.Mode.COLOR, strokeWidth: 1, ringWidth: 3});0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
$(".pp.navy").progressPie({color:"navy"});
$(".pp.yellow").progressPie({color:"#eee000"});
$(".pp.rgb").progressPie({color:"rgb(0,150,100)"});color), the difference (beside from the color itself)
is the color notation syntax.
0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
$(".pp.myfunc").progressPie({color:function(percent) {
return percent >= 50 ? "#3f3" : "#f33";
}});0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
Example 2: Function referencefunction blueGt25(percent) {
var blue = percent < 25 ? 0 : (percent-25)*3; //range from 0 to 3*75 = 225 ( = max brightness for value of 100%)
return "rgb(0,0," + blue + ")";
}
…
$(function(){
$(".pp.myblue").progressPie({color:blueGt25});
});0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
Example 3: A function (referenced) re-using/adapting the internal functioncolorByPercent
function colorGt50(percent) {
var p = percent <= 50 ? 0 : 2 * (percent - 50);
return $.fn.progressPie.colorByPercent(p);
}
…
$(function(){
$(".pp.gt50").progressPie({color:colorGt50});
});0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
By default, the pie gets prepended to the selected element's content. You may opt to appending it behind the content instead:
$(".pp.append").progressPie({prepend: false, separator: "%: "});<span class="pp append">5</span>0 5 25 42 50 65 80 99 100
By default, the percent value to display has to be the (only) content of the selected element and the SVG graphic
gets prepended (or optionally appended) to that value (see above). But you may also provide the percent value
invisibly in an attribute of the HTML element, usually (conforming to HTML) in a data-* attribute.
The element's content may be left empty. (If not empty, the graphic still gets prepended or appended to that content.)
The following examples demonstrate a data-attribute on an empty span element, using the valueData option:
$(".pp.attr:not(.noborder):not(.ring)").progressPie({mode:$.fn.progressPie.Mode.COLOR, valueData:"val", size:30, strokeWidth: 5});<span class="pp attr" data-val="0"></span>
strokeWidth may also be zero:
$(".pp.attr.noborder").progressPie({mode:$.fn.progressPie.Mode.COLOR, valueData:"val", size:50, strokeWidth: 0});
strokeWidth 1 combined with a ringWidth and use of valueAttr instead of valueData:
$(".pp.attr.ring").progressPie({mode:$.fn.progressPie.Mode.COLOR, valueAttr:"data-val", size:30, strokeWidth: 1, ringWidth: 5});
If the value should still be visible, but is not the only content of the selected element, but the content of some sub-element, you may provide a jQuery selector specifying the sub-element holding the value:
$(".pp.subelem").progressPie({mode:$.fn.progressPie.Mode.COLOR, valueSelector:".valueSub"});<span class="pp subelem">(<span class="valueSub">0</span> %)</span>(0 %) (5 %) (25 %) (42 %) (50 %) (65 %) (80 %) (99 %) (100 %)
Note: In the first examples, the “%” label was simply placed outside (behind) the span element holding
the value and (later) the SVG. But in some cases (e.g. for CSS styling reasons) you might prefer to bundle
static text labels and the value inside the same element and simply mark the value by wrapping it into a sub-element
like shown here.
The following example shows a special use-case for the valueSelector:
The following example demonstrates an application of an inner element holding the actual percent value inside the selected element. The main reason for this construct lies in the goal to display the element's content inside the ring. (The plugin does not provide an option to render the value as a number inside a ring as part of the SVG for several reasons, mainly because this way you have CSS styling possibilities and more control over the way the value—and perhaps some unit behind or below the value—are rendered, also because this way the value is even rendered in case the browser does not support SVG.)
Also this example demonstrates the ringEndsRounded option.
Call of the plugin:
$(".pr.around").progressPie({
size: 70,
ringWidth: 7,
strokeWidth: 0,
ringEndsRounded: true,
valueSelector: "span.value",
color: "navy"
});.pr.around {
width: 70px;
height: 70px;
position: relative;
display: inline-block;
margin: 1em;
}
.pr.around span {
color: navy;
}
.pr.around span.outer {
position: absolute;
left: 0;
top: 0;
width: 70px;
text-align: center;
font-size: 10px;
padding: 15px 0;
}
.pr.around span.value {
font-size: 25px;
}<span class="pr around"><span class="outer"><span class="value">0</span><br>%</span></span> 0
%
5
%
25
%
42
%
50
%
65
%
80
%
99
%
100
%
Note: Of course, you can use CSS code like in the above example not only to place the value inside the ring. You might also keep the label invisible (providing the value in a data attribute, see above) and put some other graphic (SVG or other format) over/inside the ring, e.g. a pause or stop icon clickable to halt or abort the running process whose value is displayed by the ring.
The following example shows alternating pies with and without the option verticalAlign:"middle"
(default is "bottom")
in a line with a line-height greater than the font-size (so that alignment makes a difference).
$(".pp.vc").progressPie({verticalAlign:"middle"});<span class="pp default">0</span>
<span class="pp vc">5</span>
…0 % 5 % 25 % 42 % 50 % 65 % 80 % 99 % 100 %
<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;
}
$(".pp:not(.attr).timer").each(function(){
$(this).text(timerVal).progressPie(); //rewriting the content with "text" removes previously rendered SVG
});
$(".pp.attr.timer").each(function(){
$(this).data("val", timerVal);
//if you watch the element in the DOM inspector, you'll probably notice that the original attribute `data-val` is not changed,
//the value is stored as a number in a jQuery-internal cache (`$.cache`), not in the DOM.
//Therefore this way of updating the value requires the use of the `valueData` option, `valueAttr` will not work here!
var size = $(this).hasClass("growing") ? 30 + (timerVal/2) : 30;
//in this case, set update-flag to activate implicit removal/update of previously rendered SVG.
$(this).progressPie({mode:$.fn.progressPie.Mode.COLOR, valueData:"val", size: size, strokeWidth: 5, update: true});
});
$(".pr.around.timer").each(function(){
$("span.value", $(this)).text(timerVal);
//since only the content of the subelement of class value was overwritten, the old SVG is still present.
//Therefore the update option is necessary to replace it.
$(this).progressPie({size: 70, ringWidth: 7, strokeWidth: 0, ringEndsRounded: true, valueSelector: "span.value", color: "navy", update: true});
});
if (timerVal < 100)
window.setTimeout(timer, 400);
else
timerRunning = false;
}
};
</script>
</head>
…
<body>
…
<p><span class="pp default timer">0</span> %<br>
<span class="pp attr timer" data-val="0"></span><br>
<span class="pp attr timer growing" data-val="0"></span><br>
<span class="pr around timer"><span class="outer"><span class="value">0</span><br>%</span></span><br>
<button onclick="startStopTimer()">Start / Stop</button>
</p>
…
</body>0 %
0
%
The following example takes a value in minutes instead of percent as a value. The valueAdapter converts any positive number of minutes into percent of an hour.
ValueAdapter functions may be used regardless of the value source: Whether the values are read from the element content (default) or from an attribute makes no difference.
$(".pp.minutes").progressPie({valueAdapter: function(valueStr) {
return Math.floor(parseInt(valueStr) * 10 / 6);
}})0 5 15 20 30 35 40 45 60 80
Taking the previous example further: The progresspie component may also display two values overlapping. This might, for example, be used to depict a countdown in hours and minutes (or minutes and seconds). The following examples both show the hours-and-minutes example in different variations. In analogy to analog watch faces, the smaller, inner pie shall display an hour value (e.g. hours of a countdown still remaining) and the outer, larger pie the minutes-of-the-hour-value.
Say, you have a span element containting a time value of format "hours:minutes" like
<span class="pp hmv">6:15</span>You might now prepend a double pie chart als follows:
$(".pp.hmv").progressPie({
mode:$.fn.progressPie.Mode.GREY,
valueAdapter: function(str) {
var m = /\d+:(\d{1,2})/.exec(str)[1];
return Math.floor(parseInt(m) * 10 / 6);
},
inner: {
mode:$.fn.progressPie.Mode.RED,
valueAdapter: function(str) {
var hm = /(\d+):(\d{1,2})/.exec(str);
var m = 60*parseInt(hm[1]) + parseInt(hm[2]); //hours converted to minutes plus minutes of hour = total minutes
//100% <-> 12 hours = 720 minutes
return Math.floor(m * 100 / 720);
}
}
});0:00 0:15 1:00 1:55 2:45 6:15 07:58 12:15
Note that this example uses one single value string (here: the span's content, but of course
you might also use an attribute value, see above), but two valueAdapter functions in
order to derive two different percent values from one string value. Here, this is done
using regular expressions.
Of course, if you happen to have two separate number values “at hand” you may insert these into two separate data-attributes of the HTML element and use these directly (if they happen to be percent values) or mapped via valueAdapter functions. This example uses separate attributes for hours and minutes:
<span class="pp hma" data-hours="6" data-minutes="15">6:15</span>Also, this example demonstrates manual sizing of both the outer and the inner pie.
$(".pp.hma:not(.ring):not(.rings)").progressPie({
mode:$.fn.progressPie.Mode.RED,
valueData: "minutes",
valueAdapter: function(mins) { return Math.floor(mins * 10 / 6); },
size: 30,
inner: {
color: "navy",
valueData: "hours",
valueAdapter: function(hours) { return Math.floor(hours * 100 / 12); },
size: 20
},
verticalAlign: "middle",
strokeWidth: 1
});0:00 0:15 1:00 1:55 2:45 6:15 7:60 12:15
Note however, that in this example the inner hour-pie is independent of the minutes pie: for the time "1:55" it fills exactly the same area (1/12) as for "1:00". The example above, on the other hand, takes advantage of the fact that the valueAdapter for the hour value also has access to the minutes value and displays for "1:55" a pie nearly as large as for "2:00" (1/6).
As for single graphics, you may also set the ringWidth option for the outer and/or the inner pie. This example is simply a modification of the example above, displaying the minutes value as a ring instead of a full pie. The ringWidth is less than the difference between inner and outer radius, so that the inner pie (hour value) does fit into the ring without overlap. (Outer size is 30, inner size is 20, i.e. difference in diameter is 10, difference in radius is 5; ringWidth is set to 4, which is smaller than 5, which leaves a 1 pixel gap between inner pie and outer ring.)
$(".pp.hma.ring").progressPie({
mode:$.fn.progressPie.Mode.RED,
valueData: "minutes",
valueAdapter: function(mins) { return Math.floor(mins * 10 / 6); },
size: 30,
inner: {
color: "navy",
valueData: "hours",
valueAdapter: function(hours) { return Math.floor(hours * 100 / 12); },
size: 20
},
verticalAlign: "middle",
strokeWidth: 1,
ringWidth: 4
});0:00 0:15 1:00 1:55 2:45 6:15 7:60 12:15
Of course, you may also apply the ringWidth option to the inner pie:
$(".pp.hma.rings").progressPie({
mode:$.fn.progressPie.Mode.RED,
valueData: "minutes",
valueAdapter: function(mins) { return Math.floor(mins * 10 / 6); },
size: 30,
inner: {
color: "navy",
valueData: "hours",
valueAdapter: function(hours) { return Math.floor(hours * 100 / 12); },
size: 20,
ringWidth: 4
},
verticalAlign: "middle",
strokeWidth: 1,
ringWidth: 4
});0:00 0:15 1:00 1:55 2:45 6:15 7:60 12:15
You may add a clockwise rotation animation to any pie or ring as shown above. For a normal value would not seem like a good idea, but if you want to indicate some waiting interval without the progress actually being measured at the time being, you might use this to build a “Busy-Indicator” like e.g. one of the following:
$('#rotate1').progressPie({
rotation: "500ms",
valueAdapter: function() {return 5;}
});
$('#rotate2').progressPie({
strokeWidth: 1,
ringWidth: 3,
color: "#333",
rotation: {
duration: "2s",
clockwise: false
},
valueAdapter: function() {return 50;}
});
$('#rotate3').progressPie({
strokeWidth: 0,
ringWidth: 1,
color: "navy",
rotation: true,
valueAdapter: function() {return 90;}
});
Note the valueAdapter function in these examples, returning a constant value
defining the size of the rotating pie or the size of the gap in the rotating ring.
The animation only applies to the main / outer pie or ring. The inner option
does not define a rotation property (i.e. any rotation property on the inner
option will be ignored). But you may combine an outer animated ring with an inner progress pie like this:
$('#rotate4').progressPie({
size: 40,
strokeWidth: 0,
ringWidth: 5,
ringEndsRounded: true,
color: "#900",
rotation: "1s",
valueAdapter: function() {return 85;},
inner: {
color: "navy",
valueData: "value"
}
});