{"id":32228044,"url":"https://github.com/isg-software/progresspie","last_synced_at":"2026-02-19T08:36:40.595Z","repository":{"id":36688128,"uuid":"40994611","full_name":"isg-software/progresspie","owner":"isg-software","description":"jQuery plugin for dynamically rendering \"progress pies\" and \"progress rings\" as SVG images in a web page","archived":false,"fork":false,"pushed_at":"2023-03-10T10:01:25.000Z","size":3312,"stargazers_count":18,"open_issues_count":0,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2026-01-23T05:12:45.993Z","etag":null,"topics":["jquery-plugin","percentage-circle","percentage-progress-circle","pie-chart","pie-graph","progress-bar","progress-circle","progress-pie","ring-charts","svg-images"],"latest_commit_sha":null,"homepage":"http://www.isg-software.de/progresspie/indexe.html","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/isg-software.png","metadata":{"files":{"readme":"README.html","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-08-18T19:58:30.000Z","updated_at":"2024-12-01T15:31:19.000Z","dependencies_parsed_at":"2024-10-13T00:00:58.032Z","dependency_job_id":"95ec0377-84ff-4e8f-90d0-d6673e56d43e","html_url":"https://github.com/isg-software/progresspie","commit_stats":{"total_commits":232,"total_committers":2,"mean_commits":116.0,"dds":0.06896551724137934,"last_synced_commit":"6cda8cf9a9268d433ac6e4c1ba7845ef0383407a"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/isg-software/progresspie","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isg-software%2Fprogresspie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isg-software%2Fprogresspie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isg-software%2Fprogresspie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isg-software%2Fprogresspie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/isg-software","download_url":"https://codeload.github.com/isg-software/progresspie/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isg-software%2Fprogresspie/sbom","scorecard":{"id":495403,"data":{"date":"2025-08-11","repo":{"name":"github.com/isg-software/progresspie","commit":"6cda8cf9a9268d433ac6e4c1ba7845ef0383407a"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: BSD 2-Clause \"Simplified\" License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}}]},"last_synced_at":"2025-08-19T20:19:52.585Z","repository_id":36688128,"created_at":"2025-08-19T20:19:52.586Z","updated_at":"2025-08-19T20:19:52.586Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29608593,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-19T06:47:36.664Z","status":"ssl_error","status_checked_at":"2026-02-19T06:45:47.551Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jquery-plugin","percentage-circle","percentage-progress-circle","pie-chart","pie-graph","progress-bar","progress-circle","progress-pie","ring-charts","svg-images"],"created_at":"2025-10-22T10:01:11.937Z","updated_at":"2026-02-19T08:36:40.575Z","avatar_url":"https://github.com/isg-software.png","language":"HTML","readme":"\u003c!DOCTYPE html\u003e\n\u003chtml xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"en\"\u003e\n\u003chead\u003e\n\t\u003cmeta charset=\"utf-8\"/\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003ch1 id=\"progresspiesvg\"\u003eprogresspieSVG\u003c/h1\u003e\n\n\u003cp\u003ejQuery plug-in for dynamically rendering a pie or circle diagram comparable to a progress bar, depicting a progress, countdown, percent value or similar.\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"http://www.isg-software.de/progresspie/indexe.html\"\u003eProject home page\u003c/a\u003e\u003c/p\u003e\n\n\u003ch2 id=\"whatisthis\"\u003eWhat is this?\u003c/h2\u003e\n\n\u003cp\u003eThis software module contains a \u003ca href=\"https://jquery.com\"\u003ejQuery\u003c/a\u003e plug-in for drawing a partially filled circle (pie-chart with only one slice of the pie) for visualizing a single value between 0% and 100% inclusive, i.e. a kind of progress bar, but not in form of a bar but of a pie. The graphic is rendered inside a web page as SVG. In difference to e.g. the HTML \u003ccode\u003ecanvas\u003c/code\u003e element, SVGs are scalable and render sharply on high resolution displays with device-pixel-ratio \u0026gt; 1 (e.g. Apple\u0026#8217;s “retina displays”).\u003c/p\u003e\n\n\u003cp\u003eAs the name suggests, this component may be used to display a progress, starting at 0%, incrementing until 100% are reached. For this purpose the graphic may be dynamically updated (or, more precisely, replaced).\u003c/p\u003e\n\n\u003cp\u003eBut just like progress bars these pies may actually be used to depict \u003cem\u003eany\u003c/em\u003e percentual value, including static ones like e.g. percents of points achieved in a test. Mainly for this purpose, the pie may be dynamically colored based on the percentual value with colors like red hinting at a “bad” result, yellow for “mediocre” and green for “good”. There are default color schemes (always grey, green or red or dynamically calculated red/yellow/gree-shade as described above), but you may also assign any static color or your own JavaScript function mapping the value into a color.\u003c/p\u003e\n\n\u003cp\u003eThis jQuery-Plug-in supports a wide range of options for customizability, so you may style the pie or ring charts in various ways, define value adapter functions for converting any raw value into a percent value to be displayed, even render more than one value in one chart (typically by arranging smaller rings or pies inside one outer ring). A content plug-in architecture allows for additional content to be added to a chart, like control icons, error or warning icons (e.g. if the diagram is used to depict the progress of some job which will not always terminate successfully but might produce errors or warnings), background icons, value display etc. Various content plug-ins are included (see separate example page), and you can also create your own ones.\u003c/p\u003e\n\n\u003cp\u003eThe basic usage is to add static charts to a page already containing the values, so these get displayed graphically. If the value is not static but the user\u0026#8217;s input in a form field, the plug-in can automatically update the chart when the input\u0026#8217;s value changes.\u003c/p\u003e\n\n\u003cp\u003eVia JavaScript, it\u0026#8217;s also possible to dynamically updated charts (even with smooth transition/animation), e.g. for building a real progress indicator for some process running in the background (maybe even a server\u0026#8217;s progress monitored by Ajax status requests).\u003c/p\u003e\n\n\u003ch2 id=\"examples\"\u003eExamples\u003c/h2\u003e\n\n\u003cp\u003eSee the examples pages to get an impression of the looks and for different demo scenarios.\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003eexamples.html\u003c/code\u003e: Examples for direct usage of the plug-in\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eexamplesAppl.html\u003c/code\u003e: Examples for indirect use with \u003ccode\u003eprogresspiesvlAppl.js\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eexamplesContentPlugins.html\u003c/code\u003e: Examples for usage of the bundled content plug-ins (control icons, check complete, value display, background images, …)\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eexamplesAnimation.html\u003c/code\u003e: Examples for configuring animated value transitions\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003eYou\u0026#8217;ll also find an online live view of these examples on the \u003ca href=\"http://www.isg-software.de/progresspie/indexe.html\"\u003eproject\u0026#8217;s home page\u003c/a\u003e.\u003c/p\u003e\n\n\u003ch2 id=\"javascripts\"\u003eJavaScripts\u003c/h2\u003e\n\n\u003cp\u003eThis package contains several JavaScript files.\u003c/p\u003e\n\n\u003col\u003e\n\u003cli\u003eThe script files in folder \u003ccode\u003ejs\u003c/code\u003e are the \u003cem\u003esource files\u003c/em\u003e. Please note that—starting with version 2.4.0—these use ECMAScript-6-Syntax and are not compatible with older browsers wich only support up to ECMAScript 5! \u003cem\u003eFor better browser compatiblity use the following minified versions!\u003c/em\u003e\u003c/li\u003e\n\u003cli\u003eThe folder \u003ccode\u003ejs/min\u003c/code\u003e contains the \u003cem\u003eproduction versions\u003c/em\u003e. These have been transpiled (with Babel) to ECMAScript 5 and minified (with UglifyJS), so they are smaller and may be run on more, older browsers that the source scripts.\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003cp\u003eThe individual script files (file names of source versions, production versions' names end with \u003ccode\u003e-min.js\u003c/code\u003e):\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003ejquery-progresspiesvg.js\u003c/code\u003e: The jQuery plug-in itself. It may be used stand-alone.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ejquery-progresspiesvg-controlIcons.js\u003c/code\u003e: A content plug-in as an addition to the jQuery plug-in above. Loading this file on top of jquery-progresspiesvg.js enables you to draw control icons (play, stop, pause) inside ring graphs using the \u003ccode\u003esvgContentPlugin\u003c/code\u003e option of the progresspiesvg plug-in.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ejquery-progresspiesvg-checkComplete.js\u003c/code\u003e: A content plug-in which may add a check mark to a pie or ring graph for value 100%.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ejquery-progresspiesvg-errorIcons.js\u003c/code\u003e: A content plug-in for adding warning or error icons to a chart, e.g. in case a monitored progress crashes or terminates with an error or warning message.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ejquery-progresspiesvg-image.js\u003c/code\u003e: A content plug-in for adding content from external image files (preferrably \u003ccode\u003eSVG\u003c/code\u003e, but other browser-supported formats like \u003ccode\u003ePNG\u003c/code\u003e or \u003ccode\u003eJPEG\u003c/code\u003e will also work). Images may be used in fore- or background or even be masked by the pie chart, see examples.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ejquery-progresspiesvg-valueDisplay.js\u003c/code\u003e: A content plug-in for displaying values (percent numbers or other values converted to percent, e.g. seconds of a minute) in the center of a ring graph.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eprogresspiesvgAppl.js\u003c/code\u003e: This is meant to simplify the use for those who do not want to write JavaScript code to apply and configure the plug-in. This script file may be included into your HTML (in addition to jQuery and the plug-in above). If you do so, you may insert progresspie charts simply by writing HTML, inserting the percent values and assigning some predefined CSS classes or \u003ccode\u003edata\u003c/code\u003e-Attributes.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2 id=\"changesinv2.0.0backwardscompatibility\"\u003eChanges in V2.0.0, backwards compatibility\u003c/h2\u003e\n\n\u003cp\u003eVersion 2 mostly adds new features like especially:\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003eRendering rewritten to produce more compact SVG markup. (Rings and pies are now only a single elliptic stroke with instead of a filled area.) This was also precondition for the next feature:\u003c/li\u003e\n\u003cli\u003eoptional SMIL animation/transition (see \u003ccode\u003eexamplesAnimation.html\u003c/code\u003e)\u003c/li\u003e\n\u003cli\u003eMore features for the \u003ccode\u003einner\u003c/code\u003e option (second value/pie/ring):\n\n\u003cul\u003e\n\u003cli\u003ebackground circle now also supported for inner rings/pies\u003c/li\u003e\n\u003cli\u003e“Double pies” extended to “multiple pies”: The \u003ccode\u003einner\u003c/code\u003e option may itself contain an \u003ccode\u003einner\u003c/code\u003e option (recursive)\u003c/li\u003e\n\u003c/ul\u003e\u003c/li\u003e\n\u003cli\u003eCSS support:\n\n\u003cul\u003e\n\u003cli\u003ebackground circles and foreground pie or ring segments now always get a \u003ccode\u003eclass\u003c/code\u003e attribute so you can define external CSS rules to modify or enhance their formatting.\u003c/li\u003e\n\u003cli\u003enew predefined \u003ccode\u003eCSS\u003c/code\u003e mode disables some inline formatting like colors in the generated SVG code or the inline style \u003ccode\u003evertical-align\u003c/code\u003e in the \u003ccode\u003esvg\u003c/code\u003e node, in which case the formatting should be defined externally via CSS rules.\u003c/li\u003e\n\u003c/ul\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eoverlap\u003c/code\u003e option\u003c/li\u003e\n\u003cli\u003eExtended content plug-in API able to suppress the output of the actual pie or ring chart, especially if the content plug-in would totally cover/occlude it. This generates more compact SVG (without needlessly rendering effectively invisible graphics) and also draws “cleaner” edges around full size filled backgrounds of content plug-ins.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003eBut some changes have been made which could \u003cem\u003eaffect backwards compatibility\u003c/em\u003e in a few cases. This is the main reason for the major version increase (see [semantic versioning][https://docs.npmjs.com/getting-started/semantic-versioning]): When updating to V2.0.0, you should make sure the following changes don\u0026#8217;t affect your current uses, otherwise you might have to (slightly) change them.\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003eThe \u003ccode\u003eseparator\u003c/code\u003e option is now ignored when inserting an SVG into a hitherto empty HTML element (e.g. \u003ccode\u003e\u0026lt;span id=\u0026quot;pie\u0026quot; data-percent=\u0026quot;50\u0026quot;\u0026gt;\u0026lt;/span\u0026gt;\u003c/code\u003e). In Versions 1.x.x, the \u003ccode\u003eseparator\u003c/code\u003e (wich actually only serves to separate the prepended or appended SVG from the content of the node) was still appended, even if there was nothing to separate. This could have had some unwanted effects, e.g. if the target element was CSS-formatted to have a background color and the SVG should be centered inside, but was not due to the space appended to it. On the other hand: If you\u0026#8217;ve been relying on this separator being inserted even into empty documents, you\u0026#8217;ll now have to put it into the document by yourself. Example: If you had some markup like \u003ccode\u003e\u0026lt;span id=\u0026quot;pie\u0026quot;…\u0026gt;\u0026lt;/span\u0026gt;\u0026lt;span id=\u0026quot;X\u0026quot;\u0026gt;…\u0026lt;/span\u0026gt;\u003c/code\u003e and relied on a space being inserted after the SVG into the \u003ccode\u003e#pie\u003c/code\u003e element so that the pie and the content of \u003ccode\u003e#X\u003c/code\u003e were separated, you\u0026#8217;d best now insert a space directly between the two span elements.\u003c/li\u003e\n\u003cli\u003eThe default valueAdapter function now uses \u003ccode\u003eparseFloat\u003c/code\u003e instead of \u003ccode\u003eparseInt\u003c/code\u003e for parsing string numbers, meaning that it now supports decimal digits if the dot (\u003ccode\u003e.\u003c/code\u003e) is used as decimal separator.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003eChanges like having a separator only separate the newly inserted and old content and not (any more) adding a ‘separator’ that\u0026#8217;s actually not separating anything, these are more kind of a fix than a new feature. They IMHO make sense, but sadly they affect backwards compatibility. Other than that, I\u0026#8217;ve strived to retain backwards compatibility as far as possible, and most users won\u0026#8217;t probably have to change anything.\u003c/p\u003e\n\n\u003ch2 id=\"usage\"\u003eUsage\u003c/h2\u003e\n\n\u003ch3 id=\"directusageoftheplug-inwithoutprogresspiesvgappl.js\"\u003eDirect usage of the plug-in (without \u003ccode\u003eprogresspiesvgAppl.js\u003c/code\u003e)\u003c/h3\u003e\n\n\u003ch4 id=\"basics\"\u003eBasics\u003c/h4\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003cp\u003eInclude jQuery (tested with jQuery 1.11, but should work with jQuery 2 and 3, too) and the script file \u003ccode\u003ejquery-progresspiesvg.js\u003c/code\u003e into the head of your HTML file.\u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cp\u003eInsert the percent values into your HTML body that are to be visualized. This may be done in several ways:\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003eShould the number be visible and a pie in text height should be inserted before or behind the acutal number? This is the default. In this case, for each progresspie to insert, write the number (and only the up to three digits) into an HTML element like \u003ccode\u003espan\u003c/code\u003e and make sure this element may be selected via jQuery (e.g. by adding a classname like \u0026#8220;percent\u0026#8221; or \u0026#8220;progresspie\u0026#8221;). Example: \u003ccode\u003e\u0026lt;span class=\u0026quot;percent\u0026quot;\u0026gt;42\u0026lt;/span\u0026gt;\u0026amp;nbsp;%\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003eShould the number / digits be invisible and only a pie is to be inserted? In this case create an empty HTML element where the pie chart is to be inserted and write the number into an attribute of this element (usually prefixed with \u003ccode\u003edata-\u003c/code\u003e), e.g.: \u003ccode\u003e\u0026lt;span class=\u0026quot;pie\u0026quot; data-percent=\u0026quot;42\u0026quot;\u0026gt;\u0026lt;/span\u0026gt;\u003c/code\u003e.\n\n\u003cul\u003e\n\u003cli\u003eIn this case, you\u0026#8217;ll have to include an option when calling the progressPie() plug-in defining where to find the value, preferrably the \u003ccode\u003evalueData\u003c/code\u003e option, alternatively the \u003ccode\u003evalueAttr\u003c/code\u003e option.\u003c/li\u003e\n\u003c/ul\u003e\u003c/li\u003e\n\u003cli\u003eShould the value actually be the value of a form input element editable in the browser by the user, that\u0026#8217;s also possible.\n\n\u003cul\u003e\n\u003cli\u003eIn this case you\u0026#8217;ll have to use the \u003ccode\u003esetupProgressPie()\u003c/code\u003e plug-in function to setup an updateable chart (see below). The \u003ccode\u003evalueInput\u003c/code\u003e option can be used to specify the value source as well as setup an event handler for automatic update of the chart when the input value changes.\u003c/li\u003e\n\u003c/ul\u003e\u003c/li\u003e\n\u003c/ul\u003e\u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003eWrite and include some script code that gets executed after rendering the HTML (generating the DOM). This code is to select the (\u003ccode\u003espan\u003c/code\u003e-) elements you created in the second step with a jQuery query and to apply the plug-in to the selection/query result.\nExample corresponding to both data elements above:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode\u003e\u0026lt;script type=\u0026quot;text/javascript\u0026quot;\u0026gt;\n    $(function() {\n        $(\u0026quot;.percent\u0026quot;).progressPie(); //default mode\n        $(\u0026quot;.pie[data-percent]\u0026quot;).progressPie({ //specifying options object\n            valueData:\u0026quot;percent\u0026quot;,\n            color:\u0026quot;navy\u0026quot;,\n            size:30\n        });\n    });\n\u0026lt;/script\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003eFor each selected element, the script will try to read the number (from the element\u0026#8217;s content or from a data attribute, if the option \u003ccode\u003evalueData\u003c/code\u003e is given and the element provides a data attribute, prefixed with \u003ccode\u003edata-\u003c/code\u003e, of that name or the data is set by calling jQuery\u0026#8217;s \u003ccode\u003edata()\u003c/code\u003e method) and render the piechart SVG, which will be inserted into the selected element.\u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003eBy default the SVG image gets prepended to the content, optionally it may also be appended. Also, a \u003ccode\u003eseparator\u003c/code\u003e string may be inserted between the pie and the original content (by default this is a non-breaking space: \u003ccode\u003e\u0026amp;nbsp;\u003c/code\u003e). If the target element is empty (like in the second example with the data attribute), the SVG is simply inserted into that element without the separator.\u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003eIn case the values aren\u0026#8217;t static but should be updatable, the initialization should be done with the \u003ccode\u003esetupProgressPie()\u003c/code\u003e method and the parameterless \u003ccode\u003eprogressPie()\u003c/code\u003e method can be used multiple times to (re)draw die graph:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode\u003e\u0026lt;script type=\u0026quot;text/javascript\u0026quot;\u0026gt;\n    $(function() {\n        $(\u0026quot;.pie[data-percent]\u0026quot;).setupProgressPie({ //specifying options\n            valueData:\u0026quot;percent\u0026quot;,\n            color:\u0026quot;navy\u0026quot;,\n            size:30\n        }).progressPie(); //draw the pie (1st time) using the above setup.\n    });\n    function demoUpdate(p) {\n        $(\u0026quot;.pie[data-percent]\u0026quot;).data(\u0026quot;percent\u0026quot;, p).progressPie();\n        //update the percent data and initiate redraw. (The progressPie()\n        //method will read the \u0026quot;percent\u0026quot; data as specified in the setup.)\n    }\n\u0026lt;/script\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003cul\u003e\n\u003cli\u003eIf the value should be taken from a form input element (see above), you\u0026#8217;ll not even have to write an update trigger function, the \u003ccode\u003evalueInput\u003c/code\u003e option will automatically register an event handler for updating the chart (by calling \u003ccode\u003eprogressPie()\u003c/code\u003e) on the input.\u003cbr /\u003e\nExample:\u003cbr /\u003e\nThe HTML:\n\n\u003cpre\u003e\u003ccode\u003e\u0026lt;input type=\u0026quot;text\u0026quot; id=\u0026quot;inp1\u0026quot; name=\u0026quot;inp\u0026quot; value=\u0026quot;50\u0026quot;\u0026gt;\n\u0026lt;span id=\u0026quot;pie1\u0026quot;\u0026gt;\u0026lt;/span\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\nThe JavaScript call:\n\n\u003cpre\u003e\u003ccode\u003e$(\u0026quot;#pie1\u0026quot;).setupProgressPie({\n    valueInput: $(\u0026quot;#inp1\u0026quot;)\n}).progressPie();\n\u003c/code\u003e\u003c/pre\u003e\n\nSee the main examples page for more detailed examples including the additional \u003ccode\u003evalueInputEvents\u003c/code\u003e option.\u003c/li\u003e\n\u003c/ul\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch4 id=\"options\"\u003eOptions\u003c/h4\u003e\n\n\u003cp\u003eIf you simply call \u003ccode\u003eprogressPie()\u003c/code\u003e, the plug-in will be used with default options. This includes that the percent number is expected to be the (only) content of the selected element, the pie will be prependet to this content (separated with an \u003ccode\u003e\u0026amp;nbsp;\u003c/code\u003e), it will be rendered in line-height and in a shade of grey (\u003ccode\u003e#888\u003c/code\u003e). It will only be inserted, if the element does not yet contain any SVG content: repetetive calling of the function will therefore neither insert the SVG multiple times nor will it update the graphic.\u003c/p\u003e\n\n\u003cp\u003eTo modify the looks or behaviour, the function takes exactly one argument, which has to be a JavaScript object which defines options via its properties. The following option properties are defined:\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003emode\u003c/code\u003e: constant of enum type \u003ccode\u003e$.fn.progressPie.Mode\u003c/code\u003e. Default is \u003ccode\u003e$.fn.progressPie.Mode.GREY\u003c/code\u003e. Possible values are:\n\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003e$.fn.progressPie.Mode.GREY\u003c/code\u003e: Default Mode, pie is drawn in a shade of grey.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e$.fn.progressPie.Mode.RED\u003c/code\u003e: The pie is drawn in red color regardless of the percentual value.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e$.fn.progressPie.Mode.GREEN\u003c/code\u003e: The pie is drawn in green color regardless of the percentual value.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e$.fn.progressPie.Mode.COLOR\u003c/code\u003e: The color of the pie is depending on the percentual value (see above). The color is the same green color as in mode GREEN for a value of 100 percent, the same red color as in mode RED for a value of 0%, a yellowish mix of both for 50% and a gradient in between green and yellow for values greater than 50% resp. between red and yellow for values less than 50%.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e$.fn.progressPie.Mode.CSS\u003c/code\u003e: The colors (\u003ccode\u003estroke\u003c/code\u003e of foreground and background and \u003ccode\u003efill\u003c/code\u003e of background) as well as the \u003ccode\u003evertical-align\u003c/code\u003e style of the root \u003ccode\u003esvg\u003c/code\u003e element are left unspecified. If this mode is chosen, you have to define the colors and vertical alignment via CSS rules (see examples)! Note: If the \u003ccode\u003emode\u003c/code\u003e option is set to CSS mode, any \u003ccode\u003ecolor\u003c/code\u003e option will be ignored!\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e$.fn.progressPie.Mode.MASK\u003c/code\u003e: The pie or ring chart is not added to the main, visible area of the SVG but is instead inserted as a mask which is then applied to the topmost background layer. This requires at least one background layer to be present: Any layer other than the pie layer (which is inserted in any mode but MASK or IMASK) can only be inserted by a content plug-in, i.e. this mode is only made to be combined with at least one content plug-in (see the \u003ccode\u003econtentPlugin\u003c/code\u003e option). Since content plug-ins may insert either a foreground layer (draw on top of the chart) or a background layer, the \u003ccode\u003econtentPlugin\u003c/code\u003e option must hold at least one plug-in drawing into the background.\u003cbr /\u003e\nAs has already been said, the mask defined by the pie chart gets applied to the topmost background layer. By default that means that the output of the first content plug-in drawing into the background will only be visible in those parts of the graphic which would normally be covered by the pie chart.\u003cbr /\u003e\nIn MASK mode the space around the pie or ring chart is always transparent, the pie itself is white by default. If you understand masking and wish to change that, you may alter the colors of the chart and its background (filled background inside the circle) by using using options like \u003ccode\u003estrokeColor\u003c/code\u003e, \u003ccode\u003ecolor\u003c/code\u003e, \u003ccode\u003ebackgroundColor\u003c/code\u003e etc., the space outside the chart\u0026#8217;s circle is always transparent in this mode.\u003cbr /\u003e\nSee JSDoc for these Mode constants and the examples page on content plug-ins!\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e$.fn.progressPie.Mode.IMASK\u003c/code\u003e: Inverted Mask Mode: This resembles the \u003ccode\u003eMASK\u003c/code\u003e mode above, only the mask in inverted: By default, the foreground of the pie is black and all the background (inside and outside of the chart) is white, meaning any part of the first background layer which would be visible in normal mode will still be visible, but the chart is not drawn on top of that background layer, but it\u0026#8217;s “cut out of” the background, leaving a pie-/ring-shaped transparent hole in the background layer.\u003cbr /\u003e\nIn this mode, too, you may alter the default colors of the mask (defining a grade of transparency) by other options.\u003cbr /\u003e\nSee JSDoc for these Mode constants and the examples page on content plug-ins!\u003c/li\u003e\n\u003c/ul\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003estrokeWidth\u003c/code\u003e: number. Default is \u003ccode\u003e2\u003c/code\u003e. Determines the stroke with of the background circle.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003estrokeColor\u003c/code\u003e: string, color code. Default is \u003ccode\u003eundefined\u003c/code\u003e. If undefined, the background circle is drawn in the same color as the rest of the pie. If set to a color code like \u003ccode\u003e#ddd\u003c/code\u003e or \u003ccode\u003esilver\u003c/code\u003e, this defines the color of the background circle.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003estrokeDashes\u003c/code\u003e: number or object. Default is \u003ccode\u003eundefined\u003c/code\u003e. This defines an optional dash pattern for the background circle\u0026#8217;s stroke. A number value is simply a short hand syntax for an object with only the sub-option \u003ccode\u003ecount\u003c/code\u003e. If this is an object, it must at least contain the \u003ccode\u003ecount\u003c/code\u003e property. Allowed properties are as follows:\n\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003ecount\u003c/code\u003e: number, mandatory. Defines into how many dashes (and gaps) the background circle is to be divided. By default dashes and gaps are equally long (circumference/(2*\u003ccode\u003ecount\u003c/code\u003e)).\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003elength\u003c/code\u003e: number or string. Defaults to \u003ccode\u003eundefined\u003c/code\u003e. If set to a number, this defines the length of each dash in pixels. This should only be used if the total size of the graph and thus the circumference in pixels is known to be longer than \u003ccode\u003elength\u003c/code\u003e * \u003ccode\u003ecount\u003c/code\u003e! Alternatively this may be set to a string literal containing a number followed by a percent sign, e.g. \u003ccode\u003elength: '10%'\u003c/code\u003e. This defines a relative length of each dash and is applicable independently of the graph\u0026#8217;s size. If you use \u003ccode\u003ecount\u003c/code\u003e and \u003ccode\u003elength\u003c/code\u003e, the length of the gaps between the dashes is auto-sized in order to equally distribute the dashes around the circle.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ecentered\u003c/code\u003e: boolean. Defaults to \u003ccode\u003eundefined\u003c/code\u003e. If falsy (e.g. undefined or false), the first dash will start at (end the last gap will end at) exactly the circle\u0026#8217;s top (12 o\u0026#8217;clock position). If true (or truthy), the first dash will be horizontally centered around that position.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003einverted\u003c/code\u003e: boolean. Defaults to \u003ccode\u003eundefined\u003c/code\u003e. If true (or truthy), the pattern is inverted such that the gaps are replaced by dashes and vice versa. I.e. in inverted mode the \u003ccode\u003elength\u003c/code\u003e property will define the length of the gaps and the dashes will be auto-sized, and the first gap will start at (or, if \u003ccode\u003ecentered\u003c/code\u003e is set, be centered around) the 12 o\u0026#8217;clock position.\u003c/li\u003e\n\u003c/ul\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eoverlap\u003c/code\u003e: boolean, defaults to \u003ccode\u003etrue\u003c/code\u003e. If \u003ccode\u003etrue\u003c/code\u003e, the foreground (pie/ring segment) is drawn full size, i.e. with the same radius as the background circle, so the foreground overlaps the background. This is usually only visible, if the \u003ccode\u003estrokeColor\u003c/code\u003e (color of the background circle) is set and differs from the foreground\u0026#8217;s color. Set this to \u003ccode\u003efalse\u003c/code\u003e in order to fit the foreground (pie/ring) inside the blank space of the background circle.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eringWidth\u003c/code\u003e: number. Default is \u003ccode\u003eundefined\u003c/code\u003e. If undefined, a portion of the pie will be filled, cut out just to the center of the circle (like a partial sweep of a radar). If ringWidth is a number, only the outer rim of this piece of the pie is drawn, leaving an empty circle in the middle with diameter \u003ccode\u003esize-2*ringWidth\u003c/code\u003e. If no \u003ccode\u003estrokeColor\u003c/code\u003e is defined (and \u003ccode\u003eoverlap\u003c/code\u003e is true) \u003ccode\u003eringWidth\u003c/code\u003e must be greater than \u003ccode\u003estrokeWidth\u003c/code\u003e in order for the (partial) ring to be visible. (See examples)\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eringEndsRounded\u003c/code\u003e: boolean. Default is \u003ccode\u003efalse\u003c/code\u003e. Only applicable if \u003ccode\u003eringWidth\u003c/code\u003e is defined, ignored in pie mode. If a ring is drawn, both ends of the ring are normally cut rectangularly. Enabling this option draws a semicircle cap on each end. This might look prettier especially for very large graphics with usually \u003ccode\u003estrokeWidth === 0\u003c/code\u003e. Note however that, the higher the \u003ccode\u003eringWidth\u003c/code\u003e value, the longer the ring seems, for the semicircles are \u003cem\u003eadded\u003c/em\u003e to the ring. Very high values like 99% will then look like a full 100% (for the semi circle ends overlap).\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eringAlign\u003c/code\u003e: constant of enum type \u003ccode\u003e$.fn.progressPie.RingAlign\u003c/code\u003e. Defaults to \u003ccode\u003e$.fn.progressPie.RingAlign.OUTER\u003c/code\u003e. This option is only applied if \u003ccode\u003eringWidth\u003c/code\u003e and \u003ccode\u003estrokeWidth\u003c/code\u003e are both defined and both greater than zero. Its meaning correlates with the \u003ccode\u003eoverlap\u003c/code\u003e option. Possible values are:\n\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003e$.fn.progressPie.RingAlign.OUTER\u003c/code\u003e: The ring\u0026#8217;s outer edge is aligned with the background circle. If \u003ccode\u003eoverlap\u003c/code\u003e is true, it is drawn on top of the background circle and both circles outer edges are aligned. If \u003ccode\u003eoverlap\u003c/code\u003e is false, i.e. both circles don\u0026#8217;t overlap, the ring is drawn \u003cem\u003einside\u003c/em\u003e the background circle, the ring\u0026#8217;s outer edge touches the inner edge of the background circle.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e$.fn.progressPie.RingAlign.INNER\u003c/code\u003e: The ring\u0026#8217;s inner edge is aligned with the background circle. If \u003ccode\u003eoverlap\u003c/code\u003e is true, the ring is drawn on top of the background circle such that they are both aligned on the inside. If \u003ccode\u003eoverlap\u003c/code\u003e is false, the background circle will be drawn \u003cem\u003einside\u003c/em\u003e the ring, the ring \u003cem\u003eoutside\u003c/em\u003e around the background circle.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e$.fn.progressPie.RingAlign.CENTER\u003c/code\u003e: In this mode, both circles share the same radius, i.e. they are both centered on the same circle, the wider stroke will expand further to the inside as well as to the outside of that circle. (This is only applicable if \u003ccode\u003eoverlap\u003c/code\u003e is true, without overlap, no centering is possible.)\u003c/li\u003e\n\u003c/ul\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eprepend\u003c/code\u003e: boolean. Default is \u003ccode\u003etrue\u003c/code\u003e. If true, the pie will be inserted at the beginning of the element\u0026#8217;s content, followed by the separator string. If \u003ccode\u003efalse\u003c/code\u003e, the separator string followed by the pie will be appended to the element\u0026#8217;s content. If the target element is completely empty, the pie will become the sole content, this option (as well as the \u003ccode\u003eseparator\u003c/code\u003e option, see below, will be ignored).\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eseparator\u003c/code\u003e: string. Default is \u003ccode\u003e\u0026quot;\u0026amp;nbsp;\u0026quot;\u003c/code\u003e. Will separate the inserted pie from the rest of the content (usually the number), see \u003ccode\u003eprepend\u003c/code\u003e. Ignored for empty elements.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003everticalAlign\u003c/code\u003e: string. Default is \u003ccode\u003e\u0026quot;bottom\u0026quot;\u003c/code\u003e. Defines the CSS-property \u003ccode\u003evertical-align\u003c/code\u003e of the inserted SVG element and thus the vertical alignment. By default, the image is aligned with the bottom of a line. In certain circumstances (like setting a \u003ccode\u003eline-height\u003c/code\u003e style greater than \u003ccode\u003e1em\u003c/code\u003e) you might want to vertically center the image by setting this option to \u003ccode\u003e\u0026quot;middle\u0026quot;\u003c/code\u003e. (This option is ignored in CSS mode, see above, since in that mode no local \u003ccode\u003evertical-align\u003c/code\u003e style will be defined at all, but it\u0026#8217;s left to you to define a global CSS rule for the alignment!)\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eupdate\u003c/code\u003e: boolean. Default is \u003ccode\u003efalse\u003c/code\u003e. If false, the function will do nothing if the target element already contains an \u003ccode\u003esvg\u003c/code\u003e element. Set to \u003ccode\u003etrue\u003c/code\u003e if repeated calls are meant to update the graphic. If \u003ccode\u003etrue\u003c/code\u003e, the function will remove an existing \u003ccode\u003esvg\u003c/code\u003e before inserting a new one. Typically only needed in combination with \u003ccode\u003evalueData\u003c/code\u003e or \u003ccode\u003evalueAttr\u003c/code\u003e, see also: Dynamically updating pies\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003esize\u003c/code\u003e: number. Default is \u003ccode\u003eundefined\u003c/code\u003e. If undefined, the plug-in will try to draw the pie in the actual height of the parent element. Beware: If the element is empty, the browser may have calculated a height of 0! In this case, a default size will be used. Defining this option disables auto-sizing: the provided number will be used as height and width of the \u003ccode\u003esvg\u003c/code\u003e. It has to be a number (in pixels), not a string with a unit! This is typically used on empty elements in combination with \u003ccode\u003evalueData\u003c/code\u003e, \u003ccode\u003evalueAttr\u003c/code\u003e or \u003ccode\u003evalueSelector\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003esizeFactor\u003c/code\u003e: number. Default is 1. The size (either given by \u003ccode\u003esize\u003c/code\u003e option or auto-calculated, if no \u003ccode\u003esize\u003c/code\u003e is explicitly specified) is multiplied by this factor to get the “final” diameter before drawing the chart.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003escale\u003c/code\u003e: number. Default is 1. The already rendered SVG is finally scaled by this factor. In difference to \u003ccode\u003esizeFactor\u003c/code\u003e this does not simply change the diameter/radius of the chart, but scales all other aspects, such as \u003ccode\u003estrokeWidth\u003c/code\u003e, \u003ccode\u003eringWidth\u003c/code\u003e etc., too.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003evalueAttr\u003c/code\u003e: string. Default is \u003ccode\u003eundefined\u003c/code\u003e. Name of a value attribute: If defined, the function will look for an attribute of this name inside the opening tag of the found element, and if found, it will parse this attribute\u0026#8217;s value instead of the element\u0026#8217;s content as the percent value. (If defined but not of type \u0026#8220;string\u0026#8221;, the function will throw an exception.) For accessing \u003ccode\u003edata-*\u003c/code\u003e attributes, the next option \u003ccode\u003evalueData\u003c/code\u003e is usually preferred, use \u003ccode\u003evalueAttr\u003c/code\u003e only if you want to read other attributes (not beginning with \u003ccode\u003edata-\u003c/code\u003e) or if you really want to react to updates to the attribute in the DOM tree.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003evalueData\u003c/code\u003e: string. Default is \u003ccode\u003eundefined\u003c/code\u003e. Mutually exclusive with \u003ccode\u003evalueAttr\u003c/code\u003e, \u003ccode\u003evalueSelector\u003c/code\u003e and \u003ccode\u003evalueInput\u003c/code\u003e! Name of a jQuery data object. When parsing, jQuery will create data objects for each \u003ccode\u003edata-*\u003c/code\u003e attribute, e.g. for an attribute \u003ccode\u003edata-percent=\u0026quot;50\u0026quot;\u003c/code\u003e in the HTML, the jQuery function \u003ccode\u003edata(\u0026quot;percent\u0026quot;)\u003c/code\u003e will return the \u003cem\u003enumber\u003c/em\u003e 50 (not a string). In this example, you may specify the option \u003ccode\u003evalueData: \u0026quot;percent\u0026quot;\u003c/code\u003e to access the data from the \u003ccode\u003edata-percent\u003c/code\u003e attribute. This is \u003cem\u003enearly\u003c/em\u003e equivalent to \u003ccode\u003evalueAttr: \u0026quot;data-percent\u0026quot;\u003c/code\u003e, but differs in two important respects: Firstly, numbers are automatically recognized and parsed, so the \u003ccode\u003evalueAdapter\u003c/code\u003e does not have to parse the string itself, secondly (and most important), value updates set by calling the jQuery function \u003ccode\u003edata(id, newValue)\u003c/code\u003e (e.g. \u003ccode\u003e$(selector).data(\u0026quot;percent\u0026quot;, oldvalue++)\u003c/code\u003e) will be recognized when updating the pies. Be aware that jQuery does not update data-attributes upon calling the \u003ccode\u003edata\u003c/code\u003e-setter-function. Attributes and stored data objects only match initially, but updates to the data objects are not propagated to the string attributes in the DOM tree. So if you were using option \u003ccode\u003evalueAttr: \u0026quot;data-percent\u0026quot;\u003c/code\u003e instead of \u003ccode\u003evalueData\u003c/code\u003e and wanted to dynamically update the pie, you\u0026#8217;d have to explicitly update the data attribute via jQuery function \u003ccode\u003eattr(\u0026quot;data-percent\u0026quot;, newValueAsString)\u003c/code\u003e, whereas use of \u003ccode\u003evalueData\u003c/code\u003e enables you to simply update the value via \u003ccode\u003edata(\u0026quot;percent\u0026quot;, newValueAsNumber)\u003c/code\u003e, which is simpler and more efficient. (If this option is defined but not of type \u0026#8220;string\u0026#8221;, the function will throw an exception.)\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003evalueSelector\u003c/code\u003e: jQuery-Selector (string). Default is \u003ccode\u003eundefined\u003c/code\u003e. Mutually exclusive with \u003ccode\u003evalueAttr\u003c/code\u003e, \u003ccode\u003evalueData\u003c/code\u003e and \u003ccode\u003evalueInput\u003c/code\u003e! If defined, the function will apply a jQuery search within the selected element to find a sub-element whose text content is to be used as a value. Usually, the whole text content of the node previously selected (to which the progresspie plug-in is applied) is interpreted as the value. If you want to have more content, maybe for CSS styling reasons, and the actual value is in a sub-element, but the pie should not be inserted into that sub-element but into the previously selected main element, then this option is for you. The examples page demonstrates an application of this option.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003evalueInput\u003c/code\u003e: jQuery result set containing an input element or alternatively a jQuery-selector (string) referring to an input element. Default is \u003ccode\u003eundefined\u003c/code\u003e. Mutually exculsive with \u003ccode\u003evalueAttr\u003c/code\u003e, \u003ccode\u003evalueData\u003c/code\u003e and \u003ccode\u003evalueSelector\u003c/code\u003e. If this option is defined, the value for the pie will be read from that input (from the jQuery result set passed in this option or, in case a selector string was passed, from the resultset obtained by \u003ccode\u003e$(selector)\u003c/code\u003e) via jQuery\u0026#8217;s \u003ccode\u003e.val()\u003c/code\u003e method. \u003cem\u003eThis option is only available in the \u003ccode\u003esetupProgressPie()\u003c/code\u003e function and not with \u003ccode\u003eprogressPie({…options…})\u003c/code\u003e!\u003c/em\u003e The setup will then not only define the options for the progress pie (or ring), but it will also add an \u003cem\u003eevent listener\u003c/em\u003e to that input (via jQuery\u0026#8217;s \u003ccode\u003e.on()\u003c/code\u003e method executed on the result set), which will update the pie upon changes to the input (by simply calling \u003ccode\u003eprogressPie()\u003c/code\u003e on the associated result set). More specifically, by default the event handler listens to the \u003ccode\u003echange\u003c/code\u003e event, but you can override that default with the following option:\n\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003evalueInputEvents\u003c/code\u003e: String, default is \u003ccode\u003e\u0026quot;change\u0026quot;\u003c/code\u003e. Space-separated list of event names the input event listener (added by \u003ccode\u003esetupProgressPie()\u003c/code\u003e when the \u003ccode\u003evalueInput\u003c/code\u003e option is given) will react to (by updating the pie). If \u003ccode\u003evalueInput\u003c/code\u003e is undefined, this option will be ignored.\u003c/li\u003e\n\u003cli\u003ePlease note that, if you should later change the setup by a succeeding call of \u003ccode\u003esetupProgressPie\u003c/code\u003e and change the \u003ccode\u003evalueInput\u003c/code\u003e or \u003ccode\u003evalueInputEvents\u003c/code\u003e option, this will \u003cem\u003enot\u003c/em\u003e deregister the event handlers registered by the first call! If needed, the \u003ccode\u003e.off()\u003c/code\u003e method has to be called manually!)\u003c/li\u003e\n\u003c/ul\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003evalueAdapter\u003c/code\u003e: function. Default: see below. The valueAdapter function is executed when interpreting the value, i.e. either the element\u0026#8217;s content (string), the value of the attribute denoted by the \u003ccode\u003evalueAttr\u003c/code\u003e option (also a string) or the data object denoted by the \u003ccode\u003evalueData\u003c/code\u003e option. It has to map the value (string or number) to a number within the range [0..100], which is then used to calculate the pie graphic. So if you have raw data that\u0026#8217;s not a percent value (for example an hour value out of [0..12]), you may write an own valueAdapter reading this value and returning an int in [0..100]. (See examples page.)\n\n\u003cul\u003e\n\u003cli\u003eIf you use the \u003ccode\u003evalueData\u003c/code\u003e option, the type of the argument is the type of the object stored in the data model. This is usually a string or a number, but your own script code controls the type of objects stored there.\u003c/li\u003e\n\u003cli\u003eIf you don\u0026#8217;t use the \u003ccode\u003evalueData\u003c/code\u003e option, the type of the argument is always \u003ccode\u003estring\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003eThe default valueAdapter \u003ccode\u003e$.fn.progressPie.defaults.valueAdapter\u003c/code\u003e (which is used whenever this option \u003ccode\u003evalueAdapter\u003c/code\u003eis undefined) applies \u003ccode\u003eparseInt\u003c/code\u003e to any \u003ccode\u003estring\u003c/code\u003e argument, returns any \u003ccode\u003enumber\u003c/code\u003e argument unchanged and returns \u003ccode\u003e0\u003c/code\u003e for an argument of any other type.\u003c/li\u003e\n\u003c/ul\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ecolor\u003c/code\u003e: string or function. Default is \u003ccode\u003eundefined\u003c/code\u003e. If undefined, the color of the pie depends on the \u003ccode\u003emode\u003c/code\u003e option, see above. A valid string value of this option would be a color name like \u003ccode\u003enavy\u003c/code\u003e or color code like \u003ccode\u003e#888\u003c/code\u003e, \u003ccode\u003e#FF00BC\u003c/code\u003e, \u003ccode\u003ergb(10,20,255)\u003c/code\u003e. If the value is a function, this function has to read one parameter of type number (0..100) and return a color code (string). If the option is neiter \u003ccode\u003eundefined\u003c/code\u003e nor a string nor a function, the plug-in will throw an exception.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ecolorAttr\u003c/code\u003e: string. Default is \u003ccode\u003eundefined\u003c/code\u003e. Only evaluated if \u003ccode\u003ecolor\u003c/code\u003e is undefined. Name of a color attribute: If defined, the function will look for an attribute of this name inside the opening tag of the found element, and if found, will try to use the attribute\u0026#8217;s content (string) to set the pie color. The attribute must contain a color name or code (see \u003ccode\u003ecolor\u003c/code\u003e).\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ecolorFunctionAttr\u003c/code\u003e: string. Default is \u003ccode\u003eundefined\u003c/code\u003e. Only evaluated if no color has already been set with \u003ccode\u003ecolor\u003c/code\u003e or \u003ccode\u003ecolorAttr\u003c/code\u003e. Name of an attribute containing JavaScript code (as string literal) for calculating a color.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eanimate\u003c/code\u003e: boolean or object. Default is \u003ccode\u003eundefined\u003c/code\u003e. May be set to \u003ccode\u003etrue\u003c/code\u003e for default animation options (defined in \u003ccode\u003ejQuery.fn.progressPie.defaultAnimationAttributes\u003c/code\u003e) or to an object containing valid SMIL options (key-value-pairs like \u003ccode\u003edur\u003c/code\u003e for the animation duration) in order to set up a customized animation. Animation is applied for static pies when rendering the page (the animation then starts at 0% and gradually fills the chart up to the assigned percent value) and is also applied for each redraw of the chart (animating the transition from the previous to the newly set value). See separate animation examples page and jsDoc for the \u003ccode\u003edefaultAnimationAttributes\u003c/code\u003e object.\n\n\u003cul\u003e\n\u003cli\u003eIf you use the \u003ccode\u003einner\u003c/code\u003e option (see below) to add a second or even more values, these inner options inherit the \u003ccode\u003eanimate\u003c/code\u003e option in case they don\u0026#8217;t define it themselves. To disable an inherited animation for an inner value, \u003ccode\u003einner.animate\u003c/code\u003e may simply be set to \u003ccode\u003efalse\u003c/code\u003e.\u003c/li\u003e\n\u003c/ul\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eanimateColor\u003c/code\u003e: boolean. Default is \u003ccode\u003eundefined\u003c/code\u003e. Effectless if the \u003ccode\u003eanimate\u003c/code\u003e option is not set (or \u003ccode\u003efalse\u003c/code\u003e) or if the color of the chart is constant. So let\u0026#8217;s assume you use a color function, so that a value change also may cause a change of the diagram\u0026#8217;s color:\n\n\u003cul\u003e\n\u003cli\u003eIf this option is set to \u003ccode\u003efalse\u003c/code\u003e, the chart will immediately be drawn in the final color, the \u003ccode\u003eanimate\u003c/code\u003e option will only add a value transition. Especially when incrementing or decrementing the value and redrawing/updating the pie, the color will change abruptly even before the value change transition starts.\u003c/li\u003e\n\u003cli\u003eIf this option is set to \u003ccode\u003etrue\u003c/code\u003e, in addition to the value transition also a color transition is added. Note that the easiest, ‘direct’ color transition between start and target color is used, i.e. the intermediate colors do not necessarily comply with your color function\u0026#8217;s results for the intermediate percent values!\u003c/li\u003e\n\u003cli\u003eIf this option is left \u003ccode\u003eundefined\u003c/code\u003e, a \u003cem\u003edefault color transition mode\u003c/em\u003e is used, which means: Upon the \u003cem\u003efirst\u003c/em\u003e drawing of a pie (loading the page), the pie will immediately be drawn in the final color (as with \u003ccode\u003efalse\u003c/code\u003e value), only the value will be filled animatedly. Each \u003cem\u003eredraw/update\u003c/em\u003e on the other hand will use color transition (as with \u003ccode\u003etrue\u003c/code\u003e value).\u003c/li\u003e\n\u003cli\u003e\u003cem\u003eThe latter (default mode) is the recommended setting, only define the \u003ccode\u003eanimateColor\u003c/code\u003e option if you either want to completely disable color transitions for redraws (\u003ccode\u003efalse\u003c/code\u003e) or if you explicitly want to enable color animation even for the first drawing upon page load (\u003ccode\u003etrue\u003c/code\u003e).\u003c/em\u003e\u003c/li\u003e\n\u003c/ul\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003erotation\u003c/code\u003e: string, boolean or object. Default is \u003ccode\u003eundefined\u003c/code\u003e. If this option is ‘truthy’ (i.e. not \u003ccode\u003eundefined\u003c/code\u003e, not \u003ccode\u003efalse\u003c/code\u003e, not \u003ccode\u003e0\u003c/code\u003e etc.), the (outer) pie or ring fragment will be animated by rotating around its center. The default speed is one rotation per second, the default direction is clockwise. (Both are applied, if you set \u003ccode\u003erotation: true\u003c/code\u003e.) If the option is a string, it has to be a duration definition, i.e. a number with a time unit. It will define the rotation speed by setting the duration for one full (clockwise) rotation. Legal values are numbers with units like \u003ccode\u003e\u0026quot;2s\u0026quot;\u003c/code\u003e for two seconds or \u003ccode\u003e\u0026quot;500ms\u0026quot;\u003c/code\u003e for 500 milliseconds, i.e. half a second. The \u003ccode\u003erotation\u003c/code\u003e option may also be assigned an object with \u003cem\u003etwo (sub-)properties\u003c/em\u003e: 1. \u003ccode\u003eduration\u003c/code\u003e defining the duration of one turn (just like the simple string value for \u003ccode\u003erotation\u003c/code\u003e), 2. \u003ccode\u003eclockwise\u003c/code\u003e is a boolean defining the rotation direction. Set this to \u003ccode\u003efalse\u003c/code\u003e for an anti-clockwise rotation.\u003cbr /\u003e\nIt\u0026#8217;s not recommended to define a \u003ccode\u003erotation\u003c/code\u003e for pies or rings acually measuring a progress, but for usage with constant values to draw a “busy-indicator” like a rotating ring with a small gap. The constant value (like 90% for a ring with a 10% gap) may be specified by setting a \u003ccode\u003evalueAdapter\u003c/code\u003e function returning this constant. See \u003ccode\u003eexamples.html\u003c/code\u003e!\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eglobalTitle\u003c/code\u003e: string. Default is \u003ccode\u003eundefined\u003c/code\u003e. If defined, this string will be added as a title to the whole SVG image. What a title does, depends on the platform. A typical modern desktop web browser, for example, will usually display this title as a so called tooltip whenever the mouse cursor rests on the image for some time.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003etitle\u003c/code\u003e: string. Default is \u003ccode\u003eundefined\u003c/code\u003e. Similar to \u003ccode\u003eglobalTitle\u003c/code\u003e, but the title string is not applied to the (rectangular) SVG image as a whole, but only to the pie or ring (foreground pie or ring as well as background circle). Both options can be combined: If so, a desktop browser usually displays the \u003ccode\u003etitle\u003c/code\u003e whenever the mouse cursor rests on the pie or ring itself, and the \u003ccode\u003eglobalTitle\u003c/code\u003e if it rests on some other area of the SVG\u0026#8217;s canvas (like the empty circle inside a ring chart, the cut-out area of a pie or the areas outside the circular chart).\u003cbr /\u003e\nThe main purpose, however, of the specific \u003ccode\u003etitle\u003c/code\u003e option is to label the values of multiple pies/rings obtained by use of the \u003ccode\u003einner\u003c/code\u003e option (also see examples).\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003einner\u003c/code\u003e: Object. Default is \u003ccode\u003eundefined\u003c/code\u003e. This object may contain a subset of the option properties described above {\u003ccode\u003emode\u003c/code\u003e, \u003ccode\u003ecolor\u003c/code\u003e, \u003ccode\u003ecolorAttr\u003c/code\u003e, \u003ccode\u003ecolorFunctionAttr\u003c/code\u003e, \u003ccode\u003evalueData\u003c/code\u003e, \u003ccode\u003evalueAttr\u003c/code\u003e, \u003ccode\u003evalueSelector\u003c/code\u003e, \u003ccode\u003evalueAdapter\u003c/code\u003e, \u003ccode\u003esize\u003c/code\u003e, \u003ccode\u003estrokeWidth\u003c/code\u003e, \u003ccode\u003estrokeColor\u003c/code\u003e, \u003ccode\u003estrokeDashes\u003c/code\u003e, \u003ccode\u003eoverlap\u003c/code\u003e, \u003ccode\u003eringWidth\u003c/code\u003e, \u003ccode\u003eringEndsRounded\u003c/code\u003e, \u003ccode\u003eanimate\u003c/code\u003e, \u003ccode\u003eanimateColor\u003c/code\u003e, \u003ccode\u003erotation\u003c/code\u003e, \u003ccode\u003etitle\u003c/code\u003e, \u003ccode\u003einner\u003c/code\u003e (recursive)}. If \u003ccode\u003einner\u003c/code\u003e is defined, then \u003cem\u003etwo\u003c/em\u003e piecharts will be drawn: An outer, larger chart, described with all the other options, and a second, smaller, inner pie on top of the outer. The inner circle\u0026#8217;s value might be taken from a second attribute (denoted by \u003ccode\u003einner.valueAttr\u003c/code\u003e) or might be calculated from the same value string as the outer value, just by a different \u003ccode\u003einner.valueAdapter\u003c/code\u003e mapping. At least one of these two options should be defined. Also, the inner pie should have a different color than the outer one, defined by \u003ccode\u003einner.mode\u003c/code\u003e or \u003ccode\u003einner.color\u003c/code\u003e. If \u003ccode\u003einner.size\u003c/code\u003e is specified, the outer \u003ccode\u003esize\u003c/code\u003e option should also be set manually and should be larger than \u003ccode\u003einnser.size\u003c/code\u003e. If \u003ccode\u003einner.size\u003c/code\u003e is left undefined, the inner pie is automatically slightly smaller than the outer one (approx. two thirds of the outer). If the \u003ccode\u003einner\u003c/code\u003e option contains yet another \u003ccode\u003einner\u003c/code\u003e option, than a third pie with those options is added, and so on.\u003c/li\u003e\n\u003cli\u003eCSS class name options. Individual components of the rendered SVG graphic are equipped with CSS class attributes. This enables you to apply external CSS styling rules. The following options may be added to the progressPie function call in order to override the default CSS class names:\n\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003ecssClassBackgroundCircle\u003c/code\u003e: string. Defaults to \u003ccode\u003e\u0026quot;progresspie-background\u0026quot;\u003c/code\u003e. This value get set as CSS class (via an attribute \u003ccode\u003eclass=\u0026quot;progresspie-background\u0026quot;\u003c/code\u003e) to the closed circle shape always drawn as background behind the actual pie or ring.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ecssClassForegroundPie\u003c/code\u003e: string. Defaults to \u003ccode\u003e\u0026quot;progresspie-foreground\u0026quot;\u003c/code\u003e. Just like the option above, only this class is assigned to the actual pie or ring segment drawn on top of the background circle.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ecssClassOuter\u003c/code\u003e: string. Defaults to \u003ccode\u003e\u0026quot;progresspie-outer\u0026quot;\u003c/code\u003e. In case you specify the \u003ccode\u003einner\u003c/code\u003e option in order to display a second (or even more) inner pies or rings, this class is assigned to both background and foreground of the outer graph. E.g. the outer background circle is equipped by default with an attribute \u003ccode\u003eclass=\u0026quot;progresspie-background progresspie-outer\u0026quot;\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ecssClassInner\u003c/code\u003e: string. Defaults to \u003ccode\u003e\u0026quot;progresspie-inner\u0026quot;\u003c/code\u003e. In case you specify the \u003ccode\u003einner\u003c/code\u003e option, this CSS class is assigned to the second (i.e. the (first) inner) graph just like the \u003ccode\u003ecssClassOuter\u003c/code\u003e option is to the outer graph. In case you use nested \u003ccode\u003einner\u003c/code\u003e options, starting with the third chart (the “inner inner chart”) a number (starting with 2) is appended to this class name. E.g. the foreground of the third (“inner inner”) chart will bear the attribute \u003ccode\u003eclass=\u0026quot;progresspie-foreground progresspie-inner2\u0026quot;\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003ePlease note that these four options must be “root options” of the plug-in call. I.e. it\u0026#8217;s not supported to add these options to an \u003ccode\u003einner\u003c/code\u003e option object.\u003c/li\u003e\n\u003c/ul\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eoptionsByPercent\u003c/code\u003e: function. Default is \u003ccode\u003eundefined\u003c/code\u003e. You may specify a function which takes the percent value (0..100, if a value adapter is used, this is the value returned by the adapter) and either returns \u003ccode\u003enull\u003c/code\u003e or an object with progresspie options from this very list, depending on the percent value. If, for some value, the function returns \u003ccode\u003enull\u003c/code\u003e, it has no effect. If, for some value(s) it returns an object, the options returned will override the global options passed directly to the jQuery plug-in. So, for example, you may specify a function returning null for any value \u0026gt; 0, but returning some other options for rendering a rotating ring for a value of still 0%. (Actually, this is a more universal version of setting a \u003ccode\u003ecolor\u003c/code\u003e function, since it may not only override a global color based on the depicted value, but may also change other properties like size, stroke with, rotation etc.)\n\n\u003cul\u003e\n\u003cli\u003eNote: If this function returns, in some case, an object containing an option like \u003ccode\u003evalueData\u003c/code\u003e, \u003ccode\u003evalueAttr\u003c/code\u003e, or \u003ccode\u003evalueSelector\u003c/code\u003e, this may retrospectively change the raw and percent value, but neither \u003ccode\u003eoptionsByPercent\u003c/code\u003e nor \u003ccode\u003eoptionsByRawValue\u003c/code\u003e will be called a second time.\u003c/li\u003e\n\u003c/ul\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eoptionsByRawValue\u003c/code\u003e: function. Default is \u003ccode\u003eundefined\u003c/code\u003e. Alternative to \u003ccode\u003eoptionsByPercent\u003c/code\u003e: While the latter is given a percent value (numer in 0..100) calculated by the value adapter (see option \u003ccode\u003evalueAdapter\u003c/code\u003e), this function is given the same raw value which is also fed into the value adapter function. This may be a string or a number, as explained in more detail in the description of the \u003ccode\u003evalueAdapter\u003c/code\u003e function. If you don\u0026#8217;t define a \u003ccode\u003evalueAdapter\u003c/code\u003e option, you probably won\u0026#8217;t need this option either but should stick to the \u003ccode\u003eoptionsByPercent\u003c/code\u003e function, wich is guaranteed to receive a number argument.\n\n\u003cul\u003e\n\u003cli\u003eNote 1: If this function returns, in some case, an object containing an option like \u003ccode\u003evalueData\u003c/code\u003e, \u003ccode\u003evalueAttr\u003c/code\u003e, or \u003ccode\u003evalueSelector\u003c/code\u003e, this may retrospectively change the raw value, but this function won\u0026#8217;t be called a second time.\u003c/li\u003e\n\u003cli\u003eNote 2: Should you specify both, \u003ccode\u003eoptionsByRawValue\u003c/code\u003e and \u003ccode\u003eoptionsByPercent\u003c/code\u003e, both will be executed in this order, i.e. first the \u003ccode\u003eoptionsByRawValue\u003c/code\u003e may extend the global opions, after which the \u003ccode\u003eoptionsByPercent\u003c/code\u003e function will be executed, which may, yet again, extend the global options and especially may also override global options or those returned by \u003ccode\u003eoptionsByRawValue\u003c/code\u003e.\u003c/li\u003e\n\u003c/ul\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003econtentPlugin\u003c/code\u003e: string or function or array of strings and functions. Default is \u003ccode\u003eundefined\u003c/code\u003e. Specify a content plug-in function to add content on top of a pie chart or inside of a ring chart. If you want to apply more than one content plug-in, enumerate the plug-ins in an array.\u003cbr /\u003e\nSee section “SVG Content plug-ins”.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003econtentPluginOptions\u003c/code\u003e: object or array of objects (same size as \u003ccode\u003econtentPlugin\u003c/code\u003e). If the \u003ccode\u003econtentPlugin\u003c/code\u003e option is set, this object may provide plug-in-specific options for configuring each of the content plug-ins. See section “SVG Content plug-ins”.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003emargin\u003c/code\u003e: number or array of up to four numbers. Defaults to 0. With this option you may enlarge the SVG image around the actual pie chart, i.e. define the with of a transparent area (margin) around the pie. Effectively, this simply defines a larger \u003ccode\u003eviewBox\u003c/code\u003e for the SVG. (Normally you should not need this, it should be preferrable, if you want a margin around a pie chart in your HTML page, to just define a margin around the SVG image itself or its container element via CSS. But if you should, for some reason, really want to define a margin around the pie \u003cem\u003einside\u003c/em\u003e the SVG, this option is for you.) If you assign just a number, that number denotes the width of the margin on all four sides, the result will still be a square image, just a bit larger. If you assign an array of four numbers (e.g. \u003ccode\u003emargin: [1,2,3,4]\u003c/code\u003e), the first defines the top margin in pixels, the second\u0026#8217;s the right margin, the third number defines the bottom margin and the last is the left margin. I.e. the margins are enumerated clockwise starting at the top (12 o\u0026#8217;clock), just like in CSS\u0026#8217;s short-hand margin syntax. Also analogous to CSS, if you enumerate less than four numbers in that array, the left margin will equal the right margin, if you don\u0026#8217;t list a third value, the bottom margin will equal the top margin.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003epadding\u003c/code\u003e: number or array of up to four numbers. Defaults to 0. This is very similar to the \u003ccode\u003emargin\u003c/code\u003e property, only this is an \u003cem\u003einner\u003c/em\u003e border/area inserted between the margin and the pie chart. If you specify both, the \u003ccode\u003eviewBox\u003c/code\u003e will thus be enlarged in each direction by the sum of padding and margin. If you specify only one of both, you will normally not see a difference – at least not if you don\u0026#8217;t use certain \u003cem\u003econtent plug-ins\u003c/em\u003e: A content plug-in may draw content not only in the actual chart\u0026#8217;s area, but also into the padding. Take the \u003ccode\u003eimage\u003c/code\u003e plug-in for example, which may be used to add a background image to a chart. The image will fill the background of the actual chart plus its padding, but not its margin. See content plug-in examples page!\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch4 id=\"dynamicallyupdatingpies\"\u003eDynamically updating pies\u003c/h4\u003e\n\n\u003cp\u003eThe default usage is to have some static percent values (or even other kinds of values which can be transformed to a percent value using a value adapter function, see options / examples) and to insert pie graphs visualizing those values.\u003c/p\u003e\n\n\u003cp\u003eBut of course your values might get updated (via JavaScript). If that happens, the derived pie charts are not automatically updated too, but your script code updating the values has to trigger a pie update as well.\u003c/p\u003e\n\n\u003cp\u003eIn fact, the existing SVG code does not really get updated (meaning: modified), but completely replaced by a newly generated SVG image.\u003c/p\u003e\n\n\u003cp\u003eIn order to redraw a pie, you \u003cem\u003emight\u003c/em\u003e simply use usual \u003ccode\u003e$(target).progressPie({options...})\u003c/code\u003e call, repeating the options all over. But \u003cem\u003eif\u003c/em\u003e you do that, pay attention to the \u003ccode\u003eupdate\u003c/code\u003e option: If you leave it set to false, existing graphics won\u0026#8217;t be replaced, but only missing graphics will be drawn:\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003eIn default mode (i.e. your value is content of an HTML element and the SVG gets prepended (or appended) to this content) a dynamic value update is usually achieved by:\n\n\u003cul\u003e\n\u003cli\u003eoverwriting the content with a new value, effectively removing the previously rendered pie, and\u003c/li\u003e\n\u003cli\u003ere-calling the plug-in to render any missing pies. Since the content replacement has already removed the previous pie from the document, the \u003ccode\u003eupdate\u003c/code\u003e option may stay set to false (default value).\u003c/li\u003e\n\u003c/ul\u003e\u003c/li\u003e\n\u003cli\u003eIn \u003ccode\u003evalueData\u003c/code\u003e or \u003ccode\u003evalueAttr\u003c/code\u003e mode (the number is not visible but present as an attribute to the element whose content usually—but not necessarily—consists only of the pie), an update is best achieved by:\n\n\u003cul\u003e\n\u003cli\u003eoverwriting the value data (using jQuery\u0026#8217;s \u003ccode\u003edata()\u003c/code\u003e function) or attribute and\u003c/li\u003e\n\u003cli\u003ere-calling the plug-in with option \u003ccode\u003eupdate: true\u003c/code\u003e.\u003c/li\u003e\n\u003c/ul\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003eBut usually, the options should stay constant and only the displayed value changes. In this case, it\u0026#8217;s best not to repeat the options with each update call.\u003c/p\u003e\n\n\u003cp\u003eTherefore, the \u003cem\u003erecommended\u003c/em\u003e way is to setup the options once before first drawing the pie(s) (using the \u003ccode\u003esetupProgressPie()\u003c/code\u003e function) and then to redraw it (them) by only calling the parameterless \u003ccode\u003eprogressPie()\u003c/code\u003e function (see section Basics above). If you do that, you also don\u0026#8217;t have to bother thinking about the \u003ccode\u003eupdate\u003c/code\u003e option: When you use \u003ccode\u003esetupProgressPie()\u003c/code\u003e and don\u0026#8217;t specify the \u003ccode\u003eupdate\u003c/code\u003e option, it automatically defaults to true, meaning each parameterless \u003ccode\u003eprogressPie()\u003c/code\u003e call will update existing pies.\u003c/p\u003e\n\n\u003cp\u003eHave a look at the examples page to see updates in action.\u003c/p\u003e\n\n\u003cp\u003eSince version 2.0.0, updates may also use transitions, such that the update triggers an animation smoothly increasing (or decreasing) the pie or ring chart\u0026#8217;s state starting from the old value (before the update) and ending with the current value. (SMIL animations are not supported by all browsers, especially neither Microsoft Internet Explorer nor Edge support them. The charts will sill be updated on those browsers, only the animation will be missing.)\nTo use animation, simply add the \u003ccode\u003eanimate\u003c/code\u003e option, maybe combined with the \u003ccode\u003eanimateColor\u003c/code\u003e option, see above, to the setup.\u003c/p\u003e\n\n\u003cp\u003eSee the separate \u003ccode\u003eexamplesAnimation.html\u003c/code\u003e page for demonstration.\u003c/p\u003e\n\n\u003ch4 id=\"overwritingdefaultoptions\"\u003eOverwriting default options\u003c/h4\u003e\n\n\u003cul\u003e\n\u003cli\u003eYou may insert a JavaScript code executed immediately when loading the document (but only after loading the jQuery plug-in) that modifies the \u003ccode\u003e$.fn.progressPie.defaults\u003c/code\u003e object by either overwriting a property with a new default value other than that described above or by introducing a new property with a default value for an option that is normally undefined by default.\u003c/li\u003e\n\u003cli\u003eThe default color for progresspies (\u003ccode\u003e#888\u003c/code\u003e) is defined in the property \u003ccode\u003ecolor\u003c/code\u003e of the default Mode enum constant: \u003ccode\u003e$.fn.progressPie.Mode.GREY.color\u003c/code\u003e. This is a string property and may be overwritten with any valid color code in order to set a different default color for the default mode (\u003ccode\u003eGREY\u003c/code\u003e).\u003c/li\u003e\n\u003cli\u003eSimilarly, the default colors for modes \u003ccode\u003eCOLOR\u003c/code\u003e, \u003ccode\u003eGREEN\u003c/code\u003e and \u003ccode\u003eRED\u003c/code\u003e are stored in properties of the Mode enum values:\n\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003e$.fn.progressPie.Mode.RED.value\u003c/code\u003e is a number between 0 and 255 (inclusive), i.e. a byte, defaulting to 200.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e$.fn.progressPie.Mode.GREEN.value\u003c/code\u003e is also a byte defaulting to 200.\u003c/li\u003e\n\u003cli\u003eThe color in mode \u003ccode\u003eRED\u003c/code\u003e is simply \u003ccode\u003ergb($.fn.progressPie.Mode.RED.value, 0, 0)\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003eThe color in mode \u003ccode\u003eGREEN\u003c/code\u003e is thus \u003ccode\u003ergb(0, $.fn.progressPie.Mode.GREEN.value, 0)\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003eThe color in mode \u003ccode\u003eCOLOR\u003c/code\u003e is calculated by \u003ccode\u003e$.fn.progressPie.colorByPercent(number)\u003c/code\u003e as an RGB code also based on these constants.\u003c/li\u003e\n\u003cli\u003eThus, if you want to use these modes but want to adjust the brightness of the calculated colors, you may adjust these properties.\u003c/li\u003e\n\u003c/ul\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch4 id=\"writingyourowncolorfunction\"\u003eWriting your own color function\u003c/h4\u003e\n\n\u003cp\u003eAs described above, by simply setting the option \u003ccode\u003e{mode: $.fn.progressPie.Mode.COLOR}\u003c/code\u003e, the color of the pie get dynamically calculated based on the percent value, and the colors used for that are in some degree customizable via overwriting \u003ccode\u003e$.fn.progressPie.Mode.GREEN.value\u003c/code\u003e or \u003ccode\u003e…RED.value\u003c/code\u003e.\u003c/p\u003e\n\n\u003cp\u003eBut if you want more flexibility in dynamically setting a color, you may provide your own JavaScript function which receives the percent value as parameter (number) and has to return a string describing the color (like \u003ccode\u003e#3bf\u003c/code\u003e or \u003ccode\u003ergb(100,255,100)\u003c/code\u003e).\u003c/p\u003e\n\n\u003cp\u003eYou could simply \u003cem\u003eoverwrite\u003c/em\u003e the function \u003ccode\u003e$.fn.progressPie.colorByPercent\u003c/code\u003e. This way your function would always be applied for any pie rendered in \u003ccode\u003eCOLOR\u003c/code\u003e mode.\u003c/p\u003e\n\n\u003cp\u003eBut the more flexible way is to write one or more own color functions and apply them individually to (classes of) pies instead of using the default \u003ccode\u003eCOLOR\u003c/code\u003e mode, which is then still available.\u003c/p\u003e\n\n\u003cp\u003eSimply write your function and then set a reference to it in the options passed to the options, like in:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode\u003e\u0026lt;script type=\u0026quot;text/javascript\u0026quot;\u0026gt;\nfunction blueGt25(percent) {\n  var blue = percent \u0026lt; 25 ? 0 : (percent-25)*3; //range from 0 to 3*75 = 225 ( = max brightness for value of 100%)\n  return \u0026quot;rgb(0,0,\u0026quot; + blue + \u0026quot;)\u0026quot;;\n}\n\t\n$(function() {\n  $(\u0026quot;.test.myblue\u0026quot;).progressPie({color:blueGt25});\n});\n\u0026lt;/script\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eThe example above defines a color function which sets the pie color to black for all values of 0% to 25% inclusive. For values greater than 25% the color is blue: an rgb code with red and green values of 0 and a blue component growing brighter with the percent value up to 225 (a little darker than the brightest blue (255)).\u003c/p\u003e\n\n\u003cp\u003eOf course, a color function may also be embedded inline in the options object, if it\u0026#8217;s not needed elsewhere. The following example defines an inline function setting one (greenish) color for values starting at 50% and another color (reddish) for lower values:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode\u003e$(\u0026quot;.test.myfunc\u0026quot;).progressPie({color:function(percent) {\n  return percent \u0026gt;= 50 ? \u0026quot;#3f3\u0026quot; : \u0026quot;#f33\u0026quot;;\n}});\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eLast but not least you may \u003cstrong\u003ereuse the internal color function\u003c/strong\u003e \u003ccode\u003e$.fn.progressPie.colorByPercent\u003c/code\u003e within your own color function instead of calculating a color code all by yourself: Let\u0026#8217;s say, you want all values between 0% and 50% to be drawn in the same red and apply the default \u003ccode\u003eCOLOR\u003c/code\u003e scheme only for values starting at 50% (green for 100%, yellow for 75%, red for 50%). This could be done the following way:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode\u003efunction colorGt50(percent) {\n  var p = percent \u0026lt;= 50 ? 0 : 2 * (percent - 50);\n  return $.fn.progressPie.colorByPercent(p);\n}\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch4 id=\"valueadaptersanddoublemultiplepies\"\u003evalueAdapters and double/multiple pies\u003c/h4\u003e\n\n\u003cp\u003eIf the source value to be visualized as filled circle (pie) is not a percent value (0..100), you may write your own adapter function for mapping the actual values (any string) to a percent number (any number in [0..100], may be int or float). This mapping might be of arithmetic nature (e.g. converting a value of 0 to 60 minutes into a percent number) or of syntactic nature (e.g. extracting a percent number out of a string also containing other characters)—or both. Use the \u003ccode\u003evalueAdapter\u003c/code\u003e option (see above) to specify your adapter function. (The default value adapter is a function returning any number input unchanged, parsing any string input via \u003ccode\u003eparseFloat\u003c/code\u003e, and otherwise returning 0.)\u003c/p\u003e\n\n\u003cp\u003eIf you want to display \u003cem\u003etwo\u003c/em\u003e values in one graphic (e.g. hours and minutes), that\u0026#8217;s also possible—not as simple to read/understand at first glance, though. Use the \u003ccode\u003einner\u003c/code\u003e option (see above) to specify that and how a second, inner pie should be generated. By adding yet another \u003ccode\u003einner\u003c/code\u003e options into the first \u003ccode\u003einner\u003c/code\u003e option, you may even add a third value and so on.\u003c/p\u003e\n\n\u003cp\u003eThe examples page \u003ccode\u003eexamples.html\u003c/code\u003e contains demonstrations for both options.\u003c/p\u003e\n\n\u003cp\u003eNote: These features are only available with direct use of \u003ccode\u003ejquery-progresspiessvg.js\u003c/code\u003e and not via \u003ccode\u003eprogresspiesvgAppl.js\u003c/code\u003e.\u003c/p\u003e\n\n\u003ch3 id=\"simplifiedusageviaprogresspiesvgappl.js\"\u003eSimplified usage via \u003ccode\u003eprogresspiesvgAppl.js\u003c/code\u003e\u003c/h3\u003e\n\n\u003cp\u003eIf you prefer not to write your own JavaScript-/jQuery-Code in order to apply the progresspie plug-in to selected elements of your choice, you may use this additional JavaScript file. It is a default application of the plug-ins to elements which must meet some conventions.\u003c/p\u003e\n\n\u003cp\u003eIf you include this script into an HTML document, each HTML element \u003cem\u003eof class\u003c/em\u003e \u003ccode\u003eprogresspie\u003c/code\u003e is fitted with a pie chart. This requires the element (which is usually an inline element like a \u003ccode\u003espan\u003c/code\u003e) to contain a number from 0 to 100 (inclusive) as its only content or alternatively in an attribute named \u003ccode\u003edata-percent\u003c/code\u003e.\u003c/p\u003e\n\n\u003cp\u003eBy default the pie is grey. By adding an additional \u003cem\u003eclass\u003c/em\u003e \u003ccode\u003ecolor\u003c/code\u003e, \u003ccode\u003ered\u003c/code\u003e or \u003ccode\u003egreen\u003c/code\u003e you get a dynamically colored resp. statically red or green pie. (These classes must not be combined and activate the corresponding plug-in mode \u003ccode\u003eCOLOR\u003c/code\u003e, \u003ccode\u003eRED\u003c/code\u003e or \u003ccode\u003eGREEN\u003c/code\u003e respectively.)\u003cbr /\u003e\nAdding the class \u003ccode\u003evcenter\u003c/code\u003e activates vertical centering, otherwise the graphic is aligned with the bottom of the element.\u003c/p\u003e\n\n\u003cp\u003eFor user-defined color you may either add an attribute \u003ccode\u003edata-piecolor\u003c/code\u003e defining a static color code or an attribute \u003ccode\u003edata-piecolor-function\u003c/code\u003e providung a string which evaluates to a function mapping a number (range 0..100) to a color code.\u003c/p\u003e\n\n\u003cp\u003eFor adding a pie to an input element with auto-updating the pie when the inputs value changes, use the \u003ccode\u003edata-input\u003c/code\u003e attribute. Its value has to be a jQuery selector for the input which is to provide the percent value. (Note: This simple application script only supports updating on the \u003ccode\u003echange\u003c/code\u003e event, only can read plain percent numbers and does not support error messages for illegal values. For more features, you\u0026#8217;ll have to use the full-featured jQuery plug-in.)\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003eSee JsDoc documentation of the script file (Namespace \u003ccode\u003eprogressPies\u003c/code\u003e) for a more detailed description.\u003c/li\u003e\n\u003cli\u003eSee \u003ccode\u003eexamplesAppl.html\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2 id=\"svgcontentplug-ins\"\u003eSVG Content plug-ins\u003c/h2\u003e\n\n\u003cp\u003eThe progresspieSVG jQuery plug-in provides a private plug-in mechanism itself, which may be used to plug additional drawing logic into the main plug-in, adding SVG content to the pie or ring chart.\u003c/p\u003e\n\n\u003cp\u003eTo apply a content plugin, add the option \u003ccode\u003econtentPlugin\u003c/code\u003e to the argument object you pass to the jQuery plug-in. The value of this option is either a reference to a javascript function (conforming to the plug-in API as described below), or simply the name of a function as a string. In the latter case the function \u003cem\u003emust\u003c/em\u003e be member of the namespace \u003ccode\u003ejQuery.fn.progressPie.contentPlugin\u003c/code\u003e. Only then it can be looked up by its name. This is the recommended namespace for any content plug-in.\u003c/p\u003e\n\n\u003cp\u003eA content plug-in may itself be configured by an object defining options. Any properties defined in an object passed to the jQuery progress pie plug-in via its option \u003ccode\u003econtentPluginOptions\u003c/code\u003e will be passed along to the content plug-in specified by \u003ccode\u003econtentPlugin\u003c/code\u003e.\u003c/p\u003e\n\n\u003cp\u003eYou may also apply \u003cem\u003emore than one\u003c/em\u003e content plug-in: In this case, the \u003ccode\u003econtentPlugin\u003c/code\u003e option as well as the \u003ccode\u003econtentPluginOptions\u003c/code\u003e option have to be arrays of the same size: The \u003ccode\u003econtentPlugin\u003c/code\u003e array enumerates the names of the content plug-ins to apply (in that order), and the \u003ccode\u003econtentPluginOptions\u003c/code\u003e array has to hold the options object for the plug-in with the corresponding index.\u003c/p\u003e\n\n\u003cp\u003eContent plug-ins may draw into the foreground or into the background. Each content plug-in\u0026#8217;s output is inserted as a new layer into the SVG image: A plug-in drawing into the foreground inserts a new layer on top of all already existing layers (i.e. if you enumerate more than one foreground-plug-in in the \u003ccode\u003econtentPlugin\u003c/code\u003e option array, the first one gets put on top of the chart, the second one on top of the first etc.). A plug-in drawing into the background inserts a new layer behind any previously existing (i.e. if you enumerate more than one background-plug-in, the first one\u0026#8217;s output will be placed directly behind the chart, the second one\u0026#8217;s behind the first one\u0026#8217;s etc.).\u003c/p\u003e\n\n\u003cp\u003eShould you use the \u003ccode\u003eMASK\u003c/code\u003e or \u003ccode\u003eIMASK\u003c/code\u003e mode, the pie will not be inserted as a layer (between background and foreground plug-in\u0026#8217;s layers) but will be applied as a mask to the first (topmost) background layer.\u003c/p\u003e\n\n\u003cp\u003eSee separate examples page on content plug-ins for demonstrations.\u003c/p\u003e\n\n\u003ch3 id=\"bundledcontentplug-ins\"\u003eBundled content plug-ins\u003c/h3\u003e\n\n\u003ch4 id=\"controlicons\"\u003eControl Icons\u003c/h4\u003e\n\n\u003cp\u003e\u003ccode\u003ejquery-progresspiesvg-controlIcons.js\u003c/code\u003e is a script file defining three such content plug-ins \u003ccode\u003eplay\u003c/code\u003e, \u003ccode\u003estop\u003c/code\u003e and \u003ccode\u003epause\u003c/code\u003e for drawing media control icons (a right-pointing triange, square or two parallel vertical rectangles, resp.) inside a ring graph.\u003c/p\u003e\n\n\u003cp\u003eBy default, the play-, pause or stop icon is drawn in the same color as the pie/ring chart itself. If combined with a ring chart (i.e. option \u003ccode\u003eringWidth\u003c/code\u003e is set, see above), it is auto-sized to fit inside the ring, otherwise it\u0026#8217;s drawn on top of the pie and auto-sized to fit into the outer circle stroke. These defaults may be overridden by the following options (defined as properties of an object assigned to the \u003ccode\u003econtentPluginOptions\u003c/code\u003e option):\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003ecolor\u003c/code\u003e: string, color code. Defines the color for the control icon.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003emaxSize\u003c/code\u003e: number. If defined, this defines a maximum constraint for the auto-sizing: For the play and stop icon, \u003ccode\u003emaxSize\u003c/code\u003e defines the maximum width and height. The play icon is always a bit larger in height and width than the others, due to the fact that the triangle icon fills much less areas and thus looks smaller.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003eSee the content plug-ins example page for demonstrations of the plug-in and its options.\u003c/p\u003e\n\n\u003ch4 id=\"checkifcomplete\"\u003eCheck if complete\u003c/h4\u003e\n\n\u003cp\u003e\u003ccode\u003ejquery-progresspiesvg-checkComplete.js\u003c/code\u003e is a script file defining a single content plug-in (\u003ccode\u003echeckComplete\u003c/code\u003e). This plug-in will draw a check mark onto a fully filled pie or into a fully closed ring (i.e. on a graph visualizing a 100% value). It won\u0026#8217;t add any content for lower values.\u003c/p\u003e\n\n\u003cp\u003eSee the content plug-ins example page for demonstrations of the plug-in and its options.\u003c/p\u003e\n\n\u003ch4 id=\"erroricons\"\u003eError icons\u003c/h4\u003e\n\n\u003cp\u003eImagine you set up a pie graph for visualizing the progress of a running job of your web application. You set it up once (per \u003ccode\u003esetupProgressPie()\u003c/code\u003e) to configure the looks of the pie itself and you might add the checkComplete-Plugin described above to draw a checkmark on green ground as soon as the job is completed successfully.\u003c/p\u003e\n\n\u003cp\u003eBut maybe the job could also terminate with an error or a warning, and in these cases you would want neither the green check mark for success nor a frozen pie chart which looks like it depicts a still running job. Instead you might want to change the graph into an error or warning icon similar to the white check on green background, e.g. a white cross or exclamation mark on red or green background.\u003c/p\u003e\n\n\u003cp\u003eThis error icons plug-in serves exactly this purpose. In difference from checkComplete, which gets setup at the beginning to show the icon as soon as the progress value reaches 100%, an error or warning icon has to be added retrospectively by an error event handler function or similar means.\u003c/p\u003e\n\n\u003cp\u003eIf you have loaded this plug-in script file, your event handler may show a cross or exclamation mark inside a ring or on a fully filled pie, the exclamation mark may also be rendered onto a triangle hovering on top of the pie or ring graph (or inside the ring). The icon may be drawn on a colored background (e.g. red or yellow) covering the pie or ring chart completely (just like the check mark), or it may be rendered on top of a pie (without opaque background) or inside the ring, if you want the job\u0026#8217;s progress at the time the error occurred to still be visible.\u003c/p\u003e\n\n\u003cp\u003eSee content plug-in example page for demonstrations (and JSDoc for details on all options).\u003c/p\u003e\n\n\u003ch4 id=\"valuedisplay\"\u003eValue Display\u003c/h4\u003e\n\n\u003cp\u003e\u003ccode\u003ejquery-progresspiesvg-valueDisplay.js\u003c/code\u003e is a script file defining content plug-ins for drawing a value inside a ring graph.\u003c/p\u003e\n\n\u003cp\u003eThis script defines two content plug-ins: \u003ccode\u003epercent\u003c/code\u003e and \u003ccode\u003erawValue\u003c/code\u003e. Both are designed to be combined with ring charts (i.e. usage of the progressPie plug-in with the \u003ccode\u003eringWidth\u003c/code\u003e option set) and draw a number (value) and optionally a unit label into the ring. The \u003ccode\u003epercent\u003c/code\u003e plug-in always renders a percent value (0..100).\u003c/p\u003e\n\n\u003cp\u003eIf the chart is defined with other than percent values and a \u003ccode\u003evalueAdapter\u003c/code\u003e function is used to convert the raw value to a percent value, then the \u003ccode\u003epercent\u003c/code\u003e plug-in will render the result of the valueAdapter function, while the \u003ccode\u003erawValue\u003c/code\u003e plug-in will draw the unconverted, raw value. The \u003ccode\u003epercent\u003c/code\u003e plug-in always adds the label \u0026#8220;%\u0026#8221; to the value, while the \u003ccode\u003erawVale\u003c/code\u003e plug-in takes a \u003ccode\u003eunit\u003c/code\u003e argument defining an \u003cem\u003eoptional\u003c/em\u003e label to append to the value.\u003c/p\u003e\n\n\u003cp\u003eThe plug-ins accept the following options (defined via \u003ccode\u003econtentPluginOptions\u003c/code\u003e):\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003eunit\u003c/code\u003e: String. Default is \u003ccode\u003eundefined\u003c/code\u003e. Only for \u003ccode\u003erawValue\u003c/code\u003e plug-in, ignored by \u003ccode\u003epercent\u003c/code\u003e plugin: This defines the unit label to append to the raw value, e.g. \u0026#8220;sec.\u0026#8221;\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003esingleLine\u003c/code\u003e: boolean. Default is \u003ccode\u003eundefined\u003c/code\u003e. If truthy, the unit (\u0026#8220;%\u0026#8221; or value of \u003ccode\u003eunit\u003c/code\u003e) will be put \u003cem\u003ebehind\u003c/em\u003e the value into the same line, otherwise (default) \u003cem\u003ebelow\u003c/em\u003e the value in a second line.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003efontSizeFactor\u003c/code\u003e: Number. Default is 1.0 (or 0.9 if \u003ccode\u003esingleLine\u003c/code\u003e is truthy). The font-size for the value is the inner radius of the ring multiplied by this factor.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eunitFontSizeFactor\u003c/code\u003e: Number. Default is 0.35. Defines the font-size for the unit label.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ecolor\u003c/code\u003e: String, color code: Overrides the default color for value and unit (which is the same color as that of the pie/ring graph itself).\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003eInstead of passing an individual options object to the progressPie plugin via its \u003ccode\u003econtentPluginOptions\u003c/code\u003e option, you may also globally alter the defaults by manipulating the object \u003ccode\u003e$.fn.progressPie.contentPlugin.valueDisplayDefaults\u003c/code\u003e.\u003c/p\u003e\n\n\u003cp\u003eSee the content plug-ins example page for demonstrations of the plug-in and its options.\u003c/p\u003e\n\n\u003ch4 id=\"image\"\u003eImage\u003c/h4\u003e\n\n\u003cp\u003e\u003ccode\u003ejquery-progresspiesvg-image.js\u003c/code\u003e is a script file defining a content plug-in for inserting an external image as additional layer to the chart. The image may be used as background image or placed on top of the chart in the foreground (as do the other plug-ins above). If the image covers areas outside the actual chart\u0026#8217;s circle, it may optionally be clipped to that circle or it may be allowed to draw outside of it. In the latter case, the \u003ccode\u003epadding\u003c/code\u003e option of the chart may be used to even enlarge the area outside of the chart that may be filled with the image.\u003c/p\u003e\n\n\u003cp\u003eThe image is automatically scaled to fit into the \u003cem\u003etarget area\u003c/em\u003e. If it is wider than the \u003cem\u003etarget area\u003c/em\u003e, then it will be horizontally centered in the higher area, leaving equally sized transparent stripes above and under the image. If the image is higher than the \u003cem\u003etarget area\u003c/em\u003e, it will be horizontally centered, leaving transparent gaps to the left and to the right.\u003c/p\u003e\n\n\u003cp\u003eThe \u003cem\u003etarget area\u003c/em\u003e is defined as follows:\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003eIf the chart is a pie (i.e. the \u003ccode\u003eringWidth\u003c/code\u003e option is not set / undefined) or if the chart is a ring and the image plug-in\u0026#8217;s \u003ccode\u003efullSize\u003c/code\u003e option (see below) is set, then the target area is the square around the chart, optionally enlarged by the \u003ccode\u003epadding\u003c/code\u003e option of the main \u003ccode\u003eprogressPie\u003c/code\u003e function.\u003c/li\u003e\n\u003cli\u003eIf the chart is a ring chart (\u003ccode\u003eringWidth\u003c/code\u003e defined) and the image plug-in\u0026#8217;s \u003ccode\u003efullSize\u003c/code\u003e is \u003cem\u003enot\u003c/em\u003e set, the target area is the square around the blank circle inside the ring, i.e. the target area\u0026#8217;s width and heigh are the chart\u0026#8217;s diameter minus the double \u003ccode\u003eringWidth\u003c/code\u003e. This way, a circular image (or clipped by the \u003ccode\u003eclipCircle\u003c/code\u003e option) will fit into the free space inside the ring. By default, the image plug-in\u0026#8217;s \u003ccode\u003emargin\u003c/code\u003e option (see below) will in this case default to 1, leaving a 1px free space between the ring and the image.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003eThe plug-in accepts the following options (via \u003ccode\u003econtentPluginOptions\u003c/code\u003e):\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003ehref\u003c/code\u003e: String, mandatory. URL specifying the image file to load.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eclipCircle\u003c/code\u003e: boolean, defaults to \u003ccode\u003efalse\u003c/code\u003e. If true, the target area (square) is reduced to a circle. The image is clipped by this circle, i.e. all areas of the image outside the circle will be invisible.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003efullSize\u003c/code\u003e: boolean, defaults to \u003ccode\u003efalse\u003c/code\u003e. Only affects drawing on a ring chart (i.e. with option \u003ccode\u003eringWidth\u003c/code\u003e set). In this case, the value \u003ccode\u003etrue\u003c/code\u003e causes the image to cover the whole ring graph (plus optional padding) instead of just the free space inside the ring.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003einBackground\u003c/code\u003e: boolean, defaults to \u003ccode\u003etrue\u003c/code\u003e. \u003ccode\u003etrue\u003c/code\u003e means the image is inserted as background layer (with the chart on top of the image), \u003ccode\u003efalse\u003c/code\u003e inserts a foreground layer overlapping the chart. This only makes a difference if chart and image overlap or if the \u003ccode\u003eMASK\u003c/code\u003e mode is used (since the mask refers to the topmost background layer).\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003emargin\u003c/code\u003e: number, defaults to \u003ccode\u003eundefined\u003c/code\u003e: Defines the margin in pixels left free around the image inside its \u003cem\u003etarget area\u003c/em\u003e (see above). For a progress \u003cem\u003epie\u003c/em\u003e or if the \u003ccode\u003efullSize\u003c/code\u003e option is truthy, this value (if the property is not set) defaults to zero. For a progress \u003cem\u003ering\u003c/em\u003e without \u003ccode\u003efullSize\u003c/code\u003e option, the default margin value (if the property is not set) is 1.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch5 id=\"someusecases\"\u003eSome use cases\u003c/h5\u003e\n\n\u003cul\u003e\n\u003cli\u003eInsert an image into the free space of a progress ring (similar to the other plug-ins).\u003c/li\u003e\n\u003cli\u003eAdd a background image to be drawn behind the chart.\u003c/li\u003e\n\u003cli\u003eDefine an image to fill the chart such that the pie or ring is not filled by a soldid color but with the image. Use the \u003ccode\u003eMASK\u003c/code\u003e mode with a background image to achieve this, see examples.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch4 id=\"backgroundrectangle\"\u003eBackground Rectangle\u003c/h4\u003e\n\n\u003cp\u003eAdds a background layer to the chart filled with a rectangle. You may define a stroke and / or filling for the rectangle, so this may be used to add a rectangular border around the chart or the background may be filled with a solid or semi-transparent color. Yet this is primarily meant to be combined with background images, for example you might add a semi-transparent rectangular layer on top of a background image layer and the chart may be used as a mask for this rectangle. See examples page for demonstration.\u003c/p\u003e\n\n\u003cp\u003eThe rectangle covers a \u003cem\u003etarget area\u003c/em\u003e which is exactly the same as the \u003ccode\u003eimage\u003c/code\u003e plug-in\u0026#8217;s target area, see above.\u003c/p\u003e\n\n\u003cp\u003eThe plug-in accepts the following options (via \u003ccode\u003econtentPluginOptions\u003c/code\u003e):\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003estroke\u003c/code\u003e: string defining the stroke of the rectangle (a color code or \u003ccode\u003enone\u003c/code\u003e)\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003efill\u003c/code\u003e: string defining the filling of the rectangle (a color code or \u003ccode\u003enone\u003c/code\u003e)\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003estrokeWidth\u003c/code\u003e: number, optional: Width of the stroke in pixels.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003eAt least on of the options \u003ccode\u003estroke\u003c/code\u003e or \u003ccode\u003efill\u003c/code\u003e has to be specified.\u003c/p\u003e\n\n\u003ch3 id=\"writingyourowncontentplug-insapi\"\u003eWriting your own content plug-ins (API)\u003c/h3\u003e\n\n\u003cp\u003eYou may create you own content plug-in:\u003c/p\u003e\n\n\u003cp\u003eWith the older version of this API (of ProgressPieSVG V1.x), a content plug-in is simply a single function for drawing the content. Sine V2.0.0, ProgressPieSVG supports an extended API where your plug-in is an object consisting of a \u003ccode\u003edraw\u003c/code\u003e method for drawing the content and optional further methods for controlling whether the content should be drawn into the foreground (on top of the chart, default) or in the background (with the chart on top), or even whether the chart should be drawn at all in case the content plug-in is full sized.\u003c/p\u003e\n\n\u003cp\u003eThe plug-in function resp. object \u003cem\u003eshould\u003c/em\u003e be in the namespace \u003ccode\u003ejQuery.fn.progressPie.contentPlugin\u003c/code\u003e. If it is, the user may simply state the its name as a string literal in the \u003ccode\u003econtentPlugin\u003c/code\u003e option. Otherwise the options needs to hold a JavaScript reference to the content plug-in (function or object).\u003c/p\u003e\n\n\u003cp\u003eJust like when \u003ca href=\"https://learn.jquery.com/plugins/basic-plugin-creation/\"\u003ewriting jQuery plug-ins\u003c/a\u003e, you may locally bind the \u003ccode\u003e$\u003c/code\u003e sybol to \u003ccode\u003ejQuery\u003c/code\u003e in an immediately invoked function expression like (old API):\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode\u003e( function($) {\n    $.fn.progressPie.contentPlugin.yourPlugin = function(args) {\n        …\n    }\n} (jQuery));\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eA plug-in using the new API could look something like this:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode\u003e( function($) {\n    $.fn.progressPie.contentPlugin.yourPlugin = {\n        draw: function(args) {\n            …\n        },\n        hidesChartIfFullSize: function(args) {\n            …\n        }\n} (jQuery));\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch4 id=\"thedrawmethod\"\u003eThe \u003ccode\u003edraw\u003c/code\u003e method\u003c/h4\u003e\n\n\u003cp\u003eThe \u003ccode\u003edraw\u003c/code\u003e function of your object (new API) resp. your plug-in function (old API) has to take exactly one argument (let\u0026#8217;s assume you call the formal parameter \u003ccode\u003eargs\u003c/code\u003e like in the examples above). When the \u003ccode\u003edraw\u003c/code\u003e function gets called by ProgressPieSVG, this parameter will hold an object with at least the following methods and properties:\u003c/p\u003e\n\n\u003ch5 id=\"methodsoftheparameterobject\"\u003eMethods of the parameter object\u003c/h5\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003cp\u003e\u003ccode\u003enewSvgElement\u003c/code\u003e: function(name). Your plug-in may call this function to insert a new SVG node directly into the pie graph SVG. The argument \u003ccode\u003ename\u003c/code\u003e defines the element/tag name for the new element. The function returns a reference to the newly created node which you need in order to adding attributes or child elements. You \u003cem\u003edon\u0026#8217;t\u003c/em\u003e have to worry about inserting that node into the SVG\u0026#8217;s DOM tree, on the other hand: All nodes one content plug-in produces via this method are automatically grouped, and the group gets automatically added to the SVG\u0026#8217;s DOM—either in the foreground (i.e. on top of the chart produced by the progressPie jQuery plug-in itself and the output of any previously called content plug-in that drew into the foreground) or in the background (as a new background layer behind the chart and the outputs of any previously executed content plug-ins), depending on the return value of the implementation of your content plug-in\u0026#8217;s \u003ccode\u003einBackground\u003c/code\u003e method, see below.\u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003e\u003ccode\u003enewSvgSubelement\u003c/code\u003e: function(parent, name). If you want to add child elements to an SVG element, use this function. The first argument takes a reference to parent element you want to add a child node to, the second argument takes the tag name like in \u003ccode\u003enewSvgElement\u003c/code\u003e.\u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003e\u003ccode\u003enewDefElement\u003c/code\u003e: function(name). Works similar to \u003ccode\u003enewSvgElement\u003c/code\u003e, only this method appends a new child node to the \u003ccode\u003e\u0026lt;defs\u0026gt;…\u0026lt;/defs\u0026gt;\u003c/code\u003e element of the SVG and returns a reference to the newly created node. Use this whenever you need to create a definition (e.g. a \u003ccode\u003emask\u003c/code\u003e or \u003ccode\u003eclipPath\u003c/code\u003e) that you want to reference from a content node. In order to be able to reference it, you will usually have to add an ID to the newly created node, using the \u003ccode\u003ecreateId\u003c/code\u003e method described below:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode\u003evar cp = args.newDefElement(\u0026quot;clipPath\u0026quot;);\nvar id = args.createId(\u0026quot;clipcircle\u0026quot;);\ncp.setAttribute(\u0026quot;id\u0026quot;, id);\n\u003c/code\u003e\u003c/pre\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003e\u003ccode\u003ecreateId\u003c/code\u003e: function(prefix). Takes the string argument and adds a string suffix in order to guarantee that repeated calls of this method return different strings. This ensures that if your plug-in gets called for more than one chart in a web page, for each of these a new, unique ID will be generated. (Keep in mind the uniqueness is only \u0026#8216;relative\u0026#8217; to the prefix, the createId method does not make sure that the target HTML does not already contain elements with this ID that have not been created with this method. So choose a rather \u0026#8220;unique\u0026#8221; prefix and this method makes sure, the plug-in may be applied to more than one chart without losing the uniqueness.)\u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003e\u003ccode\u003eisFullSize\u003c/code\u003e: function(). Returns \u003ccode\u003efalse\u003c/code\u003e if the content should typically be fitted into a ring diagram, that is in ring mode without a truthy \u003ccode\u003efullSize\u003c/code\u003e option (in the \u003ccode\u003econtentPluginOptions\u003c/code\u003e). Returns \u003ccode\u003etrue\u003c/code\u003e if the \u003ccode\u003econtentPluginOptions\u003c/code\u003e contain an option named \u003ccode\u003efullSize\u003c/code\u003e wich is \u003ccode\u003etrue\u003c/code\u003e (or at least truthy) \u003cem\u003eor\u003c/em\u003e in pie mode, i.e. if progressPie\u0026#8217;s \u003ccode\u003eringWith\u003c/code\u003e option is undefined.\u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003e\u003ccode\u003eisCssMode\u003c/code\u003e: function(). Returns \u003ccode\u003etrue\u003c/code\u003e if two conditions are met: a) The progress pie is drawn in CSS mode (\u003ccode\u003emode\u003c/code\u003e option is set to \u003ccode\u003e$.fn.progressPie.Mode-CSS\u003c/code\u003e) \u003cem\u003eand\u003c/em\u003e b) the \u003ccode\u003econtentPluginOptions\u003c/code\u003e do \u003cem\u003enot\u003c/em\u003e specify a \u003ccode\u003ecolor\u003c/code\u003e option. In this case, the \u003ccode\u003ecolor\u003c/code\u003e property (see below) is not of type string (but typically undefined). Your content plug-in should in these cases (i.e. if \u003ccode\u003ecolor\u003c/code\u003e is not of type string or this method returns true) react by firstly not accessing the \u003ccode\u003ecolor\u003c/code\u003e property and secondly enabling the user to define the content colors via CSS (e.g. add CSS classes for easy CSS selection and either completely omit styles like \u003ccode\u003estroke\u003c/code\u003e and \u003ccode\u003efill\u003c/code\u003e or apply default styles in SVG attributes only (and not as inline CSS styles in a \u003ccode\u003estyle\u003c/code\u003eattribute), as inline CSS styles have higher priority than external CSS styles while SVG attributes like \u003ccode\u003efill\u003c/code\u003e and \u003ccode\u003estroke\u003c/code\u003e have a lower priority than any CSS styles and are thus easily overridable by stylesheets wihtout the need for an \u003ccode\u003e!important\u003c/code\u003e declaration).\u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cp\u003e\u003ccode\u003egetBackgroundRadius\u003c/code\u003e: function(ignoreMargin). This may be used to calculate a radius for a potentially filled background circle for your content based on some standard content plug-in options: If your plug-in is combined with a pie (i.e. the option \u003ccode\u003eringWidth\u003c/code\u003e of the \u003ccode\u003eprogressPie\u003c/code\u003e parameter object is not defined) or if it\u0026#8217;s combined with a ring chart and the \u003ccode\u003econtentPluginOptions\u003c/code\u003e include a truthy \u003ccode\u003efullSize\u003c/code\u003e property (in other words: if the \u003ccode\u003eisFullSize()\u003c/code\u003e method returns \u003ccode\u003etrue\u003c/code\u003e), then this will return the \u003ccode\u003etotalRadius\u003c/code\u003e property (see below).\u003cbr /\u003e\nIf your content plug-in gets combined with a ring graph without a \u003ccode\u003efullSize\u003c/code\u003e option (\u003ccode\u003eisFullsSize() === false\u003c/code\u003e), then this will return the \u003ccode\u003eradius\u003c/code\u003e property (see below), i.e. the radius of the free space inside the ring.\u003cbr /\u003e\nIf the parameter \u003ccode\u003eignoreMargin\u003c/code\u003e is truthy, the \u003ccode\u003etotalRadius\u003c/code\u003e resp. \u003ccode\u003eradius\u003c/code\u003e will be returned unchanged. Otherwise (especially if no parameter is given), the function will search for a \u003ccode\u003emargin\u003c/code\u003e property in the \u003ccode\u003econtentPluginOptions\u003c/code\u003e object and it will subtract this margin from the radius. If no \u003ccode\u003emargin\u003c/code\u003e property is found, a default margin will be subtracted. In pie mode or with \u003ccode\u003efullSize\u003c/code\u003e option set, the default margin is zero (0), in ring mode without \u003ccode\u003efullSize\u003c/code\u003e option, the default margin is one (1), i.e. the default radius for a filled circle to be fitted inside a ring graph will leave a margin/gap of 1 pixel between the content background and the ring graph.\u003cbr /\u003e\nActually, these two default margins are defined via:\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003e$.fn.progressPie.defaults.defaultContentPluginBackgroundMarginFullSize: 0\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e$.fn.progressPie.defaults.defaultContentPluginBackgroundMarginInsideRing: 1\u003c/code\u003e\nI.e. you may override these defaults by overwriting those properties of the defaults object.\u003cbr /\u003e\nUsage hint: If you always want to draw a colored background, you may simply call \u003ccode\u003egetBackgroundRadius()\u003c/code\u003e without parameters. If, on the other hand, your content plug-in defines an optional property for the background color (let\u0026#8217;s assume, it\u0026#8217;s called \u003ccode\u003ebackgroundColor\u003c/code\u003e) and if your plug-in won\u0026#8217;t draw a filled background for its content, but draw the content directly onto the pie or ring chart if that option is not set, then you might want to ignore the margin option as long as \u003ccode\u003ebackgroundColor\u003c/code\u003e is not set by calling:\u003cbr /\u003e\n\u003ccode\u003egetBackgroundRadius(!opts.backgroundColor);\u003c/code\u003e or similar. The content plug-ins \u003ccode\u003echeckComplete\u003c/code\u003e and \u003ccode\u003eerrorIcons\u003c/code\u003e, for example, make use of this feature, since the main icon already leaves a free margin to the edge of the filled background and a second margin between the latter and the ring, but without a filled background, these double margins would yield unnecessarily small icons.\u003c/li\u003e\n\u003c/ul\u003e\u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003e\u003cp\u003e\u003ccode\u003eaddBackground\u003c/code\u003e: function(radius, cssClassName): If you want to draw something onto a circular filled background, call this method. It takes at least a number as argument and draws a filled circle with that argument taken as radius. The center of the circle is always the center of the pie. \u003cem\u003eOptionally\u003c/em\u003e, you may also pass a string as second parameter. If you do that, the background circle will be equipped with a \u003ccode\u003eclass\u003c/code\u003e attribute of that value. The color for the filled circle has to be defined in the property \u003ccode\u003ethis.backgroundColor\u003c/code\u003e. If this option is falsy (e.g. undefined) \u003cem\u003eand\u003c/em\u003e no \u003ccode\u003ecssClassName\u003c/code\u003e argument has been provided (or the argument is not a string), the method will not draw anything. If \u003ccode\u003ethis.backgroundColor\u003c/code\u003e is undefined, \u003cem\u003ebut\u003c/em\u003e \u003ccode\u003ecssClassName\u003c/code\u003e is defined, then the background circle will be added without \u003ccode\u003efill\u003c/code\u003e style, but the circle may then be filled by an external CSS stylesheet (using the \u003ccode\u003ecssClassName\u003c/code\u003e in the selector of the CSS rule).\u003cbr /\u003e\nThis method is typically combined with \u003ccode\u003egetBackgroundRadius()\u003c/code\u003e, i.e. you would usually pass the result of \u003ccode\u003egetBackgroundRadius()\u003c/code\u003e as argument to this method.\u003cbr /\u003e\nSee the source code of \u003ccode\u003eerrorIcons.js\u003c/code\u003e or \u003ccode\u003echeckComplete.js\u003c/code\u003e for example usages.\u003c/p\u003e\u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003e\u003ccode\u003eaddBackgroundRect\u003c/code\u003e: function(stroke, fill, strokeWidth): Similar to \u003ccode\u003eaddBackground\u003c/code\u003e, but this method does not draw an autosized filled circle but instead an autosized rectangle with an optional outline (defined by the arguments \u003ccode\u003estroke\u003c/code\u003e and \u003ccode\u003estrokeWidth\u003c/code\u003e) and optionally filled (\u003ccode\u003efill\u003c/code\u003e argument). The rectangle is inserted into the group holding your content plug-in\u0026#8217;s output “on root level” (it\u0026#8217;s appended by \u003ccode\u003enewSvgElement('rect')\u003c/code\u003e) and it\u0026#8217;s autosized to fill the whole chart area plus its padding. If you set a \u003ccode\u003estrokeWidth\u003c/code\u003e, the size of the rectangle is calculated such that the whole stroke fits into this target area (chart\u0026#8217;s area with padding) and is not centered on that area\u0026#8217;s border. The arguments: \u003ccode\u003estroke\u003c/code\u003e may be a color code defining the color for the outline or \u003ccode\u003enone\u003c/code\u003e for no outline at all, \u003ccode\u003efill\u003c/code\u003e analogously defines the fill color (or no filling at all). \u003ccode\u003estrokeWidth\u003c/code\u003e has to be a number (if \u003ccode\u003estroke !== 'none'\u003c/code\u003e) defining the width of the outline in pixels. See the examples for the \u003ccode\u003ebackgroundRect\u003c/code\u003e content plug-in (in the content plug-ins examples page) for a demonstration.\u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003e\u003ccode\u003egetContentPlugin\u003c/code\u003e: function. This function takes a valid \u003ccode\u003econtentPlugin\u003c/code\u003e option, i.e. either a function or object reference to another content plug-in, or a string whose name has to be the name of a content plug-in function or object in the namespace \u003ccode\u003ejQuery.fn.progressPie.contentPlugin\u003c/code\u003e. It then returns a reference to the function (resp. object), i.e. if the argument is a function reference or a reference to an object containing a method named \u003ccode\u003edraw\u003c/code\u003e, it gets returned unchanged, if the argument is a string, the plug-in in the namespace gets looked up and the reference is returned. Throws exception if the argument is neither string nor function nor object with \u003ccode\u003edraw\u003c/code\u003e method, or if the string is invalid, i.e. no function (or object with \u003ccode\u003edraw\u003c/code\u003e method) of that name was found in said namespace. Normally content plug-ins won\u0026#8217;t need to call this function, except if they support adding secondary content plug-ins (see \u003ccode\u003echeckComplete\u003c/code\u003e plug-in).\u003c/p\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch5 id=\"propertiesoftheparameterobject\"\u003eProperties of the parameter object\u003c/h5\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003eradius\u003c/code\u003e: number. If the progressPie plug-in draws a simple pie chart (i.e. option \u003ccode\u003eringWidth\u003c/code\u003e is undefined), this is the radius of the pie minus the \u003ccode\u003estrokeWidth\u003c/code\u003e of the surrounding circle. If \u003ccode\u003eringWidth\u003c/code\u003e is set, this is the pie radius minus \u003ccode\u003eringWidth\u003c/code\u003e, i.e. the radius of the free space inside the ring. Your content plug-in should base the size of the content it draws on this value.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003etotalRadius\u003c/code\u003e: number. This is the overall radius of the whole pie or ring graph including the outer circle stroke. This equals half the width and height of the generated SVG.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ecolor\u003c/code\u003e: string (color code). By default this is exaclty the color of the pie/ring chart, unless the \u003ccode\u003econtentPluginOptions\u003c/code\u003e object overrides this.\u003cbr /\u003e\nPlease Note: In CSS mode (\u003ccode\u003eMode.CSS\u003c/code\u003e), this may be \u003ccode\u003eundefined\u003c/code\u003e: The default color is undefined in CSS mode, and if the caller does not add a \u003ccode\u003ecolor\u003c/code\u003e option to the \u003ccode\u003econtentPluginOptions\u003c/code\u003e, it will be left undefined. This case can be queries via the \u003ccode\u003eisCssMode()\u003c/code\u003e method (see above): It returns true, if (and only if) \u003ccode\u003etypeof color !== 'string'\u003c/code\u003e.\u003cbr /\u003e\nYour content plug-in should support a CSS mode: If color is undefined (or \u003ccode\u003eisCssMode()\u003c/code\u003e), then it should avoid adding color styles (like \u003ccode\u003estroke\u003c/code\u003e or \u003ccode\u003efill\u003c/code\u003e) or only add them as SVG attributes, but not as inline CSS inside a \u003ccode\u003estyle\u003c/code\u003e attribute. At least in this case (or better always) it should add a CSS \u003ccode\u003eclass\u003c/code\u003e attribute to the generated content, enabling the user to easily define colors (and even more) in an external CSS stylesheet, just like the original ProgressPieSVG plug-in does (see \u003ccode\u003eexamples.html\u003c/code\u003e\u0026#8217;s section on the CSS mode).\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eprecentValue\u003c/code\u003e: number. The value in 0..100 depicted by the progressPie chart.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003erawValue\u003c/code\u003e: string. The raw string defining the value of the pie chart. This may be a percent number or any other value which gets converted into a percent value by a \u003ccode\u003evalueAdapter\u003c/code\u003e function, see above.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003epieOpts\u003c/code\u003e: object. A reference to the original options object the user passed to the progressPie plug-in. Inside this object you can find, for example, the \u003ccode\u003eringWidth\u003c/code\u003e or the \u003ccode\u003estrokeWidth\u003c/code\u003e option for the outer circle of the pie chart, in case your content plug-in wishes to adapt its own content to some of these pie styles.\u003cbr /\u003e\n\u003cstrong\u003eMethods of \u003ccode\u003epieOpts\u003c/code\u003e\u003c/strong\u003e:\n\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003egetPadding\u003c/code\u003e: function({0..3}): The method evaluates the \u003ccode\u003epadding\u003c/code\u003e property of \u003ccode\u003epieOpts\u003c/code\u003e, which can be a number (default 0) or an array of up to four numbers. This method retrieves all four paddings—top, right, bottom and left—from that property, in that order. That means: \u003ccode\u003egetPadding(0)\u003c/code\u003e returns the setting for the top padding in pixels, \u003ccode\u003egetPadding(1)\u003c/code\u003e returns the right padding, \u003ccode\u003egetPadding(2)\u003c/code\u003e the bottom padding and \u003ccode\u003egetPadding(3)\u003c/code\u003e the setting for the left padding in pixels.\u003cbr /\u003e\nYour content plug-in may evaluate these paddings if it does not only draw content into a ring or onto a pie but if it draws content even into the padding (see bundled \u003ccode\u003eimage\u003c/code\u003e and \u003ccode\u003ebackgroundRect\u003c/code\u003e plug-ins).\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003egetMargin\u003c/code\u003e: function({0..3}): Analogous to \u003ccode\u003egetPadding()\u003c/code\u003e, only this method is retrieving the settings for the margins instead of the padding.\u003cbr /\u003e\nNormally, a content plug-in should not draw content into the padding, thus you normally should not need this method.\u003c/li\u003e\n\u003c/ul\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003eIn addition to these properties, the \u003ccode\u003eargs\u003c/code\u003e object will hold any property the user added to the \u003ccode\u003econtentPluginOptions\u003c/code\u003e object. If your plug-in should define its own properties (such as the \u003ccode\u003efontSizeFactor\u003c/code\u003e option of the Value Display content plug-in described above), simply document these and the user of your content plug-in may insert these options into the \u003ccode\u003econtentPluginOptions\u003c/code\u003e.\u003c/p\u003e\n\n\u003cp\u003eAfter evaluating these arguments, your \u003ccode\u003edraw\u003c/code\u003e function may now insert SVG elements (using the \u003ccode\u003enewSvgElement\u003c/code\u003e function and maybe also \u003ccode\u003enewSvgSubelement\u003c/code\u003e). For positioning these elements, you need to know the origin of the coordinate system: The point (0, 0) refers to the \u003cem\u003ecenter of the circle\u003c/em\u003e!\u003c/p\u003e\n\n\u003cp\u003eAs a very simple example, the following function describes a content plug-in which simply draws a filled square inside the ring graph (or on top of a pie graph) in the same color and with a side length which equals the radius of the circle. So, since (0, 0) is the circle\u0026#8217;s center and the square should be circled and radius is the width and height of the square, its top left corner has to be located at the coordinates (-radius/2, -radius/2):\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode\u003e( function($) {\n    $.fn.progressPie.contentPlugin.mySquare = {\n        draw: function(args) {\n            var square = args.newSvgElement(\u0026quot;rect\u0026quot;);\n            var topleft = - args.radius / 2;\n            square.setAttribute(\u0026quot;x\u0026quot;, topleft);\n            square.setAttribute(\u0026quot;y\u0026quot;, topleft);\n            square.setAttribute(\u0026quot;width\u0026quot;, args.radius);\n            square.setAttribute(\u0026quot;height\u0026quot;, args.radius);\n            square.setAttribute(\u0026quot;style\u0026quot;, \u0026quot;fill: \u0026quot; + args.color + \u0026quot;; stroke: none\u0026quot;);\n        }\n    }\n} (jQuery));\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eHave a look at the source code of the included content plug-ins for more examples.\u003c/p\u003e\n\n\u003ch4 id=\"theinbackgroundmethodorfield\"\u003eThe \u003ccode\u003einBackground\u003c/code\u003e method (or field)\u003c/h4\u003e\n\n\u003cp\u003eThe content plug-in object may contain a property named \u003ccode\u003einBackground\u003c/code\u003e which must be either a boolean field or a boolean method (function which returns a boolean). If it\u0026#8217;s a method, it gets the same parameter object as the \u003ccode\u003edraw\u003c/code\u003e method does and can return true or false dependent on this parameter.\u003c/p\u003e\n\n\u003cp\u003eIf the function returns true (resp. the field is constantly true), the output of your content plug-in will be drawn in the background of the SVG, e.g. the generated pie or ring chart will be drawn on top of your plug-in\u0026#8217;s content. Otherwise (which is the default, also if you don\u0026#8217;t implement this method/field at all), your plug-in\u0026#8217;s output will be drawn in the foreground, on top of the rendered chart.\u003c/p\u003e\n\n\u003ch4 id=\"thehideschartiffullsizemethod\"\u003eThe \u003ccode\u003ehidesChartIfFullSize\u003c/code\u003e method\u003c/h4\u003e\n\n\u003cp\u003eWith the new API, your plug-in may optionally implement a second method (function property) called \u003ccode\u003ehidesChartIfFullSize\u003c/code\u003e, also taking one argument object as parameter.\u003c/p\u003e\n\n\u003cp\u003eIf you implement this, it gets called before the actual progressPie chart is drawn (and before the \u003ccode\u003edraw\u003c/code\u003e method is called).\u003c/p\u003e\n\n\u003cp\u003eIt gets called only under the following circumstances:\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003ethe \u003ccode\u003eprogressPie()\u003c/code\u003e jQuery plug-in is used in pie mode, i.e. option \u003ccode\u003eringWidth\u003c/code\u003e is \u003ccode\u003eundefined\u003c/code\u003e \u003cstrong\u003eor\u003c/strong\u003e\u003c/li\u003e\n\u003cli\u003ethe \u003ccode\u003econtentPluginOptions\u003c/code\u003e include the option \u003ccode\u003efullsize\u003c/code\u003e (with a truthy value).\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003eI.e. if the user wants to draw a progress ring, to use your content plug-in without a \u003ccode\u003efullsize\u003c/code\u003e option, it is assumed that your content plug-in always fits its content into the ring, thus the \u003ccode\u003ehidesChartIfFullSize\u003c/code\u003e method is never applied.\u003c/p\u003e\n\n\u003cp\u003e(See also the \u003ccode\u003eisFullSize()\u003c/code\u003e function of the \u003ccode\u003edraw\u003c/code\u003e method\u0026#8217;s arguments object: The latter will return true under the exact same conditions.)\u003c/p\u003e\n\n\u003cp\u003eIf the above preconditions are met (\u003ccode\u003etypeof ringWidth === 'undefined' || contentPluginOptions.fullsize\u003c/code\u003e) \u003cem\u003eand\u003c/em\u003e your content plug-in\u0026#8217;s \u003ccode\u003ehidesChartIfFullSize()\u003c/code\u003e method returns \u003ccode\u003etrue\u003c/code\u003e (or any truthy value), then and only then the actual progress pie or ring will not be rendered at all, the content plug-in\u0026#8217;s \u003ccode\u003edraw()\u003c/code\u003e method will be called and will be the only code generating SVG content.\u003c/p\u003e\n\n\u003cp\u003e\u003cem\u003eSo what is this good for?\u003c/em\u003e\u003c/p\u003e\n\n\u003cp\u003eA typical application of suppressing the rendering of the actual chart is any case where the content plug-in\u0026#8217;s output would completely cover/occlude the chart anyway (typically by calling \u003ccode\u003eargs.addBackgound(args.getBackgroundRadius())\u003c/code\u003e with the aforementioned \u003ccode\u003efullsize\u003c/code\u003e option or in pie mode). In this case, this mainly keeps the generated SVG slimmer (why render output that will always stay invisible?). But there is also another effect: Assume your pie chart would be drawn in a rather dark color (black, navy, …) and a content plug-in (e.g. the \u003ccode\u003eexclamationMark\u003c/code\u003e plug-in) adds a rather light (e.g. yellow) filled circle on top of that, then this light disc should cover the dark pie completely—theoretically. But practically, probably due to anti-aliasing of the circle\u0026#8217;s outlines, most browsers would actually show a slight dark edge around the light disc, a sort of unwanted halo effect. This was visible with Version 1 of the progressPie plug-in and its included checkComplete-, error- and exclamationMark content plug-ins and was addressed by adapting these content plug-ins to this new API.\u003c/p\u003e\n\n\u003cp\u003e\u003cem\u003eHow should the method be implemented?\u003c/em\u003e\u003c/p\u003e\n\n\u003cp\u003eUsually you should make sure to only return true (and thus eliminate the actual chart completely) if you are absolutely certain, your \u003ccode\u003edraw\u003c/code\u003e method would otherwise completely occlude the chart anyway (except for the potential \u0026#8216;halo\u0026#8217;). Have a look at the content plug-ins \u003ccode\u003eerror\u003c/code\u003e and \u003ccode\u003eexclamationMark\u003c/code\u003e in \u003ccode\u003ejquery-progresspiesvg-errorIcons.js\u003c/code\u003e: These check, that the user really configured a background color and that the color code does not start with \u003ccode\u003ergba\u003c/code\u003e (in which case it would probably draw a semi-transparent background not completely occluding the chart). Also they check that no \u003ccode\u003emargin\u003c/code\u003e option is set which would reduce the size of the configured background and leave some of the chart visible.\u003c/p\u003e\n\n\u003cp\u003eNote: If you implement the \u003ccode\u003einBackground\u003c/code\u003e method, you should also make sure that not both (\u003ccode\u003einBackground\u003c/code\u003e and \u003ccode\u003ehidesChartIfFullSize\u003c/code\u003e) return true simultaneously for the same options. At least it would not make much sense to explicitly put your output into the background of a chart that will not be drawn at all. That\u0026#8217;s why the error icons plug-ins, for example, make sure that \u003ccode\u003ehidesChartIfFullSize\u003c/code\u003e will never return true if \u003ccode\u003einBackground\u003c/code\u003e returns true, i.e. that a chart can only be hidden by an icon in its foreground, not by its background.\u003c/p\u003e\n\n\u003cp\u003eThe \u003ccode\u003ewarning\u003c/code\u003e content plug-in in the same file is a different example: The triangular warning sign will never completely occlude a circular chart, but this plug-in explicitly introduces an option for the user to configure whether he wants his warning sign to be a layer on top of the chart or whether he wants the warning sign alone, without a chart in the background.\u003c/p\u003e\n\n\u003ch5 id=\"propertiesoftheparameterobject\"\u003eProperties of the parameter object\u003c/h5\u003e\n\n\u003cp\u003eThe \u003ccode\u003ehidesChartIfFullSize\u003c/code\u003e method also takes a parameter argument with information probably needed to decide whether to answer with true or false.\u003c/p\u003e\n\n\u003cp\u003eSince this method is called earlier in the whole process than the \u003ccode\u003edraw\u003c/code\u003e method is, it gets only a subset of the information (properties), also the methods of the \u003ccode\u003edraw\u003c/code\u003e method\u0026#8217;s parameter are neither available nor needed here.\u003c/p\u003e\n\n\u003cp\u003eThe following properties are passed to the \u003ccode\u003ehidesChartIfFullSize\u003c/code\u003e method (as properties of its sole parameter):\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003ecolor\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003epercentValue\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003erawValue\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003epieOpts\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003eplus every option defined by the user in \u003ccode\u003econtentPluginOptions\u003c/code\u003e.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003eThe semantics of these properties are the same as in the \u003ccode\u003edraw\u003c/code\u003e methods argument, see above.\u003c/p\u003e\n\n\u003ch2 id=\"license:bsd2-clause\"\u003eLicense: BSD 2-clause\u003c/h2\u003e\n\n\u003cp\u003eCopyright (c) 2015, Immo Schulz-Gerlach, www.isg-software.de\u003cbr /\u003e\nAll rights reserved.\u003c/p\u003e\n\n\u003cp\u003eRedistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:\u003c/p\u003e\n\n\u003col\u003e\n\u003cli\u003e\u003cp\u003eRedistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.\u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003eRedistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.\u003c/p\u003e\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003cp\u003eTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS \u0026#8220;AS IS\u0026#8221; AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\u003c/p\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisg-software%2Fprogresspie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fisg-software%2Fprogresspie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisg-software%2Fprogresspie/lists"}