tests/linear-regression-addseries.html

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