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: |
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 |
Methods
Parameter | Description |
---|---|
update
|
update graph method name "update" expects second parameter "data" var data = []; $("#graph").donutgraph("update", data); |
Download
Plugin minified versionView project on Github: Github Repository