tests/smooth-plots.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>Plotters demo</title>
   5     <script type="text/javascript" src="../dist/dygraph.js"></script>
   6     <script type="text/javascript" src="../src/extras/smooth-plotter.js"></script>
   7
   8     <style type="text/css">
   9       body {
  10         max-width: 700px;
  11       }
  12       div.chart {
  13         width: 640px;
  14         height: 320px;
  15       }
  16       input[type="range"] {
  17         width: 400px;
  18       }
  19       .smoother {
  20         margin-left: 50px;
  21       }
  22     </style>
  23   </head>
  24   <body>
  25     <h2>Smooth Lines</h2>
  26     <p>This plotter draws smooth lines between points using bezier curves.</p>
  27     <p class="smoother">Smoothing:&nbsp;<input type="range" id="smoothing-amount" min=0 max=0.7 step=0.01 value=0.33> <span id="smoothing-param">0.33</span></p>
  28     <div id="smooth-line" class="chart"></div>
  29
  30     <p>View source to see how this works. You'll have to source <code>extras/smooth-plotter.js</code> in addition to dygraphs to get this feature. See the <a href="https://github.com/danvk/dygraphs/pull/469">pull request</a> that introduced this plotter to learn more about how it smooths your curves.</p>
  31
  32 <script type="text/javascript">
  33 // Smooth line plotter
  34 var functionData = [];
  35 var vs = [10, 20, 40, 0, 30, 15, 25, 60, 35, 45];
  36 for (var i = 0; i < 10; i++) {
  37   var v = vs[i];
  38   functionData.push([i, v, v]);
  39 }
  40
  41 var g6;
  42 function drawSmoothPlot() {
  43   g6 = new Dygraph(document.getElementById('smooth-line'),
  44                    functionData,
  45                    {
  46                      labels: ['Year', 'Straight', 'Smoothed'],
  47                      series: {
  48                        Straight: {
  49                          color: 'rgba(0,0,0,0.33)',
  50                          strokeWidth: 2,
  51                          drawPoints: true,
  52                          pointSize: 3
  53                        },
  54                        Smoothed: {
  55                          plotter: smoothPlotter,
  56                          color: 'red',
  57                          strokeWidth: 2
  58                        }
  59                      },
  60                      legend: 'always',
  61                      gridLineColor: '#ddd'
  62                    });
  63 }
  64 drawSmoothPlot();
  65
  66 var smoothRangeEl = document.getElementById('smoothing-amount');
  67 smoothRangeEl.addEventListener('input', function() {
  68   var param = parseFloat(smoothRangeEl.value);
  69   smoothPlotter.smoothing = param;
  70   document.getElementById('smoothing-param').innerHTML = param;
  71   drawSmoothPlot();
  72 });
  73 </script>
  74 </body>
  75 </html>