Creating A Flexible Flat Donut Chart with JavaScript and SVG – circleDonutChart

Preview:

Description:

circleDonutChart is a standalone JS library for drawing animated, flexible and flat styled donut charts using SVG objects.

How to use it:

Load the necessary circleDonutChart.js in your document.

<script src="circleDonutChart.js"></script>

Create a DIV element into which the SVG based donut chart will be created.

<div id="example"></div>

Draw an animated donut chart into the DIV element.

var circle = new circleDonutChart('example');
circle.draw({
end:75,
start:0, 
maxValue:100, 
titlePosition:"outer-top", 
titleText:"Your happiness", 
outerCircleColor:'#0085c8', 
innerCircleColor:'#909081'
});

Available drawing options.

• start: starting value, ignored if chart already has a status
• end: ending value [mandatory]
• outerCircleColor: ovverrides the color of outer circle
• innerCircleColor: ovverrides the color of inner circle
• textColor: ovverrides the color of text
• animationSpeed = 0: no Animation
• animationSpeed = 1: normal speed
• scaling: scaling value, 1 for normal
• size: in px, the size of the chart
• getValue(): gets actual value
• setValue(): sets a value without animation
• unitText: sets the unit for the shown number
• maxValue: optional parameter that overrides 100% with a maximal Value
• titleText: A title for the Chart (less than 12 chars for inner-bottom and inner-top readibility)
• titlePosition: where the title gets displayed, [“outer-bottom” | “outer-top” | “inner-bottom” | “inner-top”]
• titleColor: ovverrides the standard colors for the title
• angleOfStart: the standard starting position is at 3 o’clock (90 degrees)- the value can be overridden. Values are from 0 to 360

Methods:

• draw: draws the chart based on the given options
• draw (after first draw): omitting color options possible
• setValue: sets a value, without animating the circle
• getValue: returns the actual value
• delete: delete the chart object
• reload: reload the chart object and initialize with standard parameters

Changelog:

11/19/2018

• Added support for custom starting angles