multiBar.html

<!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>