<!DOCTYPE html>
<meta charset="utf-8">
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
<link href="teststyle.css" rel="stylesheet" type='text/css'>
<style>
body {
overflow-y:scroll;
font-family: Arial;
}
text {
font: 12px sans-serif;
}
</style>
<body class='with-transitions'>
<div class='navigation'>
Tests:
<a href="lineChartTest.html">Line Chart</a>
<a href="stackedAreaChartTest.html">Stacked Area</a>
<a href="../examples/cumulativeLineChart.html">Cumulative Line</a>
<a href="ScatterChartTest.html">Scatter</a>
<a href="realTimeChartTest.html">Real time test</a>
</div>
<div class='chart third' id="test1">
<h2>Standard Pie Chart</h2>
<svg></svg>
</div>
<div class='chart third' id="test2">
<h2>Donut pie chart</h2>
<svg></svg>
</div>
<div class='chart third' id="test3">
<h2>Pie chart with 30 series'</h2>
<svg></svg>
</div>
<div class='chart third' id='test7'>
<h2>Pie chart with percent label type</h2>
<svg></svg>
</div>
<div class='chart third' id="test4">
<h2>Empty array passed in</h2>
<svg></svg>
</div>
<div class='chart third' id="test5">
<h2>Series' have only zero values</h2>
<svg></svg>
</div>
<div class='chart third' id="test6">
<h2>NaN, null, undefined values passed in</h2>
<svg></svg>
</div>
<script src="../lib/d3.v3.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/tooltip.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
}
];
function thirtySeries() {
var data = [];
for(var i =0; i < 30; i++) {
data.push({
key: "Series-" + i,
y: Math.floor(Math.random() * 100)
});
}
return data;
}
function defaultChart(containerId, data, labelType) {
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)
.labelType(labelType)
;
d3.select("#" + containerId + " svg")
.datum(data)
.transition().duration(1200)
.attr('width', width)
.attr('height', height)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
}
//Adds donut pie chart.
nv.addGraph(function() {
var width = 500,
height = 500;
var chart = nv.models.pieChart()
.x(function(d) { return d.key })
.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 });
d3.select("#test2 svg")
.datum(testdata)
.transition().duration(1200)
.attr('width', width)
.attr('height', height)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
defaultChart("test1", testdata);
defaultChart("test3", thirtySeries());
defaultChart("test4",[]);
defaultChart("test5",[{key: "Zero series", y: 0}, {key: "Zero series 2", y: 0}]);
defaultChart("test6", [
{key: "Undefined", y: undefined},
{key: "Nan", y: NaN},
{key: "null", y: null},
{key: "zero", y: 0}
])
defaultChart("test7",testdata, "percent");
</script>