nvd3
Version:
A reusable charting library written in d3.js
183 lines (155 loc) • 4.74 kB
HTML
<html>
<head>
<meta charset="utf-8">
<link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>
<script src="../build/nv.d3.js"></script>
<script src="lib/stream_layers.js"></script>
<style>
text
{
font: 12px sans-serif;
}
svg
{
display: block;
float: left;
height: 350px ;
width: 350px ;
}
html, body
{
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.nvd3.nv-pie.nv-chart-donut2 .nv-pie-title
{
fill: gray;
}
.nvd3.nv-pie.nv-chart-donut1 .nv-pie-title
{
opacity: 0.4;
fill: green;
}
</style>
</head>
<body class='with-3d-shadow with-transitions'>
<svg id="test1" class="mypiechart"></svg>
<svg id="test2" class="mypiechart"></svg>
<svg id="test3" class="mypiechart"></svg>
<script>
var testdata1 = [
{ key: "Updated", y: 0 },
{ key: "Pending", y: 100 }
];
var arcRadius1 = [
{ inner: 0.6, outer: 1 },
{ inner: 0.65, outer: 0.95 }
];
var colors = ["green", "gray"];
var testdata2 = [
{ key: "One", y: 1 },
{ key: "Two", y: 1 },
{ key: "Three", y: 1 },
{ key: "Four", y: 1 },
{ key: "Five", y: 1 },
{ key: "Six", y: 1 },
{ key: "Seven", y: 1 }
];
var arcRadius2 = [
{ inner: 0.9, outer: 1 },
{ inner: 0.8, outer: 1 },
{ inner: 0.7, outer: 1 },
{ inner: 0.6, outer: 1 },
{ inner: 0.5, outer: 1 },
{ inner: 0.4, outer: 1 },
{ inner: 0.3, outer: 1 }
];
var testdata3 = [
{ key: "Updated", y: 80 },
{ key: "Pending", y: 20 }
];
var arcRadius3 = [
{ inner: 0, outer: 1 },
{ inner: 0, outer: 0.8 }
];
var height = 350;
var width = 350;
nv.addGraph(function () {
var chart = nv.models.pieChart()
.x(function (d) { return d.key })
.y(function (d) { return d.y })
.donut(true)
.showLabels(false)
.color(colors)
.width(width)
.height(height)
.growOnHover(false)
.arcsRadius(arcRadius1)
.id('donut1'); // allow custom CSS for this one svg
chart.title("0%");
d3.select("#test1")
.datum(testdata1)
.transition().duration(1200)
.attr('width', width)
.attr('height', height)
.call(chart);
// update chart data values randomly
setInterval(function () {
if (testdata1[0].y < 100) {
testdata1[0].y = testdata1[0].y + 1;
testdata1[1].y = testdata1[1].y - 1;
}
else {
testdata1[0].y = 0;
testdata1[1].y = 100;
}
chart.title(testdata1[0].y + "%");
chart.update();
}, 4000);
return chart;
});
nv.addGraph(function () {
var chart = nv.models.pieChart()
.x(function (d) { return d.key })
.y(function (d) { return d.y })
.donut(true)
.width(width)
.height(height)
.arcsRadius(arcRadius2)
.labelsOutside(true)
.labelSunbeamLayout(true)
.id('donut2'); // allow custom CSS for this one svg
d3.select("#test2")
.datum(testdata2)
.transition().duration(1200)
.attr('width', width)
.attr('height', height)
.call(chart);
return chart;
});
nv.addGraph(function () {
var chart = nv.models.pieChart()
.x(function (d) { return d.key })
.y(function (d) { return d.y })
.donut(true)
.showLabels(true)
.width(width)
.height(height)
.arcsRadius(arcRadius3)
.labelsOutside(true)
.id('donut3'); // allow custom CSS for this one svg
d3.select("#test3")
.datum(testdata3)
.transition().duration(1200)
.attr('width', width)
.attr('height', height)
.call(chart);
return chart;
});
</script>
</body>
</html>