Simple Plain Donut / Pie Chart Plugin With jQuery And CSS3

A really simple jQuery plugin used for creating a donut or pie chart on the webpage that allows to dynamically update the chart's percent number and the CSS positioning of the progress bar. Easy to style via SASS. Based on pure JavaScript and CSS/CSS3.

How to use it:

1. Simply include jQuery library and the plugin's source files on the webpage and you're ready to go.

<link rel="stylesheet" href="simple-donut.css" type="text/css">
<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="simple-donut-jquery.js"></script>

2. Create the html for the donut/pie chart.

<div id="demo" class="donut-size">
  <div class="pie-wrapper">
    <span class="label">
      <span class="num">0</span><span class="smaller">%</span>
    </span>
    <div class="pie">
      <div class="left-side half-circle"></div>
      <div class="right-side half-circle"></div>
    </div>
    <div class="shadow"></div>
  </div>
</div>

3. Update the chart to a specific percent number.

updateDonutChart('demo', 22, true);

4. Parameters available.

• el: The selector for the donut to update.
• percent: Passing in 22.3 will make the chart show 22%
• donut: True shows donut, false shows pie

updateDonutChart (el, percent, donut)

5. Override the default chart styles in the simple-donut.sass as this:

$pie-main: hsl(168, 76%, 42%)
$pie-text: #7F8C8D
$pie-shadow: #BDC3C7

---

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