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

svg.sparkline {
  width: 500px;
  height: 70px;
  font-size: 14px;
  margin-top: -6px;
}


</style>
<body class='with-3d-shadow with-transitions'>

<h2>SparklinePlus:</h2>
<p><svg id="chart1" class="sparkline"></svg></p>
<br/>
<p>APPL:<svg id="chart2" class="sparkline"></svg></p>

<p>GOOG:<svg id="chart3" class="sparkline"></svg></p>

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

function defaultChartConfig(containerId, data) {
  nv.addGraph(function() {

    var chart = nv.models.sparklinePlus()

    chart
      .margin({left:70})
      .x(function(d,i) { return i })
      .xTickFormat(function(d) {
        return d3.time.format('%x')(new Date(data[d].x))
      })

    d3.select(containerId)
        .datum(data)
      .transition().duration(250)
        .call(chart);


    return chart;
  });
}

defaultChartConfig("#chart1",sine());
defaultChartConfig("#chart2", volatileChart(130.0, 0.02));
defaultChartConfig("#chart3", volatileChart(25.0, 0.09,30));


function sine() {
  var sin = [];
  var now =+new Date();

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

  return sin;
}

function volatileChart(startPrice, volatility, numPoints) {
     var rval =  [];
     var now =+new Date();
     numPoints = numPoints || 100;
     for(var i = 1; i < numPoints; i++) {

        rval.push({x: now + i * 1000 * 60 * 60 * 24, y: startPrice});
        var rnd = Math.random();
        var changePct = 2 * volatility * rnd;
        if ( changePct > volatility) {
           changePct -= (2*volatility);
        }
        startPrice = startPrice + startPrice * changePct;
     }
     return rval;
}

</script>