Namespace: contentPlugin

jQuery.fn.progressPie. contentPlugin

Default namespace for content plug-ins. If you write contentPlugin functions, it is recommended to add them as methods to this object (see bundled jquery-progresspiesvg-controlIcons.js for eample). Though you may use any function as a plugin (if it conforms to the plug-in interface), only functions within this default namespace may be specified by a string holding their function name in the contentPlugin option. Functions not in this namespace have to be referred to by a function reference (an expression evaluating to the very function object).

Any methods of this object documented in the bundled JSDoc are predefined content plug-ins, and member objects are used to define default options for those plug-in methods.

Source:

Members

(static) checkCompleteDefaults

Default Options. This is a public (static) object in order to allow users to globally modify the defaults before using the checkComplete content plug-in.
Properties:
Name Type Description
strokeWidth number Width of the stroke the check mark is drawn width, defaults to 2.
lineCap string Value for SVG style property "line-cap" defining the look of the line ends of the check mark. Defaults to "round".
iconSizeFactorPie number Defines the size of the check icon for a pie graph (i.e. when the ringWidth option is not set) and also for the ring, if the backgroundColor plug-in option is set (it's undefined by default): If r is the total radius of the pie chart, the check mark is fit into an inner circle with radius r * iconSizeFactorPie. Defaults to 0.6 (i.e. filling 60% of the pie). This is ignored, if the iconSizeFactor option is defined! It's just the default value for iconSizeFactor for pie graphs and for filled circular backgrounds inside a ring graph.
iconSizeFactorRing number Defines the size of the check icon for a ring graph (i.e. if the ringWidth option is set) if no backgroundColor option is set (i.e. if the check is drawn directly onto the blank / transparent space inside the ring): If r is the radius of the free space inside the ring, then the check mark is fit into an inner circle with radius r * iconSizeFactorRing. Defaults to 0.8 (i.e. filling 80% of the free space inside the ring). (If set to 1.0, the check mark would touch the ring.) This is ignored, if the iconSizeFactor option is defined! It's just the default value for iconSizeFactor for ring graphs. If a user wants to set an individual size factor in the contentPluginOptions object, he does not have to overwrite one of these two values, but may specify simply a iconSizeFactor property. Only if the latter is undefined, the plug-in will evaluate iconSizeFactorPie or iconSizeFactorRing, depending on the ringWidth option.
fullSize boolean If true and if the plug-in gets called with a ring chart, this causes the icon to be drawn full-size onto the whole chart instead of being fitted into the blank space inside the ring. Should only be combined with the backgroundColor option. Defaults to false.
inBackground boolean If false, the check icon is placed on top of the chart (into the foreground), if true, the check will be drawn as background with the chart on top. Defaults to false.
cssClass string – The content of the class attribute to be added to the check stroke, defaults to "progresspie-check". Allows selection of the check icon for CSS formatting.
cssClassBackgroundCircle string – Optional, default is undefined. If defined, a background circle (behind the actual check mark) will be added to the chart regardless of the presence of the backgroundColor option. Will add a class attribute with this value to the circle element.
Source:

(static) controlIconDefaults

Default Options. This is a public (static) object in order to allow users to globally modify the defaults before using the controlIcon content plug-ins.
Properties:
Name Type Description
sizeFactor number Default sizeFactor for controlIcons, defaults to 0.85. The inner radius of the surrounding ring graph is multiplied with this factor to get the default height and width of the stop or pause icon. The play icon is a little larger in height to compensate it's smaller area.
maxSize number Default maximum size for control icons (in px), defaults to 0 (i.e. no maximum size).
cssClass string Default CSS class name added to the class attribute of the control icons. Defaults to "progresspie-control-icon".
Source:

(static) crossDefaults

Default options for the content plug-in "cross". Extends the jQuery.fn.progressPie.contentPlugin.errorIconsCommonDefaults with the following default option:
Properties:
Name Type Description
backgroundColor string default color for the background circle of the cross icon, defaults to "red".
Source:

(static) errorIconsCommonDefaults

Common default options for all three plug-ins of the errorIcons plug-in package/file, i.e. this object defines default options for the plug-ins "cross", "exclamationMark" and "warning", but only those defaults all three of these plug-ins have in common. For each plug-in there is a separate defaults object extending this one with further plug-in specific defaults.

This is a public (static) object in order to allow users to globally modify the common defaults for all three plug-ins globally.

Properties:
Name Type Description
iconColor string stroke color for the main icon (cross or exclamation mark), defaults to "white".
strokeWidth number stroke width for the main icon (cross or exclamation mark), defaults to 2.
lineCap string value for SVG style property "line-cap" defining the look of the line ends of the cross or exclamation mark. Defaults to "round". The dot/period of the exclamation mark is, by the way, always a circle, except for strokeWidth: 1, but if the lineCap is set to "square", the circle's radius gets slightly increased, because a circle with diameter equal to the with of the rectangular stroke above, seems to be smaller than the stroke.
fullSize boolean when combined with a ring chart (ringWidth option set), the value true causes the error icon to be drawn (just like with pie charts) in full size, i.e. with the outer diameter of the whole ring chart, while the value false causes a smaller icon to be drawn inside of the ring. Defaults to false.
inBackground boolean If false, the error icon is placed on top of the chart (into the foreground), if true, the error icon will be drawn as background with the chart on top. Defaults to false.
withBackground boolean – If false, the filled circle behind the icon stroke will be omitted (and) the icon stroke itself may increase in size since the margin between ring chart and background circle is omitted as well (see examplesContentPlugins for more details on measurements). Defaults to true.
iconSizeFactor number – a number, less than or equal to 1.0. Defaults to 0.6. The radius of the icon will be the radius of the background circle (if present) resp. the radius of the free space inside a ring chart (if no Background circle is drawn and the chart is a ringchart and fullSize is false) resp the total Radius multiplied with this factor. Effectively this defines a padding between the icon and the circumcircle it is fitted into. (see examplesContentPlugins for more details on measurements.)
cssClass: string Defines the class name (content of class attribute) of the actual icon (stroke, foreground). Defaults to "progresspie-erroricon".
cssClassBackgroundCircle: string Defines the class name (content of class attribute) of the background circle (if withBackground is true). Defaults to "progresspie-erroricon-background".
Source:

(static) exclamationMarkDefaults

Default options for the content plug-in "exclamationMark". Extends the jQuery.fn.progressPie.contentPlugin.errorIconsCommonDefaults with the following default option:
Properties:
Name Type Description
backgroundColor string default color for the background circle of the cross icon, defaults to "#ea0".
Source:

(static) imageDefaults

Default Options for the content plug-in "image". This is a public (static) object in order to allow users to globally modify the defaults before using the image content plug-in.
Properties:
Name Type Description
inBackground boolean If false, the image is drawn on top of the chart (into the foreground), if true, the error icon will be drawn as background behind the chart. Defaults to true.
fullSize boolean when combined with a ring chart (ringWidth option set), the value true causes the image to be drawn (just like with pie charts) in full size, i.e. covering the whole chart plus its padding (if greater than zero). Defaults to false.
clipCircle boolean If set to true, the image will be clipped to the area of the circle centered in its square area with diameter equal to the square's side lengths. If the chart's padding is zero and the image is drawn full sized, the image will thus cover exactly the circular chart. If drawn inside a ring with fullSize == true, the image will be clipped to the inner space in order not to overlap the ring. Defaults to false.
Source:

(static) valueDisplayDefaults

Default Options. This is a public (static) object in order to allow users to globally modify the defaults before using the valueDisplay content plug-ins.
Properties:
Name Type Description
singleLine boolean defaults to false, meaning an (optional) unit label is displayed below the value. If true, value and unit are displayed in the same line.
fontSizeFactorTwoLines number Default value for the fontSizeFactor option in case singleLine === false. Defaults to 1.0. The fontSizeFactor value is multiplied by the inner radius to get the font size for the value display.
fontSizeFactorSingleLine number Default value for the fontSizeFactor option in case singleLine === true. Defaults to 0.9
unitFontSizeFactor number default fontSizeFactor for the size of the unit label. Defaults to 0.35
cssClass string value of the class attribute to define a CSS class name for the text element holding the whole text output (value and unit). Defaults to "progresspie-valuedisplay"
cssClassUnit string name of a CSS class to be added to the (optional) tspan element showing the unit of the displayed value. Defaults to "progresspie-unit".
Source:

(static) warningDefaults

Default options for the content plug-in "warning". Extends the jQuery.fn.progressPie.contentPlugin.exclamationMarkDefaults with the following default option:
Properties:
Name Type Description
borderRadius string radius of rounded corners for the triangular background. Defaults to 0. If set to 0, the triangle's corners won't be rounded at all. Larger values result in rounded corners as well as an overall slightly larger triangle icon, since with unchanged size, simply cutting off the sharp corners, a gap/margin would remain between the (imaginary) surrounding circle and the triangle's area. This leaves room to increase the original side length (before clipping the corners).
hideChart boolean Flag indicating that only the warning triangle is to be drawn, i.e. not on top of a pie or ring chart but instead. Defaults to false.
Source:

Methods

(static) backgroundRect(args)

SVG Content Plug-in for jquery-progresspiesvg: Adds a square as background to a progress pie. The square's area is the area of the actual chart plus its padding (padding defaults to zero but can be set in the progress pie's options).

Use this plug-in by adding the option contentPlugin: "backgroundRect" (or contentPlugin: $.fn.progressPie.contentPlugin.backgroundRect) to your call of the progressPie plug-in.

Furthermore, also add the option contentPluginOptions to the progressPie plugin options. The following options are supported:

  • stroke: string defining the stroke of the rectangle (a color code or 'none')
  • fill: string defining the filling of the rectangle (a color code or 'none')
  • strokeWidth: number, optional: Width of the stroke in pixels.

At least on of the options stroke or fill has to be specified. If you only want a filled square without a differently colored outline, only set the fill option and leave the stroke option undefined (no need to set it to 'none'). Or vice-versa: If you want to draw a non-filled square, just set stroke and optionally also strokeWidth.

Please note: This function is called internally by the progressPie jQuery plug-in! Don't call this function directly, but use it as described above!

Parameters:
Name Type Description
args object object holding several arguments provided by the progressPie plug-in, including any option you specified in the object contentPluginOptions.
Source:
Requires:
  • module:jquery-progresspiesvg-min.js

(static) checkComplete(args)

SVG Content Plug-in for jquery-progresspiesvg: Does nothing for values less than 100%, but draws a check mark / tick onto the fully filled pie resp. inside the full ring for a value of 100%. Use by adding the option contentPlugin: "checkComplete" (or contentPlugin: $.fn.progressPie.contentPlugin.checkComplete) to your call of the progresspie plug-in.

Additional arguments may be supplied by adding the option contentPluginOptions to the progressPie plugin options. This is to be an object which may hold the following properties:

  • strokeWidth: Defaults to 2. Width of the stroke for the check mark (not equal to the strokeWidth option of the pie chart (outer circle)
  • lineCap: Defaults to "round", may take any value allowed for the SVG line-cap style, like "square".
  • color: draw the check mark in a specific color (defaults to the color of the surrounding ring chart resp. to white on a pie chart).
  • backgroundColor: Defaults to undefined. If undefined, the check icon is drawn directly onto the fully filled pie resp. onto the blank space inside a fully filled ring. Especially if combined with a ring, you may optionally set this option do draw a filled circle inside the ring and to draw the check mark onto this circle.
  • fullSize: Only for progress rings (and only meant for combination with a backgroundColor): Setting this to true causes the filled background circle of the check icon to fully cover the whole ring chart instead of being drawn inside the free space of the ring. Defaults to false.
  • inBackground: boolean, defaults to false. If set to true, the icon will be drawn behind the chart instead of on top of it. In that case, the chart has to provide some kind of transparency in order for the check icon to be at least partly visible, e.g. by using a foreground color with alpha channel (rgba) or by drawing a ring chart with free/transparent room in the middle.
  • margin: number, defaults to undefined: Only used if the backgroundColor option is set. In that case, it defines the margin in pixels left free around the filled background circle. For a progress pie or if the fullSize option is truthy, this value (if the property is not set) defaults to zero, which means the background completely covers the pie graph. Increasing the value will reduce the icon in size, leaving some of the pie chart visible around it.
    For a progress ring without fullSize option, the default margin value (if the property is not set) is 1, meaning a gap of 1 pixel width is left free between the ring and the filled background. Set this to zero in order for the background to "touch" the ring, or to a negative value in order to (partially) overlap the ring.
  • iconSizeFactor: Defines the ration between the background radius and the radius of the circumcircle of the check's stroke. I.e. if set to 1.0, the check's stroke ends will touch the edge of the background circle, smaller values will leave a margin between the background and the check. This defaults to 0.6 if the check is drawn onto a pie or if the backgroundColor option is set. If the check is drawn directly into the inner space of a ring graph without background color, this defaults to 0.8.
  • animate: boolean or string with duration (number and time unit): If true or string, an animation drawing the check (from left to right) will be added. If the value is a string, it has to be a valid duration value defining the speed of the animation. If "true", the default duration (1s) will be applied.
  • contentPlugin and contentPluginOptions: These options are ignored vor a value of 100%, i.e. in case the check mark gets drawn as content for the progress pie. But if set, this content plug-in will delegate to the alternative content plug-in stated here-in for any percent value less than 100%. I.e.: This plug-in will decide if the percent value is 100 or less, in the first case drawing the check mark as content, while in the second case, i.e. for any percent value in 0..99, the content of this "secondary" plug-in will be added to the pie/ring chart.

Please note: This function is called internally by the progressPie jQuery plug-in! Don't call this function directly, but use it as desrcibed above!

Parameters:
Name Type Description
args object object holding several arguments provided by the progressPie plug-in, including any option you specified in the object contentPluginOptions.
Source:
Requires:
  • module:jquery-progresspiesvg-min.js

(static) cross(args)

SVG Content Plug-in for jquery-progresspiesvg: Draws a cross icon on top of a pie or ring chart.

By default this is a white cross (X) on red background, an icon commonly used to indicate, that an error occurred. Therefore, this plug-in is intended to be used whenever a process, whose progress you were monitoring with a pie or ring chart, terminates abruptly due to an error.

You may choose whether the progress indicator should still remain visible (thus showing an error icon along with the percentual progress value of the state when the error occurred) or should be completely occluded by the error icon:

Drawn onto a pie chart, the icon is drawn on top of the whole pie, by default covering the pie completely by the opaque background color. In order for the progress to remain visible, you may change the background color to a semi transparent background or turn it off completely, simply drawing a cross on top of the pie.

Drawn onto a ring chart, the icon is by default fitted inside the ring, so the ring itself is not occluded. You may customize the gap between the error icon and the ring as well as set a fullsize option in order to completely cover the whole graph, if you prefer to.

See the content plug-in examples page for various demonstrations.

Use this plug-in by adding the option contentPlugin: "cross" (or contentPlugin: $.fn.progressPie.contentPlugin.cross) to your call of the progresspie plug-in.

Additional arguments may be supplied by adding the option contentPluginOptions to the progressPie plugin options. This is to be an object which may hold the following properties:

  • strokeWidth: number, defaults to 2. Width of the stroke for the cross (not equal to the strokeWidth option of the pie chart (outer circle)
  • lineCap: string, defaults to "round", may take any value allowed for the SVG line-cap style, like "square".
  • iconColor: string, color code, defaults to "white": The stroke color for the actual cross icon.
  • withBackground: boolean, defaults to true. I.e. by default a filled background circle will be drawn and the error icon will be drawn on top of that. Set to false to omit this circle and solely draw the error icon.
  • backgroundColor: string, color code, defaults to "red": Sets the fill color for the background circle (if withBackground is not set to false).
  • fullSize: boolean, defaults to false. Only affects drawing on a ring chart (i.e. option ringWidth was set): In this case, the value true causes the background to cover the whole ring graph and not just the free space inside the ring.
  • inBackground: boolean, defaults to false. If false, the content is drawn on top of the pie or ring chart, if true, the pie or ring chart is drawn on top of the error icon. This only makes a difference if both overlap, i.e. if you draw a pie or if the cross icon is larger than the free space inside the ring graph.
  • margin: number, defaults to undefined: Only used if the backgroundColor option is set. In that case, it defines the margin in pixels left free around the filled background circle. For a progress pie or if the fullSize option is truthy, this value (if the property is not set) defaults to zero, which means the background completely covers the pie graph. Increasing the value will reduce the icon in size, leaving some of the pie chart visible around it.
    For a progress ring without fullSize option, the default margin value (if the property is not set) is 1, meaning a gap of 1 pixel width is left free between the ring and the filled background. Set this to zero in order for the background to "touch" the ring, or to a negative value in order to (partially) overlap the ring.
  • iconSizeFactor: number, defaults to 0.6. This defines the ratio between the while error icons size (i.e. the diameter of the circle filled with the backgroundColor and the cross icon itself (i.e. the diameter of the imaginative circle closest surrounding the X icon). In other words: The closer to 1, the larger the cross icon will be and the less margin will remain between the cross and the outer edge of the filled background circle.
  • animate: boolean or string with duration (number and time unit): If true or string, an animation drawing the check (from left to right) will be added. If the value is a string, it has to be a valid duration value defining the speed of the animation. If "true", the default duration (1s) will be applied.
  • cssClass: String, defaults to "progresspie-erroricon". Defines the CSS class of the actual cross icon (path).
  • cssClassBackgroundCircle: String, defaults to "progresspie-erroricon-background". Defines the CSS class of the background circle

Please note: This function is called internally by the progressPie jQuery plug-in! Don't call this function directly, but use it as desrcibed above!

Parameters:
Name Type Description
args object object holding several arguments provided by the progressPie plug-in, including any option you specified in the object contentPluginOptions.
Source:
Requires:
  • module:jquery-progresspiesvg-min.js

(static) exclamationMark(args)

SVG Content Plug-in for jquery-progresspiesvg: Draws an exclamation mark icon on top of a pie or ring chart.

By default this is a white exclamation mark (!) on yellow background, an icon commonly used to indicate a warning.

Other than drawing an exclamation mark instead of a cross and of using a different default background color, this plug-in is practically identical to the "cross" plug-in, so please refer to jQuery.fn.progressPie.contentPlugin.cross for more documentation.

Parameters:
Name Type Description
args object object holding several arguments provided by the progressPie plug-in, including any option you specified in the object contentPluginOptions.
Source:
Requires:
  • module:jquery-progresspiesvg-min.js

(static) image(args)

SVG Content Plug-in for jquery-progresspiesvg: Add an image to a progress pie chart, by default in background, alternatively in foreground. The image has to be available as external file in a web compatible format such as SVG, JPEG or PNG. This plug-in needs at least one argument (option href) specifying the URL from which to load the image. It will insert an image element into the SVG containing this reference URL. When rendering the pie's SVG code, the browser will then resolve this URL and lazily load the actual image resource, just like browsers load image files specified by img tags with href attributes in HTML.

The images, at least background images, used should usually be square (i.e. width == height). Non-square images are shrunk to fully fit into the square target area, vertically resp. horizontally centered.

The target area, in which the image is fitted, is by default a square. You may set the clipCircle option in order to clip this square to a circle (with the square's width as diameter). Non-circular images fitted into that square will then be circularly clipped.

When drawing a pie, the target square is the full area covered by the pie chart plus the padding around it (which defaults to 0 but may be specified via the progressPie's padding option).

When drawing a ring (i.e. progressPie's ringWidth option is defined), then, by default, this target area is fitted into the ring such that its width (and height) is the width of the free space inside the ring minus twice the margin which may optionally be set in the contentPluginOptions, see below. Yet this square area will still overlap the ring (except if the clipCircle option is true, see above).

In ring mode you may set the fullSize option to true. In this case the image's target area is equivalent to that in pie mode.

Via the inBackground option you may specify whether the image is to be positioned on top of the chart or behind it.

A background image may also be used to fill the pie chart (instead of the background behind it). To achieve this, the pie has to be drawn in MASK mode, and the image has to be drawn as its first background (i.e. option inBackground has to be true (default) and no other content plug-in also draw into the background must be inserted before the image). See examples.

To use this content plug-in add the option contentPlugin: "image" (or contentPlugin: $.fn.progressPie.contentPlugin.image) to your call of the progresspie plug-in.

Furthermore, also add the option contentPluginOptions to the progressPie plugin options. This is to be an object which must hold at least an href option. The following options are supported:

  • href: string, mandatory, holding the URL from which to load the image file.
  • clipCircle: boolean, defaults to false. 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.
  • fullSize: boolean, defaults to false. Only affects drawing on a ring chart (i.e. with option ringWidth set): In this case, the value true causes the image to cover the whole ring graph (plus optional padding) instead of just the free space inside the ring.
  • inBackground: boolean, defaults to true. If false, the content is drawn on top of the pie or ring chart, if true, the pie or ring chart is drawn on top of the image. This only makes a difference if both overlap or if the MASK mode is used.
  • margin: number, defaults to undefined: Defines the margin in pixels left free around the image inside its target area. For a progress pie or if the fullSize option is truthy, this value (if the property is not set) defaults to zero. For a progress ring without fullSize option, the default margin value (if the property is not set) is 1.

Please note: This function is called internally by the progressPie jQuery plug-in! Don't call this function directly, but use it as desrcibed above!

Parameters:
Name Type Description
args object object holding several arguments provided by the progressPie plug-in, including any option you specified in the object contentPluginOptions.
Source:
Requires:
  • module:jquery-progresspiesvg-min.js

(static) pause(args)

SVG Content Plug-in for jquery-progresspiesvg: Draw a pause control icon (2 vertical bars) into the ring graph. Usage: See jQuery.fn.progressPie.contentPlugin.stop
Parameters:
Name Type Description
args object object holding several arguments provided by the progressPie plug-in, including any option you specified in the object contentPluginOptions.
Source:
Requires:
  • module:jquery-progresspiesvg-min.js

(static) play(args)

SVG Content Plug-in for jquery-progresspiesvg: Draw a play control icon (triangle pointing to the right) into the ring graph. Usage: See jQuery.fn.progressPie.contentPlugin.stop
Note that the size (height and width) of the play icon is always a bit larger that of the stop or pause icon, because overall the area filled by the triangle is much smaller than that of the square (stop icon). The optional maxSize option specifies the maximum height and with for "stop" and "pause", while the maximum width and height of this "play" symbol are a bit larger than maxSize (currently 20% larger).
Parameters:
Name Type Description
args object object holding several arguments provided by the progressPie plug-in, including any option you specified in the object contentPluginOptions.
Source:
Requires:
  • module:jquery-progresspiesvg-min.js

(static) precent(args)

SVG Content Plug-in for jquery-progresspiesvg: Display the percent value (rounded to integer) with a "%" label inside a ring graph rendered by the progressPie component.

Use by adding the option contentPlugin: "percent" (or contentPlugin: $.fn.progressPie.contentPlugin.percent) to your call of the progresspie plug-in.

Additional arguments may be supplied by adding the option contentPluginOptions to the progressPie plugin options. This is to be an object which may hold the following properties:

  • singleLine: Default is "undefinied". If truthy, the unit label ("%" in this case) is displayed in the same line behind the percent value, otherwise in a new line below the value.
  • fontSizeFactor: Number, Default is 1.0 (0.9 in singleLine mode). The font-size for the percent number inside the ring is the inner radius of the ring multiplied by this factor. E.g. to shrink the text by 10%, set fontSizeFactor to 0.9. A factor larger than 1.0 is not recommended, because the text (especially a "100") might not fit into the graphic!
  • unitFontSizeFactor: Number, Default is 0.35. Defines the font size for the unit label ("%"), see fontSizeFactor.
  • color: color code (string). Defaults to the color of the ring graph (except in CSS mode, where color defaults to undefined, in which case no font color will be set in the SVG itself as long as this property is not set, leaving the font color subject to CSS stylesheets). Override this option in order to draw content in different color than the surrounding ring.
  • cssClass: String. Value for the class attribute. Especially in CSS mode the class enables you to style the font color via CSS. This option can be used to override the default class name ("progresspie-valuedisplay").
  • cssClassUnit: String. If the value display contains a unit label (as sub-element of the text element), this unit is fitted with a class name, too. So you can style the unit string differently from the value display itself. Use this option to override the default class name ("progresspie-unit").

Please note: This function is called internally by the progressPie jQuery plug-in! Don't call this function directly, but use it as desrcibed above!

Parameters:
Name Type Description
args object object holding several arguments provided by the progressPie plug-in, including any option you specified in the object contentPluginOptions.
Source:
Requires:
  • module:jquery-progresspiesvg-min.js

(static) rawValue(args)

SVG Content Plug-in for jquery-progresspiesvg: Display the the raw value of a ring graph (before translation to a percent value via a valueAdapter function) inside the ring graph, optionally combined with a second string, intended as a unit label for the value.

Use by adding the option contentPlugin: "rawValue" (or contentPlugin: $.fn.progressPie.contentPlugin.rawValue) to your call of the progresspie plug-in.

Additional arguments may be supplied by adding the option contentPluginOptions to the progressPie plugin options. This is to be an object which may hold the following properties:

  • unit: String, default is "undefined". If defined (typeof unit === "string"), this string will be displayed behind or below the value. It should be a very short string holding a unit label like "s" or "sec.". If not of type string (especially if left undefined), the value will be the sole content.
  • singleLine: Default is "undefinied". If truthy, the unit label (see above) is displayed in the same line behind the percent value, otherwise in a new line below the value.
  • fontSizeFactor: Number, Default is 1.0 (0.9 in singleLine mode). The font-size for the percent number inside the ring is the inner radius of the ring multiplied by this factor. E.g. to shrink the text by 10%, set fontSizeFactor to 0.9. A factor larger than 1.0 is not recommended, because the text (especially a "100") might not fit into the graphic!
  • unitFontSizeFactor: Number, Default is 0.35. Defines the font size for the unit label, see fontSizeFactor.
  • color: color code (string). Defaults to the color of the ring graph. Overwrite to draw content in different color than the surrounding ring.

Please note: This function is called internally by the progressPie jQuery plug-in! Don't call this function directly, but use it as desrcibed above!

Parameters:
Name Type Description
args object object holding several arguments provided by the progressPie plug-in, including any option you specified in the object contentPluginOptions.
Source:
Requires:
  • module:jquery-progresspiesvg-min.js

(static) stop(args)

SVG Content Plug-in for jquery-progresspiesvg: Draw a stop control icon (square) into the ring graph. Use by adding the option contentPlugin: "stop" (or contentPlugin: $.fn.progressPie.contentPlugin.stop) to your call of the progresspie plug-in.

Additional arguments may be supplied by adding the option contentPluginOptions to the progressPie plugin options. This is to be an object which may hold the following properties:

  • maxSize: maximum size in pixels for the square (width/height of the square)
  • color: draw the icon in a specific color (defaults to the color of the surrounding ring chart). If you omit this option and the chart also has no script-defined color (in CSS mode), this plug-in won't add any inline color styles, but will leave the styling to an external stylesheet (just like the chart itself does in CSS mode).
  • cssClass: custom value for the class attribute to be added to the icon shapes. Defaults to "progresspie-control-icon". The class is specifically useful to define CSS selectors for styling in CSS mode, see above (and see examples).

Please note: This function is called internally by the progressPie jQuery plug-in! Don't call this function directly, but use it as desrcibed above!

Parameters:
Name Type Description
args object object holding several arguments provided by the progressPie plug-in, including any option you specified in the object contentPluginOptions.
Source:
Requires:
  • module:jquery-progresspiesvg-min.js

(static) warning(args)

SVG Content Plug-in for jquery-progresspiesvg: Draws triangular warning sign icon on top of a pie or ring chart.

This resembles the jQuery.fn.progressPie.contentPlugin.exclamationMark plug-in, but it does not fill a complete circle with the background color (by default: yellow), but will fit a triangular sign (optionally with rounded corners) into the circle and draw an exclamation mark (!) onto that triangle. (See examples)

The contentPluginOptions supported by this plug-in are largely identical to those of jQuery.fn.progressPie.contentPlugin.exclamationMark or jQuery.fn.progressPie.contentPlugin.cross, only one option specific to this plug-in has been introduced:

  • borderRadius: number, defaults to 0. Set to a positive value in order for the triangle to be drawn with rounded corners.
  • hideChart: boolean, defaults to false. Set to true in order to draw only the warning sign and suppress the actual chart instead of drawing the warning sign on top of the latter.
Parameters:
Name Type Description
args object object holding several arguments provided by the progressPie plug-in, including any option you specified in the object contentPluginOptions.
Source:
Requires:
  • module:jquery-progresspiesvg-min.js