Skip to content

Instantly share code, notes, and snippets.

@rreinhardt9

rreinhardt9/nvd3 Pie example

Created April 9, 2015 17:53
Show Gist options
  • Save rreinhardt9/6b055863fcf41c76a5ce to your computer and use it in GitHub Desktop.
Save rreinhardt9/6b055863fcf41c76a5ce to your computer and use it in GitHub Desktop.
Download ZIP
nvd3 Pie with legend on right side for debugging
Raw
nvd3 Pie example
<!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.2/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;
}
html, body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
</style>
</head>
<body class='with-3d-shadow with-transitions'>
<svg id="test1" class="mypiechart"></svg>
<svg id="test2" class="mypiechart"></svg>
<script>
var testdata2 = [
{key: "One", y: 5},
{key: "Two", y: 2},
{key: "Three", y: 9},
{key: "Four", y: 7},
{key: "Five", y: 4},
{key: "Six", y: 3},
{key: "Seven", y: 0.5},
{key: "Eight", y: 2},
{key: "Nine", y: 2},
{key: "Ten", y: 2},
{key: "Eleven", y: 2},
{key: "Twelve", y: 2},
{key: "Thirteen", y: 2}
];
nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) { return d.key })
.y(function(d) { return d.y })
.legendPosition("right");
d3.select("#test1")
.datum(testdata2)
.transition().duration(1200)
.call(chart);
nv.utils.windowResize(chart.update)
return chart;
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment