Home

Awesome

Circles

Circles

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

Usage

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

Create a placeholder div in your HTML:

<div class="circle" id="circles-1"></div>

Create a graph by calling, the id should match id of the placeholder <div>:

var myCircle = Circles.create({
  id:                  'circles-1',
  radius:              60,
  value:               43,
  maxValue:            100,
  width:               10,
  text:                function(value){return value + '%';},
  colors:              ['#D3B6C6', '#4B253A'],
  duration:            400,
  wrpClass:            'circles-wrp',
  textClass:           'circles-text',
  valueStrokeClass:    'circles-valueStroke',
  maxValueStrokeClass: 'circles-maxValueStroke',
  styleWrapper:        true,
  styleText:           true
});

where

// Example 1
function(currentValue) {
  return '$'+currentValue;
}
// Example 2
function() {
  return this.getPercent() + '%';
}

Install with grunt

  1. Get the library
  2. Install all the dependencies, run npm install
  3. Once you have the dependencies installed, run grunt from the project directory. This will run the default grunt task which will minify circles.js to circles.min.js

API

myCircle.updateRadius(Number radius)

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

myCircle.updateWidth(Number width)

Regenerates the circle with the given width

myCircle.updateColors(Array colors)

Change colors used to draw the circle.

myCircle.update(Number value [, Number duration])

Set the value of the circle to value. Animation will take duration ms to execute. If no duration is given, default duration set in constructor will be used. If you don't want animation, set duration to 0.

myCircle.update(Boolean force)

Force the redrawing of the circle if force is set to true. Do nothing otherwise.

myCircle.getPercent()

Returns the percentage value of the circle, based on its current value and its max value.

myCircle.getValue()

Returns the value of the circle.

myCircle.getMaxValue()

Returns the max value of the circle.

myCircle.getValueFromPercent(Number percentage)

Returns the corresponding value of the circle based on its max value and given percentage.

myCircle.htmlifyNumber(Number number[, integerPartClass, decimalPartClass])

Returned HTML representation of given number with given classes names applied on tags. Default value of integerPartClass is circles-integer. Default value of decimalPartClass is circles-decimals.

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:

You can override these classes by sending properties wrpClass and/or textClass to the constructor.

Tests

Tests can be run with karma:

karma start

or grunt:

grunt jasmine

Examples

Compatibility

Browsers that support SVG.

Desktop

Mobile

Contributors

Inspirations

Code and ideas borrowed by:

Licence

Circles is licensed under the terms of the MIT License.

Changelog