<!DOCTYPE html>
<meta charset="utf-8">
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
<style>

body {
  overflow-y:scroll;
}

</style>
<body>

<svg id="test1"></svg>

<script src="../lib/d3.v3.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/line.js"></script>
<script src="../src/utils.js"></script>
<script>


//Format A
nv.addGraph({
  generate: function() {
    var width = nv.utils.windowSize().width - 40,
        height = nv.utils.windowSize().height - 40;

    var chart = nv.models.line()
                .width(width)
                .height(height)
                .margin({top: 20, right: 20, bottom: 20, left: 20})


    d3.select('#test1')
      .attr('width', width)
      .attr('height', height)
      .datum(sinAndCos())
      .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')
        .attr('width', width)
        .attr('height', height)
        .call(graph);
    };
  }
});


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"
    }
  ];
}


</script>