The circular graphs with the numerical value in the center have been a great way to visualizing data lately. For example, they are used to great effect by awwwards.
Circles makes creating the charts very easy. Circles is a lightweight JavaScript library without dependencies, that generates the SVG chart on the fly.
Create a graph by calling:
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',
styleWrapper: true,
styleText: true
})
where
id
- the DOM element that will hold the graphradius
- the radius of the circlesvalue
- init value of the circle (optional, defaults to 0)maxValue
- maximum value of the circle (optional, defaults to 100)width
- the width of the ring (optional, has value 10, 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 0 or null
is passed, the animation will not run.wrpClass
- class name to apply on the generated element wrapping the whole circle.textClass
- class name to apply on the generated element wrapping the text content.styleWrapper
- whether or not to add inline styles to the wrapper element (defaults to true)styleText
- whether or not to add inline styles to the text (defaults to true)text
- the text to display at the center of the graph (optional, the current "htmlified" value will be shown); if null
or an empty string, no text will be displayed; it can also be a function: the returned value will be the displayed text:// Example 1
function(currentValue) {
return '$'+currentValue;
}
// Example 2
function() {
return this.getPercent() + '%';
}
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.
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 wrapping the whole circlecircles-text
- the element wrapping text contentYou can overwritte these classes by sending properties wrpClass
and/or textClass
to the constructor.
Circles produces the minimum HTML needed to show the graph.
<div class="circles-wrp" style="position: relative; display: inline-block;">
<svg xmlns="https://www.w3.org/2000/svg" width="80" height="80">
<path fill="transparent" stroke="#D3B6C6" stroke-width="7" d="M 39.992565928065126 3.500000757060633 A 36.5 36.5 0 1 1 39.949302232260386 3.500035209108127 Z"></path>
<path fill="transparent" stroke="#4B253A" stroke-width="7" d="M 39.992565928065126 3.500000757060633 A 36.5 36.5 0 0 1 59.07174573163989 71.12103010421852 "></path>
</svg>
<div class="circles-text" style="position: absolute; top: 0px; left: 0px; text-align: center; width: 100%; font-size: 28px; height: 80px; line-height: 80px;">
<span class="circles-integer">41</span>.
<span class="circles-decimals">26</span>
</div>
</div>
The SVG consists of two paths, one of wich is the full circle, with usually a paler color. The other path generates the smaller, strngly colored ring.
The text is contained inside a DIV element with the decimal value split inside a SPAN for better style control.
The whole content is then wrapped inside a self-contained DIV.
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 wrapping the whole circlecircles-text
- the element wrapping text contentcircles-integer
- the element wrapping the text before the dotcircles-decimals
- the element wrapping the decimal placesYou can overwritte these classes by sending properties wrpClass
and/or textClass
to the constructor.
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 have been borrowed from Highcharts and Wout Fierens's svg.js.