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

.sparkline path {
  fill: none;
  stroke: #444;
}

text {
  font: 10px sans-serif;
}

#chart1 {
  width: 300px;
  height: 32px;
}

</style>
<body>

  <h2>Sparkline: <svg id="chart1" class="sparkline"></svg></h2>

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

//Format A
nv.addGraph({
  generate: function() {
    var chart = nv.models.sparkline()
                  .width(400)
                  .height(30)

    d3.select("#chart1")
      .datum(sine())
      .call(chart);

    return chart;
  },
  callback: function(graph) {
    //log("Sparkline rendered");
  }
});


function sine() {
  var sin = [];

  for (var i = 0; i < 100; i++) {
    sin.push({x: i, y: Math.sin(i/10)});
  }

  return sin;
}


</script>