178 lines
3.8 KiB
HTML
178 lines
3.8 KiB
HTML
<!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>
|