Animated Circle Statistics Plugin With jQuery and Canvas - Circliful

Animated Circle Statistics Plugin With jQuery and Canvas - Circliful
File Size: 468 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Circliful is a jQuery 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. 

Basic Usage:

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

<div id="demo" 
data-dimension="250" 
data-text="35%" 
data-info="New Clients" 
data-width="30" 
data-fontsize="38" 
data-percent="35" 
data-fgcolor="#61a9dc" 
data-bgcolor="#eee" 
data-fill="#ddd">
</div>

2. Load the jQuery javascript library and jQuery Circliful plugin at the end of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.circliful.min.js"></script>

3. Initialize the plugin.

<script>
$( document ).ready(function() {
$('#demo').circliful();
});
</script>

4. Default settings.

$('#demo').circliful({

  // foreground Color
  foregroundColor: "#3498DB",

  // backgroun color
  backgroundColor: "#eee",

  // fill color of point circle
  pointColor: "none",

  // fill color
  fillColor: 'none',

  // width of foreground circle border
  foregroundBorderWidth: 15,

  // width of background circle border
  backgroundBorderWidth: 15,

  // Size of point circle
  pointSize: 28.5,

  // font color
  fontColor: '#aaa',

  // from 0 to 100
  percent: 75,

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

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

  // font awesome icon classes
  icon: 'none',

  // icon size
  iconSize: '20px',

  // icon color
  iconColor: '#999',

  // top, bottom, left, right or middle
  iconPosition: 'top',

  // target percentage
  target: 0,

  // star percentage
  start: 0,

  // show percent
  showPercent: 1,

  // font size of the percentage text
  percentageTextSize: 22,

  // additonal css for the percentage text
  textAdditionalCss: '',

  // draws a circle around the main circle
  targetPercent: 0,

  // font size of the target percentage 
  targetTextSize: 17,

  // fill color of the target circle
  targetColor: '#2980B9',

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

  // css inline style you wanna add to your info text
  textStyle: null,

  // font color of the info text
  textColor: '#666',

  multiPercentage: 0,
  percentages: null,

  // aligns string of "text" property centered below the circle 
  textBelow: false,

  // to hide the percentage sign
  noPercentageSign: false,

  // replace the percentage shown in the circle by text
  replacePercentageByText: null,

  // draw half circle see example bellow
  halfCircle: false,

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

  // number of decimal places to show
  decimals: 0,

  // shows decimals while animating instead of only at the end or if less than 1
  alwaysDecimals: false
  
});

Change logs:

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.