2.2 KiB

Raw Blame History

Circles

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

Usage

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,
	number:     7.13,
	text:       '%',
	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)
number - the number to display at the centre of the graph (optional, the percentage will show if not specified)
text - the text to display after the number (optional, nothing 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.

Styles

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-wrp - the element wrapping the text and number
circles-text - the element containing the text
circles-number - the element containing the number

Compatibility

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+

Inspirations

Code and ideas borrowed by:

Highcharts
Wout Fierens's svg.js

Licence

Circles is licensed under the terms of the MIT License.

Changelog

0.0.3 Allow adding extra text to the graph (issue 3). Round integers during animation.
0.0.2 Add animation.
0.0.1 First release.

2.2 KiB Raw Blame History