- show Infos as Circle Statistics, no images used
- based on html5 canvas and jquery
- many options can be set as data attributes
- fontawesome integration
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>
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 |
