Inlcude the following into your document:
<link rel="stylesheet" href="./js/plugins/cirque/cirque.css"> <script src="./js/plugins/cirque/cirque.js"></script>
Create an empty div element to hold your stat:
<div class="my-stat"></div>
Attach the Cirque stat widget to your html element:
$('.my-stat').cirque ({ value: 234, total: 765, arcColor: '#FF9900' });
To create a Cirque stat without using writing javascript add the following class to your container: ui-cirque
<div class="ui-cirque" data-value="84"></div>
This will initialize your cirque stat widget with default parameters defined in Theme.js
By setting HTML5 data attributes on a Cirque container you will override any default values previouly set. ALL values of a Cirque widget can be set via data attributes.
<div class="ui-cirque" data-value="2875" data-total="3245" data-arc-color="#4074AA" data-radius="60" data-line-width="10" data-label="ratio"> </div> <div class="ui-cirque" data-value="13" data-arc-color="#BBBBBB" data-radius="60" data-line-width="10"> </div>
Class | Default | Description |
---|---|---|
value | 0 | Used to calculate the percentage to fill. The 'value' will be divided by the 'total' to derive the percentage. |
total | 100 | Set the total value that will be used in the calculation to derive the percentage. |
radius | 60 | Sets the radius of the circular stat. To get the total width of the canvas multiply the radius by 2. |
label | percent | Set to percent to display the percentage in the stat. Set to ratio to display the actual ratio used to calculate the stat.
|
lineWidth | 10 | Defines the thickness of the circle. |
arcColor | #0066CC | Defines the fill color of the arc. |
trackColor | #EEEEEE | Defines the color of the track. |
trackFill | transparent | Defines the fill color of the track. |
animate | true | Set to true/false depending on animation preference. |
speed | 20 | Set the speed of the animation in milliseconds. |