Circliful Concise circular Statistical Chart jquery Plugin

Circliful is a jquery based ring display statistics plug-in, it is based on HTML5 and CSS3, does not use any pictures. Circliful has many options for setting data properties that can be integrated with the font awesome.

Circliful Features

The information displayed is circular statistics and no additional image files need to be added
The relevant information displayed is circular statistics, using no image
Canvas Canvas and jquery based on HTML5
Many options can be set to the properties of the data
Seamless integration with font awesome
How to use Circliful

Introduction of Circliful & JQuery files to your Web page

<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 font awesome fonts icon, you also need to introduce the font awesome CSS file to your site.

<link href= "Font-awesome.min.css" rel= "stylesheet" type= "Text/css" >

You need to add an element to your site that has a unique ID for the data attribute, such as the following code:

id= "Mystat" data-dimension= "<div" data-text= "

35%"

data-info= "New Clients"

D Ata-width= "data-fontsize=" "

data-percent=" "

data-fgcolor=" #61a9dc "

data-bgcolor=" #    Eee "

data-fill=" #ddd "

data-total=" "

data-part=

" data-icon= "long-arrow-up" Data-icon-size= "data-icon-color=" "

#fff"

>

</div>

Finally, after the document is loaded, initialize the plug-in and invoke the Circliful () method

<script>

$ (document). Ready (function () {

$ (' #myStat '). circliful ();

</script>

Circliful Optional Parameters

Parameters	Describe	Default value
Data-dimension	Width and height of a circular chart px	250
Data-text	Text displayed inside the circle	Empty
Data-info	Descriptive information displayed under Data-text	Empty
Data-width	Thickness of the circle px	15
Data-fontsize	Circle Text Size px	15
Data-percent	Circle Statistics percent%,1-100	50
Data-fgcolor	The foreground color of the circle	#556b2f
Data-bgcolor	Background color of a circle	#eeeeee
Data-fill	Fill background color of a circle	Empty
Data-type	Circular statistic type, can be "half" or "full"	Full
Data-total	Total amount of data, used in conjunction with Data-part	Empty
Data-part	Amount of data, used in conjunction with Data-total	Empty
Data-border	A rounded style that can be bordered, such as inline or outline	Empty
Data-icon	Fontawesome icon style, details can refer to: Fontawesome Website? Icons	Empty
Data-icon-size	Icon size	Empty
Data-icon-color	Icon Color