Animated Circle Statistics Plugin With Canvas - Circliful

Circliful is a jQuery and Vanilla JavaScript chart plugin that animates the presentation of your information with good looking circular design, a little similar to the ring chart.

Also can be used as a circular timer, progress/loading indicator, pie chart and so on. 

The plugin now works as a vanilla JavaScript without jQuery dependency. For jQuer users, download the Tradition Edition and follow the instructions as indroduced in the Demo page.

Features:

• 3 circle types: circle, plain, half
• Custom text, colors, and icons (Requires Font Awesome)
• Animate the circle when it comes into view.

How to use it:

1. Create a DIV container for the plugin. You can pass options to the chart by using the data-* attribute , or by passing them in on initialization.

<div id="demo">
</div>

2. Download and load the Circliful's JavaScript and CSS files in the HTML page.

<link href="dist/main.css" rel="stylesheet" />
<script src="dist/circliful.js"></script>

3. Initialize the plugin and create a new circle instance as follows:

circliful.newCircle({
  percent: 35,
  id: 'demo'
});

4. Or initialize the plugin via data-* attributes:

<div id="demo"
     data-percent="35">
</div>

circliful.newCircleWithDataSet('demo', circleType);

5. Default settings to customize the plugin.

circliful.newCircle({

  // container ID
  id: '',

  // or 'half', 'simple'
  type: 'SimpleCircle'

  // additional CSS classes
  additionalCssClasses: {},

  // the percentage of the circle
  percent: 75,

  // shows a point in the circle
  point: false,

  // point size
  pointSize: 60,

  // if the circle should be animated initialy
  animation: true,

  // how fast or slow the animation should be
  // from 0 to 100
  animationStep: 1,

  // applies gradients to foreground
  strokeGradien: [string, string],

  // Font Awesome icon code
  icon: '',

  // info text shown bellow the percentage in the circle  
  text: null,

  // replacs the percentage
  textReplacesPercentage: false,

  // to hide the percentage sign
  noPercentageSign: false,

  // animate circle on scroll into view
  animateInView: false,

  // used shape at the end
  // or 'round'
  strokeLinecap: 'butt',

  // width of the foreground circle
  foregroundCircleWidth: 5,

  // width of the background circle
  backgroundCircleWidth: 15,

  // colors for different percentages
  progressColors: [{percent: 50, color: "green"}],

  // callback
  onAnimationEnd: function(){},

  // start angle
  startAngle: 0

});

Changelog:

v2.0.17 (2020-06-04)

• fixed simple circle without animation

v2.0.15 (2020-05-01)

• added startAngle option.

2020-04-23

• fixed reposition on update

2020-04-10

• fixed 100 percent

2020-04-08

• Rewritten in plain JavaScript

2019-01-16

• Added option for displaying rounded ends

2018-11-28

• Fix invalid percentage after animate circle. In animate function, while non multiple percentages, the percentage variable is declared in invalidly scope and results in undefined.

2018-08-06

• epmty the icon-string variable if no icon is specified, to supress "undefined" strings in SVG-Output.

2018-06-11

• Fix percenatge progress wrong number bug

2018-03-17

• added iconDecoration option

2017-08-05

• fixed animation for multiple bars

2017-06-12

• change color of the circle according to the percentage

2017-06-10

• Fixed: textBelow doesn't work

2017-03-17

• Accessibility improvements

2016-10-06

• readded assign settings by data attributes

2016-09-25

• Allowing for separate styling of number and percent sign

2016-09-22

• Added settings to show decimals in percentage text

2016-08-06

• v1.0.2
• Fixed half round chart is missing in new version 1.0.0
• Animation on scroll into view

2016-07-11

• textBelow property added

2016-03-28

• added point circle

2016-02-23

• changed circliful from canvas to svg
• API update.
• Added more options.

2016-01-27

• Fixed bu on target param of isAllowed callback.Moved `bgrCircle()` inside `animate()` so that clearRect()` prevents distortion/pixelation of the foreground circle

2014-11-19

• Fixed Circle fill color cannot be set without using data attribute

2014-05-27

• added font awesome v4.1.0
• added border inline/outline option again

0.1.5 (2014-01-24)

• Add animation-step option

---

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