Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
Patric Gutersohn committed Aug 4, 2017
2 parents b1c0482 + db4a8f0 commit 192e025
Showing 1 changed file with 35 additions and 0 deletions.
35 changes: 35 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,9 @@ Options
| textY | vertical position of your info text | integer | null |
| textX | horizontal position of your info text | integer | null |
| textBelow | aligns string of "text" property centered below the circle | boolean | false |
| multiPercentage | turns multiple bars on if set to 1 | integer | 1 |
| percentages | array of percent, color and title for each circle | array | [] |
| multiPercentageLegend | show a legend with title, color and percentage on the right | integer | 0 |
| noPercentageSign | to hide the percentage sign | boolean | false |
| replacePercentageByText | replace the percentage shown in the circle by text | string | null |
| halfCircle | draw half circle see example bellow | boolean | false |
Expand Down Expand Up @@ -111,6 +114,38 @@ Example:

![full](https://raw.github.com/pguso/jquery-plugin-circliful/master/preview/half_circle.PNG)

Multiple Bars
------------------

Example:

$("#test-circle").circliful({
animation: 1,
animationStep: 5,
foregroundBorderWidth: 7,
backgroundBorderWidth: 7,
textSize: 28,
textStyle: 'font-size: 12px;',
textColor: '#666',
multiPercentage: 1,
percentages: [
{'percent': 10, 'color': '#3180B8', 'title': 'Gryffindor' },
{'percent': 30, 'color': '#4ADBEA', 'title': 'Ravenclaw' },
{'percent': 50, 'color': '#49EBA8', 'title': 'Hufflepuff' },
{'percent': 70, 'color': '#FFCA35', 'title': 'Slytherin' }
],
multiPercentageLegend: 1,
replacePercentageByText: '',
backgroundColor: '#eee',
icon: 'f0d0',
iconPosition: 'middle',
iconColor: '#273B4E'
});

<img width="450" src="https://github.com/pguso/jquery-plugin-circliful/raw/master/preview/preview5.png">

In action: https://jsfiddle.net/0c8qaqaj/

Use callback function
------------------
Get's fired on complete.
Expand Down

0 comments on commit 192e025

Please sign in to comment.