183 lines
4.6 KiB
HTML
183 lines
4.6 KiB
HTML
<!DOCTYPE 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 !important;
|
|
width: 350px !important;
|
|
}
|
|
|
|
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>
|