| <!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; |
| } |
| |
| .mypiechart { |
| width: 500px; |
| border: 2px; |
| } |
| </style> |
| <body class='with-3d-shadow with-transitions'> |
| |
| <h2>Test1</h2> |
| <svg id="test1" class="mypiechart"></svg> |
| |
| <h2>Test2</h2> |
| <svg id="test2" class="mypiechart"></svg> |
| |
| <script src="../lib/d3.v3.js"></script> |
| <script src="../nv.d3.js"></script> |
| <script src="../src/models/legend.js"></script> |
| <script src="../src/models/pie.js"></script> |
| <script src="../src/models/pieChart.js"></script> |
| <script src="../src/utils.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 |
| }, |
| { |
| key: "Seven", |
| y: .5 |
| } |
| ]; |
| |
| |
| nv.addGraph(function() { |
| var width = 500, |
| height = 500; |
| |
| var chart = nv.models.pieChart() |
| .x(function(d) { return d.key }) |
| .y(function(d) { return d.y }) |
| .color(d3.scale.category10().range()) |
| .width(width) |
| .height(height); |
| |
| d3.select("#test1") |
| .datum(testdata) |
| .transition().duration(1200) |
| .attr('width', width) |
| .attr('height', height) |
| .call(chart); |
| |
| chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); }); |
| |
| return chart; |
| }); |
| |
| nv.addGraph(function() { |
| |
| var width = 500, |
| height = 500; |
| |
| var chart = nv.models.pieChart() |
| .x(function(d) { return d.key }) |
| //.y(function(d) { return d.value }) |
| //.labelThreshold(.08) |
| //.showLabels(false) |
| .color(d3.scale.category10().range()) |
| .width(width) |
| .height(height) |
| .donut(true); |
| |
| chart.pie |
| .startAngle(function(d) { return d.startAngle/2 -Math.PI/2 }) |
| .endAngle(function(d) { return d.endAngle/2 -Math.PI/2 }); |
| |
| //chart.pie.donutLabelsOutside(true).donut(true); |
| |
| d3.select("#test2") |
| //.datum(historicalBarChart) |
| .datum(testdata) |
| .transition().duration(1200) |
| .attr('width', width) |
| .attr('height', height) |
| .call(chart); |
| |
| return chart; |
| }); |
| |
| </script> |
