# Cirque Stat

### Setup

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'
    });

### Helper

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`

### HTML5 Data Attributes

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>

### Options

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.