Skip to content

Commit c3d93fb

Browse files
committed
Update README.md
1 parent 96112ad commit c3d93fb

File tree

1 file changed

+10
-1
lines changed

1 file changed

+10
-1
lines changed

README.md

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ jquery-plugin-circliful
44
- show Infos as Circle Statistics, no images used
55
- based on html5 canvas and jquery
66
- many options can be set as data attributes
7+
- fontawesome integration
78

89

910
How to use circliful
@@ -16,10 +17,12 @@ Include circliful & jquery to your Site
1617
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
1718
<script src="js/jquery.circliful.min.js"></script>
1819

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

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

22-
<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>
25+
<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>
2326

2427
Add this code at the end of your site
2528

@@ -45,6 +48,12 @@ you can set the options easily as data attributes for Example: data-dimension="2
4548
* bgcolor / is the background color of the cicle / default is #eee
4649
* fill / is the background color of the whole circle (can be empty if you dont want to set a background to the whole circle)
4750
* type / full or half circle for example data-type="half" if not set the circle will be a full circle / default full circle
51+
* 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%
52+
* part
53+
* border / Will change the styling of the circle. The line for showing the percentage value will be displayed inline or outline.
54+
* icon / Fontawesome icon class without the fa- before the class for example not fa-plus just plus
55+
* icon-size / Will set the font size of the icon.
56+
* icon-color / Will set the font color of the icon.
4857

4958

5059
Examples

0 commit comments

Comments
 (0)