Circliful is nice and neat plugin which will help you display statistics infos as circular charts. It is based on HTML5 and jQuery and many options can be set as data attributes which makes this plugin easy to use and style. Another great feature is that you can integrate Font Awesome and diplay this lovely icons to create beautiful circular data charts. Here is an explanation of how to use the plugin and data attributes.
If you are looking for other ways to display stats and info you can have a look at Chart.js, which has other options to visualise your data.
Image may be NSFW.
Clik here to view.
[button url='http://ladensia.com/circliful/demos.html' size='large' style='orange' target='_blank'] DEMOS [/button] [button url='https://github.com/pguso/jquery-plugin-circliful/archive/master.zip' size='large' style='orange' target='_blank'] DOWNLOAD[/button]
HowTo
Include the JS and CSS Files into your Website
<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>
Add Circles
Filled Circle with text and info-text.
Image may be NSFW.
Clik here to view.
Circle only with text.
Image may be NSFW.
Clik here to view.
Half Circle – filled with text and info.
Image may be NSFW.
Clik here to view.
Circle – border inline & font awesome icon.
Image may be NSFW.
Clik here to view.
Turn elements into circliful Circles. Add this code to your Site.
<script>
$( document ).ready(function() {
$('#myStat').circliful();
});
</script>
Use Fontawesome Icons.
- Download the Fontawesome Library Fontawesome Website
- Copy and paste the css file into the css folder (font-awesome.min.css)
- Copy and paste the fonts folder beside the css folder
- Include the css file into your site. Code bellow
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
Options
Available Options
The bellow list shows wich data attributes can be set.
| Data Attribute | Explanation | Values | Default |
|---|---|---|---|
| data-dimension | Is the height and width of the element | Integer | 200px on 200px |
| data-text | Will be displayed inside of the circle over the info element | Alphanumeric | empty |
| data-info | Will be deisplayed inside of the circle bellow the text element (can be empty if you dont want to show info text) | Alphanumeric | empty |
| data-width | Is the thickness of circle | Integer | 15px |
| data-fontsize | Is the font size for the text element | Integer | 15px |
| data-percent | Can be 1 to 100 | Integer | 50% |
| data-fgcolor | Is the foreground colour of the circle | RGB | #556b2f |
| data-bgcolor | Is the background color of the cicle | RGB | #eeeeee |
| data-fill | Is the background color of the whole circle (can be empty if you dont want to set a background to the whole circle) | RGB | empty |
| data-type | Full or half circle for example data-type=”half” if not set the circle will be a full circle | half | empty |
| data-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% | Integer | empty |
| data-part | See data-total explanation. | Integer | empty |
| data-border | Will change the styling of the circle. The line for showing the percentage value will be displayed inline or outline. | inline or outline | empty |
| data-icon | Fontawesome icon class. | Every Fontawesome Icon without the “fa-” for example not fa-plus just plus.Fontawesome Website – Icons | empty |
| data-icon-size | Will set the font size of the icon. | Integer | empty |
| data-icon-color | Will set the font color of the icon. | RGB | empty |