projects / dygraphs.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: c36a62c)
move smooth plotter into its own demo re-smooth-plotter
authorDan Vanderkam <danvdk@gmail.com>
Sun, 16 Nov 2014 21:15:54 +0000 (16:15 -0500)
committerDan Vanderkam <danvdk@gmail.com>
Sun, 16 Nov 2014 21:17:12 +0000 (16:17 -0500)
tests/plotters.html patch | blob | blame | history
tests/smooth-plots.html [new file with mode: 0644] patch | blob

diff --git a/tests/plotters.html b/tests/plotters.html
index 7f5242b..104ab78 100644 (file)
--- a/tests/plotters.html
+++ b/tests/plotters.html
@@ -7,7 +7,6 @@
     <script type="text/javascript" src="../excanvas.js"></script>
     <![endif]-->
     <script type="text/javascript" src="../dygraph-dev.js"></script>
-    <script type="text/javascript" src="../extras/smooth-plotter.js"></script>
 
     <script type="text/javascript" src="data.js"></script>
     <style type="text/css">
@@ -18,9 +17,6 @@
         width: 640px;
         height: 320px;
       }
-      input[type="range"] {
-        width: 400px;
-      }
     </style>
   </head>
   <body>
@@ -56,9 +52,7 @@
     <div id="mixed-error" class="chart"></div>
 
     <h2>Smooth Lines</h2>
-    <p>This plotter draws smooth lines between points using bezier curves:</p>
-    Smoothing:&nbsp;<input type="range" id="smoothing-amount" min=0 max=0.7 step=0.02 value=0.3><br>
-    <div id="smooth-line" class="chart"></div>
+    <p>See the <a href="smooth-plots.html">smooth-plots demo</a> for an example of a custom plotter which connects points using bezier curves instead of straight lines.</p>
 
     <script type="text/javascript">
       // Darken a color
@@ -329,45 +323,6 @@ var candleData = "Date,Open,Close,High,Low\n" +
               }
             });
 
-
-    // Smooth line plotter
-    var functionData = [];
-    var vs = [10, 20, 40, 0, 30, 15, 25, 60, 35, 45];
-    for (var i = 0; i < 10; i++) {
-      var v = vs[i];
-      functionData.push([i, v, v]);
-    }
-
-    var g6;
-    function drawSmoothPlot() {
-      g6 = new Dygraph(document.getElementById('smooth-line'),
-                       functionData,
-                       {
-                         labels: ['Year', 'Straight', 'Smoothed'],
-                         series: {
-                           Straight: {
-                             color: 'rgba(0,0,0,0.33)',
-                             strokeWidth: 2,
-                             drawPoints: true,
-                             pointSize: 3
-                           },
-                           Smoothed: {
-                             plotter: smoothPlotter,
-                             color: 'red',
-                             strokeWidth: 2
-                           }
-                         },
-                         legend: 'always',
-                         gridLineColor: '#ddd'
-                       });
-    }
-    drawSmoothPlot();
-
-    var smoothRangeEl = document.getElementById('smoothing-amount');
-    smoothRangeEl.addEventListener('input', function() {
-      smoothPlotter.smoothing = parseFloat(smoothRangeEl.value);
-      drawSmoothPlot();
-    });
     </script>
 </body>
 </html>
diff --git a/tests/smooth-plots.html b/tests/smooth-plots.html
new file mode 100644 (file)
index 0000000..175da2d
--- /dev/null
+++ b/tests/smooth-plots.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
+    <title>Plotters demo</title>
+    <!--[if IE]>
+    <script type="text/javascript" src="../excanvas.js"></script>
+    <![endif]-->
+    <script type="text/javascript" src="../dygraph-dev.js"></script>
+    <script type="text/javascript" src="../extras/smooth-plotter.js"></script>
+
+    <style type="text/css">
+      body {
+        max-width: 700px;
+      }
+      div.chart {
+        width: 640px;
+        height: 320px;
+      }
+      input[type="range"] {
+        width: 400px;
+      }
+      .smoother {
+        margin-left: 50px;
+      }
+    </style>
+  </head>
+  <body>
+    <h2>Smooth Lines</h2>
+    <p>This plotter draws smooth lines between points using bezier curves.</p>
+    <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>
+    <div id="smooth-line" class="chart"></div>
+
+    <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>
+
+<script type="text/javascript">
+// Smooth line plotter
+var functionData = [];
+var vs = [10, 20, 40, 0, 30, 15, 25, 60, 35, 45];
+for (var i = 0; i < 10; i++) {
+  var v = vs[i];
+  functionData.push([i, v, v]);
+}
+
+var g6;
+function drawSmoothPlot() {
+  g6 = new Dygraph(document.getElementById('smooth-line'),
+                   functionData,
+                   {
+                     labels: ['Year', 'Straight', 'Smoothed'],
+                     series: {
+                       Straight: {
+                         color: 'rgba(0,0,0,0.33)',
+                         strokeWidth: 2,
+                         drawPoints: true,
+                         pointSize: 3
+                       },
+                       Smoothed: {
+                         plotter: smoothPlotter,
+                         color: 'red',
+                         strokeWidth: 2
+                       }
+                     },
+                     legend: 'always',
+                     gridLineColor: '#ddd'
+                   });
+}
+drawSmoothPlot();
+
+var smoothRangeEl = document.getElementById('smoothing-amount');
+smoothRangeEl.addEventListener('input', function() {
+  var param = parseFloat(smoothRangeEl.value);
+  smoothPlotter.smoothing = param;
+  document.getElementById('smoothing-param').innerHTML = param;
+  drawSmoothPlot();
+});
+</script>
+</body>
+</html>
danvk/dygraphs fork supporting touch events