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

Category: Chart & Graph , Javascript | November 19, 2018
Author: vneri
Views Total: 7,415
Official Page: Go to website
Last Update: November 19, 2018
License: MIT

Preview:

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

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

You Might Be Interested In:


3 thoughts on “Creating A Flexible Flat Donut Chart with JavaScript and SVG – circleDonutChart

  1. Manuel Rodriguez Coria

    is posible add 3d shadow to outer circle?

    Reply
    1. vneri

      Hi sorry for my late response, didn’t know my chart was featured here. I could give it a look or if you want you can branch it on GitHub – unfortunately I didn’t have time to continue to improve it

      Reply
  2. JJ Spelman

    Thanks for this!! Was looking for a simple animated donut chart for a web page.

    Reply

Leave a Reply