tests/linear-regression-addseries.html

   1 <html>
   2   <head>
   3     <title>Linear Regression</title>
   4     <!--[if IE]>
   5     <script type="text/javascript" src="excanvas.js"></script>
   6     <![endif]-->
   7     <script type="text/javascript" src="../strftime/strftime-min.js"></script>
   8     <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
   9     <script type="text/javascript" src="../dygraph-canvas.js"></script>
  10     <script type="text/javascript" src="../dygraph.js"></script>
  11     <style type="text/css">
  12     body { max-width: 640 px; }
  13     </style>
  14   </head>
  15   <body>
  16     <h2>Linear Regression Demo</h2>
  17     <p>Click the buttons to generate linear regressions over either data
  18     series. If you zoom in and click the regression button, the regression will
  19     only be run over visible points. Zoom back out to see what the local
  20     regression looks like over the full data.</p>
  21
  22     <div id="demodiv" style="width: 480px; height: 320px;"></div>
  23
  24     <script type="text/javascript">
  25       var data = [];
  26       for (var i = 0; i < 120; i++) {
  27         data.push([i,
  28                    i / 5.0 + 10.0 * Math.sin(i / 3.0),
  29                    30.0 - i / 5.0 - 10.0 * Math.sin(i / 3.0 + 1.0)]);
  30       }
  31       var labels = ['X', 'Y1', 'Y2'];
  32       var orig_colors = [];
  33
  34       g = new Dygraph(
  35               document.getElementById("demodiv"),
  36               data,
  37               {
  38                 labels: labels,
  39                 drawPoints: true,
  40                 strokeWidth: 0.0,
  41                 drawCallback: function(g, is_initial) {
  42                   if (!is_initial) return;
  43                   var c = g.getColors();
  44                   for (var i = 0; i < c.length; i++) orig_colors.push(c[i]);
  45                 }
  46               }
  47           );
  48
  49       // coefficients of regression for each series.
  50       // if coeffs = [ null, [1, 2], null ] then we draw a regression for series 1
  51       // only. The regression line is y = 1 + 2 * x.
  52       var coeffs = [ null, null, null ];
  53       function regression(series) {
  54         // Only run the regression over visible points.
  55         var range = g.xAxisRange();
  56
  57         var sum_xy = 0.0, sum_x = 0.0, sum_y = 0.0, sum_x2 = 0.0, num = 0;
  58         for (var i = 0; i < data.length; i++) {
  59           var x = data[i][0];
  60           if (x < range[0] || x > range[1]) continue;
  61
  62           var y = data[i][series];
  63           if (y == null) continue;
  64
  65           num++;
  66           sum_x += x;
  67           sum_y += y;
  68           sum_xy += x * y;
  69           sum_x2 += x * x;
  70         }
  71
  72         var a = (sum_xy - sum_x * sum_y / num) / (sum_x2 - sum_x * sum_x / num);
  73         var b = (sum_y - a * sum_x) / num;
  74
  75         coeffs[series] = [b, a];
  76         if (console) {
  77           console.log("coeffs(" + series + "): [" + b + ", " + a + "]");
  78         }
  79
  80         updateChart();
  81       }
  82
  83       function updateChart() {
  84         // Generate a new data set with the regression lines.
  85         var new_labels = [];
  86         var new_colors = [];
  87         var new_opts = {};
  88         for (var i = 0; i < labels.length; i++) {
  89           new_labels.push(labels[i]);
  90           if (i) new_colors.push(orig_colors[i - 1]);
  91           if (coeffs[i]) {
  92             // Darken the series by 50% to generate its regression.
  93             var label = labels[i] + " Regression";
  94             new_labels.push(label);
  95             var c = new RGBColor(orig_colors[i - 1]);
  96             c.r = Math.floor(255 - 0.5 * (255 - c.r));
  97             c.g = Math.floor(255 - 0.5 * (255 - c.g));
  98             c.b = Math.floor(255 - 0.5 * (255 - c.b));
  99             new_colors.push(c.toHex());
 100             new_opts[label] = {
 101               drawPoints: false,
 102               strokeWidth: 1.0
 103             };
 104           }
 105         }
 106
 107         var new_data = [];
 108         for (var i = 0; i < data.length; i++) {
 109           new_data.push([]);
 110           for (var j = 0; j < data[i].length; j++) {
 111             new_data[i].push(data[i][j]);
 112             if (coeffs[j]) {
 113               new_data[i].push(coeffs[j][0] + coeffs[j][1] * data[i][0]);
 114             }
 115           }
 116         }
 117
 118         new_opts.file = new_data;
 119         new_opts.labels = new_labels;
 120         new_opts.colors = new_colors;
 121         g.updateOptions(new_opts);
 122       }
 123
 124       function clearLines() {
 125         for (var i = 0; i < coeffs.length; i++) coeffs[i] = null;
 126         updateChart();
 127       }
 128
 129     </script>
 130
 131     <div style="position: absolute; left: 500px; top: 150px;">
 132     <input type=button style="color: green;" value="Regression (Y1)" onClick="regression(1)" />
 133     <br/><br/>
 134     <input type=button style="color: blue;" value="Regression (Y2)" onClick="regression(2)" />
 135     <br/><br/>
 136     <input type=button value="Clear Lines" onClick="clearLines()" />
 137     </div>
 138 </body>
 139 </html>