Minimal HTML5 Donut Chart Plugin For jQuery - DonutWidget

DonutWidget is a simple plain jQuery plugin to present your data (e.g. progress percentage) in a doughnut/ring chart that is fully configurable via HTML data attributes. Ideal for circular progress and loading indicators.

How to use it:

1. Include the latest version of jQuery library (slim build) and the jQuery DonutWidget plugin's files on the web page.

<link rel="stylesheet" href="jquery.DonutWidget.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="jquery.DonutWidget.min.js"></script>

2. Add the donut-widget class to the chart container and config the chart with the following data attributes:

• data-chart-size: The size of the donut chart. Available values: tiny, normal, large, jumbo, giant.
• data-chart-max: The max value.
• data-chart-value: Current value.
• data-chart-primary: Primary color.
• data-chart-background: Background color.
• data-chart-text: Percentage text.
• data-chart-caption: Chart caption.

<div class="donut-widget" 
     data-chart-size="large" 
     data-chart-max="100" 
     data-chart-value="50" 
     data-chart-primary="rgba(255,0,0,1)" 
     data-chart-background="#eee" 
     data-chart-text="50%" 
     data-chart-caption="Large size">
</div>

3. Convert the DIV container into a donut chart.

DonutWidget.draw();

4. You can also generate & customize the donut chart with JavaScript.

<div class="example"></div>

$(".example").DonutWidget({

  // these are default options
  max: 100, 
  value: 0, 
  text: "", 
  rotate: 0, 
  caption: "", 
  template: [
    '<div class="donut-hole"><span class="donut-filling"></div>', 
    '<div class="donut-bite" data-segment-index="0"></div>', 
    '<div class="donut-bite" data-segment-index="1"></div>', 
    '<div class="donut-caption-wrapper"><span class="donut-caption"></span></div>'
  ].join(''), 
  colors: {
    primary: "#ffe600",
    background: "#eee"
  },
  size: "normal"
  
});

Change log:

2018-01-16

• JS & CSS update

---

This awesome jQuery plugin is developed by paulgeorge92. For more Advanced Usages, please check the demo page or visit the official website.