Animated Circle Statistics Plugin With Canvas - Circliful

File Size: 168 KB
Views Total: 52908
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.