tests/smooth-plots.html

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