Smooth plotter using bezier curves.

[dygraphs.git] / tests / plotters.html
diff --git a/tests/plotters.html b/tests/plotters.html

index 9b800ec..7f5242b 100644 (file)
--- a/tests/plotters.html
+++ b/tests/plotters.html
@@ -7,6 +7,7 @@
      <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">
@@ -17,6 +18,9 @@
          width: 640px;
          height: 320px;
        }
+      input[type="range"] {
+        width: 400px;
+      }
      </style>
    </head>
    <body>
@@ -51,7 +55,21 @@
      and showing error bars only for some series.</p>
      <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>
+
      <script type="text/javascript">
+      // Darken a color
+      function darkenColor(colorStr) {
+        // Defined in dygraph-utils.js
+        var color = Dygraph.toRGB_(colorStr);
+        color.r = Math.floor((255 + color.r) / 2);
+        color.g = Math.floor((255 + color.g) / 2);
+        color.b = Math.floor((255 + color.b) / 2);
+        return 'rgb(' + color.r + ',' + color.g + ',' + color.b + ')';
+      }
  
        // This function draws bars for a single series. See
        // multiColumnBarPlotter below for a plotter which can draw multi-series
@@ -61,13 +79,7 @@
          var points = e.points;
          var y_bottom = e.dygraph.toDomYCoord(0);
  
-        // The RGBColorParser class is provided by rgbcolor.js, which is
-        // packed in with dygraphs.
-        var color = new RGBColorParser(e.color);
-        color.r = Math.floor((255 + color.r) / 2);
-        color.g = Math.floor((255 + color.g) / 2);
-        color.b = Math.floor((255 + color.b) / 2);
-        ctx.fillStyle = color.toRGB();
+        ctx.fillStyle = darkenColor(e.color);
  
          // Find the minimum separation between x-values.
          // This determines the bar width.
@@ -274,11 +286,7 @@ var candleData = "Date,Open,Close,High,Low\n" +
        var fillColors = [];
        var strokeColors = g.getColors();
        for (var i = 0; i < strokeColors.length; i++) {
-        var color = new RGBColorParser(strokeColors[i]);
-        color.r = Math.floor((255 + color.r) / 2);
-        color.g = Math.floor((255 + color.g) / 2);
-        color.b = Math.floor((255 + color.b) / 2);
-        fillColors.push(color.toRGB());
+        fillColors.push(darkenColor(strokeColors[i]));
        }
  
        for (var j = 0; j < sets.length; j++) {
@@ -321,6 +329,45 @@ 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>