<!DOCTYPE html> <meta charset="utf-8"> <link href="../src/nv.d3.css" rel="stylesheet" type="text/css"> <style> body { overflow-y:scroll; } text { font: 12px sans-serif; } </style> <body> <svg id="test1"></svg> <svg id="test2"></svg> <script src="../lib/d3.v3.js"></script> <script src="../nv.d3.js"></script> <script src="../src/utils.js"></script> <script src="../src/models/pie.js"></script> <script> var testdata = [ { key: "One", y: 5 }, { key: "Two", y: 2 }, { key: "Three", y: 9 }, { key: "Four", y: 7 }, { key: "Five", y: 4 }, { key: "Six", y: 3 } ]; nv.addGraph(function() { var width = nv.utils.windowSize().width - 40, height = nv.utils.windowSize().height / 2 - 40; var chart = nv.models.pie() .values(function(d) { return d }) .width(width) .height(height); d3.select("#test1") .datum([testdata]) .transition().duration(1200) .attr('width', width) .attr('height', height) .call(chart); return chart; }); nv.addGraph(function() { var width = nv.utils.windowSize().width - 40, height = nv.utils.windowSize().height / 2 - 40; var chart = nv.models.pie() .values(function(d) { return d }) .width(width) .height(height) .donut(true); d3.select("#test2") .datum([testdata]) .transition().duration(1200) .attr('width', width) .attr('height', height) .call(chart); return chart; }); </script>