Merge branch 'master' of https://github.com/kberg/dygraphs
[dygraphs.git] / tests / linear-regression.html
CommitLineData
54425b14 1<!DOCTYPE html>
05a1d116
DV
2<html>
3 <head>
10494b48 4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
05a1d116
DV
5 <title>Linear Regression</title>
6 <!--[if IE]>
a2b2c3a1 7 <script type="text/javascript" src="../excanvas.js"></script>
05a1d116
DV
8 <![endif]-->
9 <script type="text/javascript" src="../strftime/strftime-min.js"></script>
10 <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
11 <script type="text/javascript" src="../dygraph-canvas.js"></script>
12 <script type="text/javascript" src="../dygraph.js"></script>
13 <style type="text/css">
14 body { max-width: 640 px; }
15 </style>
16 </head>
17 <body>
18 <h2>Linear Regression Demo</h2>
19 <p>Click the buttons to generate linear regressions over either data
20 series. If you zoom in and click the regression button, the regression will
21 only be run over visible points. Zoom back out to see what the local
22 regression looks like over the full data.</p>
23
24 <div id="demodiv" style="width: 480px; height: 320px;"></div>
25
26 <script type="text/javascript">
176c94a4 27 var data = [];
05a1d116 28 for (var i = 0; i < 120; i++) {
176c94a4
DV
29 data.push([i,
30 i / 5.0 + 10.0 * Math.sin(i / 3.0),
31 30.0 - i / 5.0 - 10.0 * Math.sin(i / 3.0 + 1.0)]);
05a1d116
DV
32 }
33
34 g = new Dygraph(
35 document.getElementById("demodiv"),
36 data,
37 {
176c94a4 38 labels: ['X', 'Y1', 'Y2'],
05a1d116 39 underlayCallback: drawLines,
de0445fc 40 drawPoints: true,
176c94a4 41 strokeWidth: 0.0
05a1d116
DV
42 }
43 );
44
45 // coefficients of regression for each series.
46 // if coeffs = [ null, [1, 2], null ] then we draw a regression for series 1
47 // only. The regression line is y = 1 + 2 * x.
48 var coeffs = [ null, null, null ];
49 function regression(series) {
50 // Only run the regression over visible points.
51 var range = g.xAxisRange();
52
53 var sum_xy = 0.0, sum_x = 0.0, sum_y = 0.0, sum_x2 = 0.0, num = 0;
54 for (var i = 0; i < g.numRows(); i++) {
55 var x = g.getValue(i, 0);
56 if (x < range[0] || x > range[1]) continue;
57
58 var y = g.getValue(i, series);
59 if (y == null) continue;
c5a37449
DV
60 if (y.length == 2) {
61 // using fractions
62 y = y[0] / y[1];
63 }
05a1d116
DV
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];
4df1af70 76 if (typeof(console) != 'undefined') {
2a07b0ad
DV
77 console.log("coeffs(" + series + "): [" + b + ", " + a + "]");
78 }
05a1d116
DV
79
80 g.updateOptions({}); // forces a redraw.
81 }
82
83 function clearLines() {
84 for (var i = 0; i < coeffs.length; i++) coeffs[i] = null;
85 g.updateOptions({});
86 }
87
88 function drawLines(ctx, area, layout) {
89 if (typeof(g) == 'undefined') return; // won't be set on the initial draw.
90
91 var range = g.xAxisRange();
92 for (var i = 0; i < coeffs.length; i++) {
93 if (!coeffs[i]) continue;
94 var a = coeffs[i][1];
95 var b = coeffs[i][0];
96
97 var x1 = range[0];
98 var y1 = a * x1 + b;
99 var x2 = range[1];
100 var y2 = a * x2 + b;
101
102 var p1 = g.toDomCoords(x1, y1);
103 var p2 = g.toDomCoords(x2, y2);
104
34bbe78b
DV
105 var c = new RGBColor(g.getColors()[i - 1]);
106 c.r = Math.floor(255 - 0.5 * (255 - c.r));
107 c.g = Math.floor(255 - 0.5 * (255 - c.g));
108 c.b = Math.floor(255 - 0.5 * (255 - c.b));
109 var color = c.toHex();
05a1d116
DV
110 ctx.save();
111 ctx.strokeStyle = color;
112 ctx.lineWidth = 1.0;
113 ctx.beginPath();
114 ctx.moveTo(p1[0], p1[1]);
115 ctx.lineTo(p2[0], p2[1]);
116 ctx.closePath();
117 ctx.stroke();
118 ctx.restore();
119 }
120 }
121
122 </script>
123
124 <div style="position: absolute; left: 500px; top: 150px;">
125 <input type=button style="color: green;" value="Regression (Y1)" onClick="regression(1)" />
126 <br/><br/>
127 <input type=button style="color: blue;" value="Regression (Y2)" onClick="regression(2)" />
128 <br/><br/>
129 <input type=button value="Clear Lines" onClick="clearLines()" />
130 </div>
131</body>
132</html>