Pie/Donut chart using d3 and d3.chart, see demo here.
Inspired and based on this jsfiddle by Steve Boak.
// Appends the chart to an 'svg' element.
var chart = d3.select('body')
.append('svg')
.height(350)
.width(400)
.chart('Pie', {
height: 350,
width: 400,
radius: 100,
donutHole: {
radius: 80
}
labelTemplate: '[{label}]' // [my label]
});
// Draws graph once you add data.
chart.draw([
{
label: 'my label',
value: 3
}, {
label: 'your label',
value: 0.5
}, {
label: 'other label',
value: 1
}
]); {
radius: 100,
width: 450, // Or container's width
height: 300, // Or container's height
labelTemplate: '{label}',
labels: undefined,
legend: undefined
donutHole: undefined
}See d3.chart.legend for available options and usage.
The following options are available for donutHole:
{
radius: int|float,
color: valid d3 colors
}Not specifying the donutHole object will create a Pie chart, rather then a Donut chart.
See the following links: