examples/stackedArea.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="chart">
    <svg></svg>
  </div>

<script src="../lib/d3.v3.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/utils.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/models/stackedArea.js"></script>
<script>


//Format A
nv.addGraph({
  generate: function() {
    var n = 10, // number of layers
        m = 200; // number of samples per layer
        //color = d3.interpolateRgb("#aad", "#556");

    var data = stream_layers(n,m).map(function(data, i) {
      return { 
        key: 'Stream' + i,
        values: data
      };
    });


    var width = nv.utils.windowSize().width - 20,
        height = nv.utils.windowSize().height - 20;

    var chart = nv.models.stackedArea()
                .width(width)
                .height(height)
                //.offset('wiggle')
                //.order('default')


    var svg = d3.select('#chart svg')
      .attr('width', width)
      .attr('height', height)
      .datum(data)

    svg.transition().duration(500).call(chart);

    return chart;
  },
  callback: function(graph) {


    graph.dispatch.on('tooltipShow', function(e) {
        var offsetElement = document.getElementById("chart"),
                left = e.pos[0] + offsetElement.offsetLeft,
                top = e.pos[1] + offsetElement.offsetTop,
                formatterY = d3.format(",.2%"),
          formatterX = function(d) {
            return   d3.time.format('%x')(new Date(d))
          };

      var content = '<h3>' + e.series.key + '</h3>' +
                    '<p>' +
                    formatterY(graph.y()(e.point)) + ' at ' + formatterX(graph.x()(e.point)) +
                    '</p>';

      nv.tooltip.show([left, top], content);
    });

    graph.dispatch.on('tooltipHide', function(e) {
      nv.tooltip.cleanup();
    });


	window.onResize = function() {
      var width = nv.utils.windowSize().width - 20,
          height = nv.utils.windowSize().height - 20,
          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('#chart svg')
        .attr('width', width)
        .attr('height', height)
        .call(graph);

    }
  }
});


/* Inspired by Lee Byron's test data generator. */
function stream_layers(n, m, o) {
  if (arguments.length < 3) o = 0;
  function bump(a) {
    var x = 1 / (.1 + Math.random()),
        y = 2 * Math.random() - .5,
        z = 10 / (.1 + Math.random());
    for (var i = 0; i < m; i++) {
      var w = (i / m - y) * z;
      a[i] += x * Math.exp(-w * w);
    }
  }
  return d3.range(n).map(function() {
      var a = [], i;
      for (i = 0; i < m; i++) a[i] = o + o * Math.random();
      for (i = 0; i < 5; i++) bump(a);
      return a.map(stream_index);
    });
}

/* Another layer generator using gamma distributions. */
function stream_waves(n, m) {
  return d3.range(n).map(function(i) {
    return d3.range(m).map(function(j) {
        var x = 20 * j / m - i / 3;
        return 2 * x * Math.exp(-.5 * x);
      }).map(stream_index);
    });
}

function stream_index(d, i) {
  return {x: i, y: Math.max(0, d)};
}


</script>