pguso-jquery-plugin-circliful

jquery-plugin-circliful

• show Infos as Circle Statistics, no images used
• based on SVG and jquery
• many options can be set
• fully responsive

How to use circliful

Include circliful & jquery to your Site.

<link href="css/jquery.circliful.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/jquery.circliful.min.js"></script>

It's tested up to jQuery Versions:

• 1.12.4
• 2.2.4
• 3.1.0

Test it directly on JS Fiddle https://jsfiddle.net/9dajqcr1/

Add an element to your Site with a unique id and an "container" around it that controls the size of your circle statistic, here a example with bootstrap:

<div class="row">
    <div class="col-lg-2">
        <div id="test-circle"></div>
    </div>
</div>

Add this code at the end of your site

<script>
    $( document ).ready(function() {
	$("#your-circle").circliful({
                animationStep: 5,
                foregroundBorderWidth: 5,
                backgroundBorderWidth: 15,
                percent: 75
           });
   });
</script>

Options

Option	Description	Type	Default
foregroundColor	color of the foreground circle (no color add value 'none')	RGB or string	#3498DB
backgroundColor	color of the background circle (no color add value 'none')	RGB or string	#eee
fillColor	fill color of circle	RGB or string	none
pointColor	fill color of point circle	RGB or string	none
pointSize	Size of point circle	int	28.5
foregroundBorderWidth	width of foreground circle border	int	15
backgroundBorderWidth	width of background circle border	int	15
fontColor	color of the percentage	RGB	#aaa
percentageY	vertical position of the percentage text	integer	100
percentageX	horizontal position of the percentage text	integer	100
percent	can be 1 to 100	integer	75
animation	if the circle should be animated initially	int	1
animationStep	can be 1 to 100, how fast or slow the animation should be	int	5
progressColor	change color of foreground circle as percents changed（{ 50: '#FF6C00', 60: '#FF6C00'}）	{integer:RGB}	null
icon	font awesome icon, details bellow	string	none
iconSize	font size of the icon	integer	30
iconColor	color of the icon	RGB	#ccc
iconPosition	position of the icon (top, bottom, left, right or middle)	string	top
percentageTextSize	font size of the percentage text	integer	22
textAdditionalCss	additional css for the percentage text	string	''
targetPercent	draws a circle around the main circle	integer	0
targetTextSize	font size of the target percentage	integer	17
targetColor	fill color of the target circle	RGB	#2980B9
text	info text shown bellow the percentage in the circle	string	''
textStyle	css inline style you want to add to your info text	string	''
textColor	font color of the info text	RGB	#666
textY	vertical position of your info text	integer	null
textX	horizontal position of your info text	integer	null
textBelow	aligns string of "text" property centered below the circle	boolean	false
multiPercentage	turns multiple bars on if set to 1	integer	1
percentages	array of percent, color and title for each circle	array	[]
multiPercentageLegend	show a legend with title, color and percentage on the right	integer	0
noPercentageSign	to hide the percentage sign	boolean	false
replacePercentageByText	replace the percentage shown in the circle by text	string	null
halfCircle	draw half circle see example bellow	boolean	false
animateInView	animate circle on scroll into view	boolean	false
decimals	number of decimal places to show	integer	0
alwaysDecimals	shows decimals while animating instead of only at the end or if less than 1	boolean	false
title	title of the circle	string	Circle Chart
description	description of the circle	string	''

Data Attributes

All Options can also be set as data attributes, for example:

<div id="test-circle" data-animation="1" data-animationStep="5" data-percent="58"></div>

Half Circle

Example:

$("#test-circle5").circliful({
    animationStep: 5,
    foregroundBorderWidth: 5,
    backgroundBorderWidth: 15,
    percent: 80,
    halfCircle: 1,
});

Multiple Bars

Example:

$("#test-circle").circliful({
        animation: 1,
        animationStep: 5,
        foregroundBorderWidth: 7,
        backgroundBorderWidth: 7,
        textSize: 28,
        textStyle: 'font-size: 12px;',
        textColor: '#666',
        multiPercentage: 1,
        percentages: [
        	{'percent': 10, 'color': '#3180B8', 'title': 'Gryffindor' },
		{'percent': 30, 'color': '#4ADBEA', 'title': 'Ravenclaw' },
		{'percent': 50, 'color': '#49EBA8', 'title': 'Hufflepuff' },
		{'percent': 70, 'color': '#FFCA35', 'title': 'Slytherin' }
        ],
        multiPercentageLegend: 1,
    replacePercentageByText: '',
        backgroundColor: '#eee',
        icon: 'f0d0',
        iconPosition: 'middle',
        iconColor: '#273B4E'
    });

In action: https://jsfiddle.net/0c8qaqaj/

Use callback function

Get's fired on complete.

Example:

$("#circli").circliful({
        animation: 1,
        animationStep: 10,
        foregroundBorderWidth: 5,
        backgroundColor: "none",
        fillColor: '#eee',
        percent: 75,
        iconColor: '#3498DB',
        icon: 'f206',
        iconSize: '40',
        iconPosition: 'middle',
        start:50,
        showPercent:1,
        target:0
    }, function(){
        alert('done !');
    });

Font Awesome Usage

Go to https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css and copy/paste the string after the slash for Example hdd icon:

.fa-hdd-o:before {
    content: "\f0a0";
}

copy/paste f0a0 into the parameter field { icon: 'f0a0' }

Examples

Donation

If you find this plugin usefull or/and use it commercially please donate as much as you like.