181 / jquery-plugin-circliful

jQuery circle statitic plugin

jquery-plugin-circliful

• show Infos as Circle Statistics, no images used
• based on html5 canvas and jquery
• many options can be set as data attributes
• fontawesome integration

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.10.2.min.js"></script>
<script src="js/jquery.circliful.min.js"></script>

If you want to use the fontawesome icons you also need to include the css file into your site.

Add an element to your Site with a unique id an the data attributes that you need, for Example:

<div id="myStat" 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" data-total="200" data-part="35" data-icon="long-arrow-up" data-icon-size="28" data-icon-color="#fff"></div>

Add this code at the end of your site

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

Data Options (Attributes)

you can set the options easily as data attributes for Example: data-dimension="250"

Option	Description	Type	Default
dimension	is the height and width of the element	Pixel	200px on 200px
text	will be displayed inside of the circle over the info element	string	-
info	will be displayed inside of the circle bellow the text element (can be empty if you don't want to show info text)	string	-
width	is the size of circle	Pixel	15
fontsize	is the font size for the text element	Pixel	15
percent	can be 1 to 100	Pixel	integer
fgcolor	is the foreground color of the circle	RGB	#556b2f
bgcolor	is the background color of the cicle	RGB	#eee
fill	is the background color of the whole circle (can be empty if you don't want to set a background to the whole circle)	RGB	-
type	full or half circle for example data-type="half" if not set the circle will be a full circle	string	full
total	If you want to display the percentage of a value for example you have 750MB Ram and at the moment are 350MB in use. You need to set data-total="750" and data-part="350" and the circle will show the percentage value 36,85%	Percent	-
part	-	Percent	-
border	Will change the styling of the circle. The line for showing the percentage value will be displayed inline or outline.	string	default
icon	Fontawesome icon class without the fa- before the class for example not fa-plus just plus	Font Awesome	-
iconsize	Will set the font size of the icon.	interger	-
iconcolor	Will set the font color of the icon.	RGB	-
animationstep	Will set the animation step, use 0 to disable animation, 0.5 to slow down, 2 to speed up, etc	interger	1
startdegree	is the degree to start animate fgcolor	interger	0
bordersize	set the width of the border	interger	10
delay	set animation delay	interger	0

Examples

Small Border Width

Circle

Filled Circle

Half Circle Filled