Lightwheight JavaScript library that generates circular graphs in SVG. Now with animation.

Include the circles.js file in your HTML file. There are no dependencies.

Create a graph by calling:

Circles.create({
	id:         'circles-1',
	percentage: 43,
	radius:     60,
	width:      10,
	text:       7.13,
	colors:     ['#D3B6C6', '#4B253A'],
	duration: 	400
})

where

• id - the DOM element that will hold the graph
• percentage - the percentage dictating the smaller circle
• radius - the radius of the circles
• width - the width of the ring (optional, has value 10, if not specified)
• text - the text to display at the centre of the graph (optional, the percentage will show if not specified)
• colors - an array of colors, with the first item coloring the full circle (optional, it will be ['#EEE', '#F00'] if not specified)
• duration - value in ms of animation's duration; defaults to 500; if null is passed, the animation will not run.

The styles have been specified inline to avoid external dependencies. But they can be overriden via CSS easily, being simply HTML elements.

To help with this, a few CSS classes have been exposed:

• circles-wrp - the element containing the graph
• circles-text - the element containing the text

Browsers that support SVG.

Desktop

• Firefox 3+
• Chrome 4+
• Safari 3.2+
• Opera 9+
• IE9 +

Mobile

• iOS Safari 3.2+
• Android Browser 3+
• Opera Mobile 10+
• Chrome for Android 18+
• Firefox for Android 15+

Code and ideas borrowed by:

• Highcharts
• Wout Fierens's svg.js

Circles is licensed under the terms of the MIT License.

• 0.02 Add animation
• 0.01 First release