[Feature Request] Provide option to set color and width for annotation line (#703)

[dygraphs.git] / tests / linear-regression-addseries.html
diff --git a/tests/linear-regression-addseries.html b/tests/linear-regression-addseries.html

index 3aa0632..2efffb1 100644 (file)
--- a/tests/linear-regression-addseries.html
+++ b/tests/linear-regression-addseries.html
@@ -1,13 +1,14 @@
+<!DOCTYPE html>
  <html>
    <head>
+    <link rel="stylesheet" href="../css/dygraph.css">
      <title>Linear Regression</title>
-    <!--[if IE]>
-    <script type="text/javascript" src="excanvas.js"></script>
-    <![endif]-->
-    <script type="text/javascript" src="../strftime/strftime-min.js"></script>
-    <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
-    <script type="text/javascript" src="../dygraph-canvas.js"></script>
-    <script type="text/javascript" src="../dygraph.js"></script>
+    <!--
+    For production (minified) code, use:
+    <script type="text/javascript" src="dygraph-combined.js"></script>
+    -->
+    <script type="text/javascript" src="../dist/dygraph.js"></script>
+
      <style type="text/css">
      body { max-width: 640 px; }
      </style>
@@ -37,6 +38,7 @@
                {
                  labels: labels,
                  drawPoints: true,
+                strokeWidth: 0.0,
                  drawCallback: function(g, is_initial) {
                    if (!is_initial) return;
                    var c = g.getColors();
@@ -60,6 +62,10 @@
  
            var y = data[i][series];
            if (y == null) continue;
+          if (y.length == 2) {
+            // using fractions
+            y = y[0] / y[1];
+          }
  
            num++;
            sum_x += x;
@@ -72,28 +78,38 @@
          var b = (sum_y - a * sum_x) / num;
  
          coeffs[series] = [b, a];
-        if (console) {
+        if (typeof(console) != 'undefined') {
            console.log("coeffs(" + series + "): [" + b + ", " + a + "]");
          }
  
          updateChart();
        }
  
+      function toHex(rgb) {
+        return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
+      }
+
        function updateChart() {
          // Generate a new data set with the regression lines.
          var new_labels = [];
          var new_colors = [];
+        var new_opts = {};
          for (var i = 0; i < labels.length; i++) {
            new_labels.push(labels[i]);
            if (i) new_colors.push(orig_colors[i - 1]);
            if (coeffs[i]) {
              // Darken the series by 50% to generate its regression.
-            new_labels.push(labels[i] + " Regression");
-            var c = new RGBColor(orig_colors[i - 1]);
+            var label = labels[i] + " Regression";
+            new_labels.push(label);
+            var c = Dygraph.toRGB_(orig_colors[i - 1]);
              c.r = Math.floor(255 - 0.5 * (255 - c.r));
              c.g = Math.floor(255 - 0.5 * (255 - c.g));
              c.b = Math.floor(255 - 0.5 * (255 - c.b));
-            new_colors.push(c.toHex());
+            new_colors.push(toHex(c));
+            new_opts[label] = {
+              drawPoints: false,
+              strokeWidth: 1.0
+            };
            }
          }
  
@@ -108,49 +124,16 @@
            }
          }
  
-        // TODO(danvk): set colors intelligently.
-
-        g.updateOptions({
-          file: new_data,
-          labels: new_labels,
-          colors: new_colors
-        });
+        new_opts.file = new_data;
+        new_opts.labels = new_labels;
+        new_opts.colors = new_colors;
+        g.updateOptions(new_opts);
        }
  
        function clearLines() {
          for (var i = 0; i < coeffs.length; i++) coeffs[i] = null;
          updateChart();
        }
-
-      // function drawLines(ctx, area, layout) {
-      //   if (typeof(g) == 'undefined') return;  // won't be set on the initial draw.
-
-      //   var range = g.xAxisRange();
-      //   for (var i = 0; i < coeffs.length; i++) {
-      //     if (!coeffs[i]) continue;
-      //     var a = coeffs[i][1];
-      //     var b = coeffs[i][0];
-
-      //     var x1 = range[0];
-      //     var y1 = a * x1 + b;
-      //     var x2 = range[1];
-      //     var y2 = a * x2 + b;
-
-      //     var p1 = g.toDomCoords(x1, y1);
-      //     var p2 = g.toDomCoords(x2, y2);
-
-      //     var color = g.getColors()[i - 1];
-      //     ctx.save();
-      //     ctx.strokeStyle = color;
-      //     ctx.lineWidth = 1.0;
-      //     ctx.beginPath();
-      //     ctx.moveTo(p1[0], p1[1]);
-      //     ctx.lineTo(p2[0], p2[1]);
-      //     ctx.closePath();
-      //     ctx.stroke();
-      //     ctx.restore();
-      //   }
-      // }
        
      </script>