This small jQuery plugin is for creating circular charts. Github

Deutsche Dokumentation

color: "#3459eb",
backgroundColor: "#e6e6e6",
background: true,
speed: 2000,
widthRatio: 0.2,
value: 66,
unit: 'percent',
counterclockwise: false,
size: 110,
startAngle: 0,
animate: true,
backgroundFix: true,
lineCap: "round",
animation: "easeInOutCubic",
text: false,
redraw: false,
cAngle: 0,
textCenter: true,
textSize: false,
textWeight: 'normal',
textFamily: 'sans-serif',
relativeTextSize: 1 / 7,
autoCss: true,
onDraw: false

This attribute defines the color of the circle line. Uses color attributes as string.

Examples: #3459eb, #e6e6e6, blue

This attribute defines the background color of the circle line. Uses color attributes as string.

Examples: #3459eb, #e6e6e6, blue

This attribute defines if there should be a background behind the circle line. Uses boolean values.

Examples: true, false

This attribute defines the time the circle is animated. Uses integer values in ms.

Examples: 1000, 6498

This attribute defines how much percent of the radius the border of the circle line should occupy. Uses float values in %/100.

Examples: 0.2, 0.4

Current value of the circle chart in the unit defined in the unit setting. Uses float values.

Examples: 68, 42, 83.1240

This attribute defines with which unit the value setting should be interpreted. Uses string.

Examples: percent, deg, rad

This attribute defines if the circle line should be drawn counterclockwise. Uses boolean values.

Examples: true, false

This attribute defines the size of the whole cirle chart. Uses float values in px.

Examples: 110, 200, 299.99

This attribute defines the starting angle from which the circle line should be displayed. Uses float values.

Examples: 50, 75, 43.1240

This attribute defines if the circle line should be animated. Uses boolean values.

Examples: true, false

This attribute defines if the background of the circle line should be smaller than the circle line for better appearance. Recommended, if the setting makes no problems. Uses boolean values.

Examples: true, false

This attribute defines the type of the circle line endings. Uses string.

Examples: butt, round, square

This attribute defines the type of the animation the circle line should be animated. Uses string

Examples: linearTween, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc

This attribute defines the text under or in the circle chart. false if no text should be displayed. Uses string or false.

Examples: Hallo Welt!, 123456

This attribute defines if the text should be in the circle chart and not under the chart. Uses boolean values.

Examples: true, false

This attribute defines the function that is called every animation frame. Just called once, when the circle line is not animated. Uses function.

Examples: please refer Examples

This attribute defines if the circle chart should be completely new animated or drawn. Otherwise the animation will start from the last value. Uses boolean values.

Examples: please refer Examples

This attribute defines the current angle of the circle line. Please use the setting value for changes. Uses float values.

Examples: 50, 75, 43.1240

This attribute defines the absolute value of the text size. Uses string.

Examples: 10px, 20px, 2em

This attribute defines the relative value of the text size, depending on the size of the circle chart, defined in the setting size. Uses float values.

Examples: 0.1, 0.3, 0.4

This attribute defines if the recommended CSS Attributes should be automatically assigned to the circle chart. Disable for advanced customisation. Uses boolean values.

Examples: true, false

This attribute defines the thickness of the text. Uses string.

Examples: bold, normal, more...

This attribute defines the font family. Uses string.

Examples: sans-serif, monospace, more...

Code:

$(".circleChart").circleChart({
      value: 245,
      startAngle: 180
   });

redraw can be used to continuously feed new values into the circle chart with an animation.
e.g.

Code:

setInterval(function() {
   $(".circleChart").circleChart({
      value: Math.random()*100,
      redraw: false
   });
}, 4000);

onDraw may be used, for example, to display the current value. e.g.

Code:

setInterval(function() {
   $(".circleChart").circleChart({
      value: Math.random()*100,
      redraw: false,
      startAngle: 50,
      text: 0 + '%',
      onDraw: function(el, circle){
         $(".circleChart_text", el).html(Math.round(circle.value) + '%');
      }
   });
}, 4000);