Animated Ring Donut Graph jQuery Plugin with D3.js

donutgraph.js is Animated Donut Graph which is a jQuery plugin built on D3.js. They add an interactive and fun element to your infographics that will keep your users engaged.

animated donut chart, how to build a circle donut chart with css, free donut chart templates, animated donut chart jquery, 3d donut chart, donut chart html

jQuery initialization and customization

This plugin requires jQuery (>= 1.8.x) and D3.js (>= v5.4.0)
Font Awesome (4.4.x) is used to denote the handle’s internal icons.

How to make use of it:

1. Load the required jQuery and d3.js libraries into the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/d3.min.js"></script>

2. Load the jQuery donutgraph.js plugin after jQuery.

<script src="plugin.min.js"></script>

3. Create an empty DIV container to hold the donut chart.

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

4. Prepare your data to display in a donut chart.

var sampleData = [
    {
      id: 1, 
      label: "CSS", 
      value: 13.5, 
      color: "#80c441"
    },
    {
      id: 2, 
      label: "HTML", 
      value: 13.5, 
      color: "#80c441"
    },
    {
      id: 3, 
      label: "SCRIPT", 
      value: 13.5, 
      color: "#80c441"
    }
    // ...
]

5. Call the function to create a virtual donut chart.

$("#graph").donutgraph({
  data: sampleData
});

6. These are all available settings that can be called with the Donutgraph plug-in.

$("#graph").donutgraph({

  // wrapper element
  container: "#graph",

  // container element (span) for measuring label text
  measureElement: "#measure",

  // width & height of the donut chart
  width: 400,
  height: 400,

  // ring width
  donutWidth: 20,

  // space angle between ring segments
  padAngle: 0.02,

  // duration of the animation
  animationDuration: 750,

  // label color
  labelColor: "#9e9e9e",

  // an array of colors
  accentColor: ["#d81b60","#80c441"],

  // an array of colors used for ring segments
  colorSetting: ["#33876b","#559559","#77a347","#98b236","#bac024","#dcce12","#e0e0e0"],

  // use color range as setted in colorSetting
  useColorRange: true
  
});

7. Update the data manually.

$("#graph").donutgraph("update", newData);

8. Execute a function when the data changes.

$("#graph").donutgraph({
  onChange: function(obj) {
    console.log(obj);
    labelsOnUpdate(obj);
  }
});

Options and parameters

Parameter	Type	Default	Description
`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`	int	400	total width 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
`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
`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)

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%’}, …]