• drawDonut

A test project is available here

drawDonut( domElement , {
           size: number,
           value: number,
           total: number,
           unit: string,
           filledColor: #ffffff,
           unfilledColor:#ffffff,
           fontColor:#ffffff,
           bgColor: #ffffff,
           clockFace: boolean
          })

Defaults

{
 size: 100,
 value: 80,
 total: 100,
 unit: "Points",
 filledColor: #1abc9c,
 unfilledColor: #bccbcc,
 fontColor: #000000,
 bgColor: #ffffff,
 clockFace: False
} 

domElement is the elementID of the HTML DOM element that the donut should be placed in.

drawDonut(donutDiv2)

size is relative to the size of the domElement that contains the donut. The size parameter is interpreted in percentage terms. Default size is 100%.

drawDonut("donutDiv", {size: 35})

value determines the percentage fill of the donut ring. It also updates the text inside the donut. Default value is 80.

drawDonut("donutDiv", {value: 40})

total is the maximum value that can be displayed in the donut. Default total is 100.

drawDonut("donutDiv", {value: 25, total: 30})

units text string will be shown in the second line inside the donut - under the value text. Default units are "points".

drawDonut("donutDiv", {units: "hours"})

Please note that, if an empty string is passed, then text inside donut will be displayed as one single line, just displaying the value - which is centered.

drawDonut(donutDiv, {units: ""})

clockFace is a boolean value which provides a dial around the donut when true. This is a mighty useful way to visualize the time remaining as a donut. By default, clockFace is False.

drawDonut("donutDiv", {units: "hours", clockFace: True})

filledColor is the color of the donut that displays remaining resource whereas unfilledColor is the color of the donut that displays the spent resource. bgColor is used for applying a color to the background of the div (HTML DOM element) that the donut is placed in. This allows to make the donut blend in with whatever application background that it is used in.

fontColor is the color of the text inside the donut. This can be just the value text or the value along with the units text.

By default, the filled, unfilled, font and background colors are #00e676, #bdc3c7, #000000 and #ffffff.

drawDonut("donutDiv", {filledColor: #ff0000, unfilledColor: #ffffff, bgColor: #00bcd4, fontColor: #ffffff})