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.