nvd3
Version:
A reusable charting library written in d3.js
90 lines (75 loc) • 2.15 kB
HTML
<html>
<head>
<meta charset="utf-8">
<link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>
<script src="../build/nv.d3.js"></script>
<style>
text {
font: 12px sans-serif;
}
svg {
display: block;
}
html, body, svg {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<svg id="test1"></svg>
<script>
nv.addGraph({
generate: function() {
var chart = nv.models.historicalBar();
d3.select("#test1")
.datum(sinData())
.datum(sinData())
.transition()
.call(chart);
return chart;
},
callback: function(graph) {
graph.dispatch.on('elementMouseover', function(e) {
var offsetElement = document.getElementById("chart"),
left = e.pos[0],
top = e.pos[1];
var content = '<p>' + e.point.y + '</p>';
nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's');
});
graph.dispatch.on('elementMouseout', function(e) {
nv.tooltip.cleanup();
});
}
});
//Simple test data generators
function sinAndCos() {
var sin = [],
cos = [];
for (var i = 0; i < 100; i++) {
sin.push({x: i, y: Math.sin(i/10)});
cos.push({x: i, y: .5 * Math.cos(i/10)});
}
return [
{values: sin, key: "Sine Wave", color: "#ff7f0e"},
{values: cos, key: "Cosine Wave", color: "#2ca02c"}
];
}
function sinData() {
var sin = [];
for (var i = 0; i < 100; i++) {
sin.push({x: i, y: Math.sin(i/10)});
}
return [{
values: sin,
key: "Sine Wave",
color: "#ff7f0e"
}];
}
</script>
</body>
</html>