How to use circliful
The jquery library files and jquery.circliful.min.js introduced to the page.
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/jquery.circliful.min.js"></script> Add css style:
<style>
.circliful {
position: relative;
}
.circle-text, .circle-info, .circle-text-half, .circle-info-half {
width: 100%;
position: absolute;
text-align: center;
display: inline-block;
}
.circle-info, .circle-info-half {
color: #999;
}
.circliful .fa {
margin: -10px 3px 0 3px;
position: relative;
bottom: 4px;
}
</style> Add the following html code where you need to show the position of the chart :
<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"></div> Then call the circliful code in the page:
<script>
$( document ).ready(function() {
$('#myStat').circliful();
});
</script> Then preview the page, you will see a very simple and beautiful circular chart.
Option
Circliful provides a rich set of attribute options, based on the data attributes html5. For the latest version of circliful please visit: https: //github.com/pguso/jquery-plugin-circliful.
