A javascript library for a flexible flat donut chart
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



A javascript library for a flexible flat donut chart

This library takes your parameters and displays a circle donut (in flat style). The displaying is performed by writing an SVG graphic into a provided DIV element. Changing values of the circle leads to a smooth animation, that can also be triggered if the scrolling position is fully showing the circle.

Library Usage

You can include the library into your project

<script type="text/javascript" src="circleDonutChart.js"></script>

and instatiate as many circles as you need.

var circle = new circleDonutChart('myChartTitle');

The 'myChartTitle' is the ID of the target element, into which the SVG will be created.

Provided Methods

The library provides the following methods for the chart object:

drawdraws the chart based on the given options
draw (after first draw)omitting color options possible
setValuesets a value, without animating the circle
getValuereturns the actual value
deletedelete the chart object
reloadreload the chart object and initialize with standard parameters

Drawing Options

The drawing options are passed as an object to the "draw" method.

circle.draw({end:90,start:0, maxValue:100, titlePosition:"outer-top", titleText:"Consumption", outerCircleColor:'#0085c8', innerCircleColor:'#909081'});

There are several drawing options that can influence, how your chart is displayed.

startstarting value, ignored if chart already has a status
endending value [mandatory]
outerCircleColorovverrides the color of outer circle
innerCircleColorovverrides the color of inner circle
textColorovverrides the color of text
animationSpeed = 0no Animation
animationSpeed = 1normal speed
scalingscaling value, 1 for normal
sizein px, the size of the chart
getValue()gets actual value
setValue()sets a value without animation
unitTextsets the unit for the shown number
maxValueoptional parameter that overrides 100% with a maximal Value
titleTextA title for the Chart (less than 12 chars for inner-bottom and inner-top readibility)
titlePositionwhere the title gets displayed, ["outer-bottom" | "outer-top" | "inner-bottom" | "inner-top"]
titleColorovverrides the standard colors for the title


See http://vneri.github.io/circleDonutChart/


Copyright 2013-2014 by Valerio Neri http://opensource.org/licenses/MIT