jQuery-Plugin with D3.js: Animated Donut Graph

Minimal html configuration

<div id="graph"></div>

jQuery initialization and customization

This plugin requires jQuery (>= 1.8.x) and D3.js (>= v5.4.0).

CSS:
text {
	font-family: "Helvetica Neue", Helvetica, Arial,sans-serif;
	font: 12px sans-serif;
}



Script:
$("#graph").donutgraph({
	data: [],
	height: 400,
	width: 400,
	colorSetting: ["#33876b","#559559","#77a347","#98b236","#bac024","#dcce12","#e0e0e0"],
	onChange: function (obj) {	
		$('#info').html('Item: '+ obj.label + ' – '+ obj.value);
	}
});

Parameters

Parameter Type Default Description
data array [] data array: [{id: 1, label: "Apples", value: 13.5, color: "#80c441"}]

object properties:
"id" (string): id
"label" (string): item label
"value" (int,float): item value
"color" (string): hex color value (optional)

container string #graph ID or class of HTML container element (div)
measureElement string #measure ID or class of HTML container element (span) for measuring label text
height int 400 total height of SVG container
width width 400 total height of SVG container
donutWidth int > 0 < (width/2)-50 width of donut ring element
padAngle float 0.02 space angle between ring segments
animationDuration int 750 duration in milliseconds
tweening animation (transition)
labelColor string #9e9e9e label text color (hex)
accentColor array ["#d81b60","#80c441"] array with color values (hex)
2 settings
colorSetting array ["#33876b","#559559", ...] array with color values (hex)
> 2 for ring segments
useColorRange boolean true true: use color range as setted in colorSetting
false: use 1 color from colorSetting for all segments

Events

Parameter Description
onChange call back function when data changes

returns Array of Donut section data
[
    id: id of current segment data,
    label: item label,
    value: item value,
    valueFormated: item value (string),
    percent: item percentage value,
]
[{id: 0, label: 'Apples', value: 20, valueFormated: '20', percent: '32%'}, ...]

Methods

Parameter Description
update update graph
method name "update"
expects second parameter "data"
var data = []; $("#graph").donutgraph("update", data);

Download

Plugin minified version
View project on Github: Github Repository