Namespace: progressPies

Module with a default application of the jQuery-ProgressPie-Plugin. This is to say: By inserting this javascript file after the original plugin file (and of course jQuery itself) into your HTML document, you don't have to write any JavaScript code for applying the plugin yourself, but this script applies the module to any element in your HTML of class "progresspie" or class "progressring". Elements of class "progresspie" draw a "pie chart", elements of class "progressring" a fine circle with a partial thicker ring inside (like a circular progress bar). See examplesAppl.html. (The stroke-widths are predefined when using this application script—use the plugin directly to get more control.)

Some additional options (though not everything possible when using the plugin directly) may be applied by adding further predefined class names to the element or by adding data-attributes of certain names:

• Simplest usage: Insert an HTML element (usually span) with class="progresspie" and with a number ranging from 0 to 100 als its only content. In this case the pie will be prepended to the number in the default color (grey), e.g. <span class="progresspie">55</span>
• Use class="progressring" instead, if you prefer the ring display over the pie display.
• Add class color to activate the default red-yellow-green-color-scheme for dynamically coloring the pie depending on the value, e.g. <span class="progresspie color">55</span>
• Add one of the classes red or green for constant red or green color, e.g. <span class="progresspie red">55</span>
• To apply a constant user-defined color, insert an attribute named data-piecolor with the color code or name, e.g. <span class="progresspie" data-piecolor="#4f4">55</span>
• To apply a user-defined dynamic color (defined via a self-written JavaScript function), you may add the attribute data-piecolor-function. The attribute value (a string) must evaluate to a function which takes a number (0..100) and returns a string describing a color. This attribut value could be the function code itself, but it's usually better to just state the name of a function defined in a JavaScript block, e.g. <span class="progresspie" data-piecolor-function="myColorFunction">55</span>
• By default the image is vertically aligned at the bottom of the element. For inline elements like span that is the bottom of the line. In some cases you might want to vertically center the image inside the element (for instance if the line is higher than the text, which may be achieved with setting line-height). For vertical centering add the class vcenter, e.g. <span class="progresspie color vcenter">55</span>
• If you add the attribute data-percent to a .progresspie-element, the value of that attribute is used instead of the element's content e.g. <span class="progresspie" data-percent="55"></span>
• Add the class busy to the element if you don't want to display a percent value, but only want to indicate your system is busy without measuring the progress. In this case a clockwise rotation animation is inserted: either a small rotating pie slice (if combined with class progresspie) or a thins ring with a rotating gap in it (if combined with class progressring).
• You may add the attribute data-input to specify a jQuery selector for an input element. If you do so, the plug-in will not only read the percent value from the specified input (using jQuery's val() method), but it will also react to any change event of that input by updating the chart to reflect the new value.

Normally you don't have to call any JS function, the drawing function gets automatically applied once for each element of class progresspie or progressring when the document is loaded. Manual calls may be triggered for updates: Overwrite the content of a progresspie element with a new value (removing the previously rendered pie) and then call progressPies.draw for updating all elements of class progresspie with missing SVGs.