<!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;
}
</style>
<body>
<svg id="test1"></svg>
<script src="../lib/d3.v3.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/models/historicalBar.js"></script>
<script src="../src/utils.js"></script>
<script>
nv.addGraph({
generate: function() {
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40;
var chart = nv.models.historicalBar()
.padData(true)
.width(width)
.height(height);
d3.select("#test1")
.attr('width', width)
.attr('height', height)
.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 = '<h3>' + e.label + '</h3>' +
'<p>' +
e.value +
'</p>';
*/
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();
});
/*
graph.dispatch.on('elementClick', function(e) {
console.log("Bar Click",e);
});
graph.dispatch.on('chartClick', function(e) {
console.log("Chart Click",e);
});
graph.dispatch.on('chartClick', function(e) {
console.log('Click Switching to');
if (td === 0) {
d3.select("#test1")
.datum(testdata2)
.call(graph);
td = 1;
} else {
d3.select("#test1")
.datum(testdata)
.call(graph);
td = 0;
}
});
*/
window.onresize = function() {
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40;
graph
.width(width)
.height(height)
d3.select("#test1")
.attr('width', width)
.attr('height', height)
.call(graph);
};
}
});
//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>