Press "Enter" to skip to content

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

ParameterTypeDefaultDescription
containerstring#graphID or class of HTML container element (div)
measureElementstring#measureID or class of HTML container element (span) for measuring label text
heightint400total height of SVG container
widthint400total width of SVG container
donutWidthint> 0 < (width/2)-50width of donut ring element
padAnglefloat0.02space angle between ring segments
animationDurationint750duration in milliseconds
tweening animation
labelColorstring#9e9e9elabel text color (hex)
accentColorarray[“#d81b60″,”#80c441”]array with color values (hex)
2 settings
colorSettingarray[“#33876b”,”#559559″, …]array with color values (hex)
> 2 for ring segments
useColorRangebooleantruetrue: use color range as setted in colorSetting
false: use 1 color from colorSetting for all segments
dataarray[]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

ParameterDescription
onChangecall 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

ParameterDescription
updateupdate graph
method name “update”
expects second parameter “data”
var data = []; $(“#graph”).donutgraph(“update”, data);

Animated Ring(Donut) Chart Plugin, donutgraph.js Github, doughnut chart js, donut chart highcharts


See Demo And Download

Official Website(jpweinerdev): Click Here

This superior jQuery/javascript plugin is developed by jpweinerdev. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.