You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
nvd3/examples/pie.html

113 lines
2.0 KiB
HTML

<!DOCTYPE html>
<meta charset="utf-8">
<link href="../src/d3.css" rel="stylesheet" type="text/css">
<style>
body {
overflow-y:scroll;
}
text {
font: 12px sans-serif;
}
</style>
<body>
<svg id="test1"></svg>
<script src="../lib/d3.v2.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/models/pie.js"></script>
<script>
var testdata = [
{
label: "One",
y: 5
},
{
label: "Two",
y: 2
},
{
label: "Three",
y: 9
},
{
label: "Four",
y: 7
},
{
label: "Five",
y: 4
},
{
label: "Six",
y: 3
}
];
//Format A
nv.addGraph({
generate: function() {
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40;
var chart = nv.models.pie()
.width(width)
.height(height);
d3.select("#test1")
.attr('width', width)
.attr('height', height)
.datum(testdata)
.call(chart);
return chart;
},
callback: function(graph) {
graph.dispatch.on('tooltipShow', function(e) {
var offsetElement = document.getElementById("chart"),
left = e.pos[0],
top = e.pos[1];
var content = '<h3>' + e.label + '</h3>' +
'<p>' +
e.value +
'</p>';
nv.tooltip.show([left, top], content);
});
graph.dispatch.on('tooltipHide', function(e) {
nv.tooltip.cleanup();
});
graph.dispatch.on('elementClick', function(e) { console.log("Clicked on Element",e); });
graph.dispatch.on('chartClick', function(e) { console.log("Clicked on chart",e); });
window.onresize = function() {
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40;
d3.select("#test1")
.attr('width', width)
.attr('height', height)
.call(
graph
.width(width)
.height(height)
)
};
}
});
</script>