<!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>
<div id="test1">
<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/axis.js"></script>
<script src="../src/models/multiBar.js"></script>
<script src="../src/utils.js"></script>
<script src="stream_layers.js"></script>
<script>
//var test_data = stream_layers(3,128,.1).map(function(data, i) {
var test_data = stream_layers(3,128,.1).map(function(data, i) {
return {
key: 'Stream' + i,
values: data
};
});
nv.addGraph({
generate: function() {
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40;
var chart = nv.models.multiBar()
.width(width)
.height(height)
.stacked(true)
var svg = d3.select('#test1 svg')
.attr('width', width)
.attr('height', height)
.datum(test_data);
svg.transition().duration(500).call(chart);
return chart;
},
callback: function(graph) {
window.onresize = function() {
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40,
margin = graph.margin();
if (width < margin.left + margin.right + 20)
width = margin.left + margin.right + 20;
if (height < margin.top + margin.bottom + 20)
height = margin.top + margin.bottom + 20;
graph
.width(width)
.height(height);
d3.select('#test1 svg')
.attr('width', width)
.attr('height', height)
transition().duration(500)
.call(graph);
};
}
});
</script>