Pie Charts re-used
HTML
<link rel="stylesheet" href="http://nvd3.org/assets/css/nv.d3.css">
<script src="http://nvd3.org/assets/lib/d3.v3.js"></script>
<script src="http://nvd3.org/assets/js/nv.d3.js"></script>
<div id='chart1'>
<h3>My Chart 1</h3>
<svg></svg>
</div>
<div id='chart2'>
<h3>My Chart 2</h3>
<svg></svg>
</div>
<div id='chart3'>
<h3>My Chart 3</h3>
<svg></svg>
</div>
CSS
#chart1, #chart2, #chart3 {
width : 400px;
float: left;
}
JavaScript
// Call my charts
drawChart('chart1');
drawChart('chart2');
drawChart1('chart3');
//Donut chart example
function drawChart(div) {
var width = height = 400;
nv.addGraph(function () {
var chart = nv.models.pieChart()
.x(function (d) {
return d.label
})
.y(function (d) {
return d.value
})
.width(width)
.height(height)
.showLabels(true)
.labelThreshold(.05)
.labelType("percent")
.donut(true)
.donutRatio(0.35);
d3.select("#" + div + " svg")
.datum(exampleData())
.attr('width', width).attr('height', height)
.transition().duration(350)
.call(chart);
return chart;
});
}
//Pie chart example data. Note how there is only a single array of key-value pairs.
function exampleData() {
return [{
"label": "One",
"value": 29.765957771107
}, {
"label": "Two",
"value": 0
}, {
"label": "Three",
"value": 32.807804682612
}, {
"label": "Four",
"value": 196.45946739256
}, {
"label": "Five",
"value": 0.19434030906893
}, {
"label": "Six",
"value": 98.079782601442
}, {
"label": "Seven",
"value": 13.925743130903
}, {
"label": "Eight",
"value": 5.1387322875705
}];
}
function drawChart1(div) {
var width = height = 400;
nv.addGraph(function () {
var chart = nv.models.linechart()
.x(function (d) {
return d.label
})
.y(function (d) {
return d.value
})
.width(width)
.height(height)
.showLabels(false)
.labelThreshold(.05)
.labelType("percent");
d3.select("#" + div + " svg")
.datum(exampleData1())
...