Minimal HTML5 Donut Chart Plugin For jQuery - DonutWidget

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.

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"
  
});

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

  • Publication date: 13.01.2018
  • Source