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.

API

generate(radius)

Regenerates the circle with the given radius (see spec/responsive.html for an example on how to create a responsive circle).

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.4 Exposes generate(radius) to regenerate the circle, opening it to responsiveness.
• 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.