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