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