tests/smooth-plots.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <link rel="stylesheet" href="../dist/dygraph.css">
   5     <title>Plotters demo</title>
   6     <script type="text/javascript" src="../dist/dygraph.js"></script>
   7     <script type="text/javascript" src="../src/extras/smooth-plotter.js"></script>
   8
   9     <style type="text/css">
  10       body {
  11         max-width: 700px;
  12       }
  13       div.chart {
  14         width: 640px;
  15         height: 320px;
  16       }
  17       input[type="range"] {
  18         width: 400px;
  19       }
  20       .smoother {
  21         margin-left: 50px;
  22       }
  23     </style>
  24   </head>
  25   <body>
  26     <h2>Smooth Lines</h2>
  27     <p>This plotter draws smooth lines between points using bezier curves.</p>
  28     <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>
  29     <div id="smooth-line" class="chart"></div>
  30
  31     <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>
  32
  33 <script type="text/javascript">
  34 // Smooth line plotter
  35 var functionData = [];
  36 var vs = [10, 20, 40, 0, 30, 15, 25, 60, 35, 45];
  37 for (var i = 0; i < 10; i++) {
  38   var v = vs[i];
  39   functionData.push([i, v, v]);
  40 }
  41
  42 var g6;
  43 function drawSmoothPlot() {
  44   g6 = new Dygraph(document.getElementById('smooth-line'),
  45                    functionData,
  46                    {
  47                      labels: ['Year', 'Straight', 'Smoothed'],
  48                      series: {
  49                        Straight: {
  50                          color: 'rgba(0,0,0,0.33)',
  51                          strokeWidth: 2,
  52                          drawPoints: true,
  53                          pointSize: 3
  54                        },
  55                        Smoothed: {
  56                          plotter: smoothPlotter,
  57                          color: 'red',
  58                          strokeWidth: 2
  59                        }
  60                      },
  61                      legend: 'always',
  62                      gridLineColor: '#ddd'
  63                    });
  64 }
  65 drawSmoothPlot();
  66
  67 var smoothRangeEl = document.getElementById('smoothing-amount');
  68 smoothRangeEl.addEventListener('input', function() {
  69   var param = parseFloat(smoothRangeEl.value);
  70   smoothPlotter.smoothing = param;
  71   document.getElementById('smoothing-param').innerHTML = param;
  72   drawSmoothPlot();
  73 });
  74 </script>
  75 </body>
  76 </html>