Merge branch 'master' of https://github.com/kberg/dygraphs
[dygraphs.git] / tests / linear-regression-fractions.html
CommitLineData
54425b14 1<!DOCTYPE html>
d1dfab80
DV
2<html>
3 <head>
10494b48 4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
d1dfab80
DV
5 <title>Linear Regression</title>
6 <!--[if IE]>
7 <script type="text/javascript" src="../excanvas.js"></script>
8 <![endif]-->
7e5ddc94
DV
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
d1dfab80
DV
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 = "X,Y1,Y2\n";
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 data += i + "," + i + "/120," + (i*(120-i)) + "/" + (60*60) + "\n";
35 }
36
37 g = new Dygraph(
38 document.getElementById("demodiv"),
39 data,
40 {
41 underlayCallback: drawLines,
42 drawPoints: true,
43 strokeWidth: 0.0,
44 fractions: true,
45 errorBars: true
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 < g.numRows(); i++) {
59 var x = g.getValue(i, 0);
60 if (x < range[0] || x > range[1]) continue;
61
62 var y = g.getValue(i, series);
63 if (y == null) continue;
64 if (y.length == 2) {
65 // using fractions
66 y = y[0] / y[1];
67 }
68
69 num++;
70 sum_x += x;
71 sum_y += y;
72 sum_xy += x * y;
73 sum_x2 += x * x;
74 }
75
76 var a = (sum_xy - sum_x * sum_y / num) / (sum_x2 - sum_x * sum_x / num);
77 var b = (sum_y - a * sum_x) / num;
78
79 coeffs[series] = [b, a];
80 if (typeof(console) != 'undefined') {
81 console.log("coeffs(" + series + "): [" + b + ", " + a + "]");
82 }
83
84 g.updateOptions({}); // forces a redraw.
85 }
86
87 function clearLines() {
88 for (var i = 0; i < coeffs.length; i++) coeffs[i] = null;
89 g.updateOptions({});
90 }
91
92 function drawLines(ctx, area, layout) {
93 if (typeof(g) == 'undefined') return; // won't be set on the initial draw.
94
95 var range = g.xAxisRange();
96 for (var i = 0; i < coeffs.length; i++) {
97 if (!coeffs[i]) continue;
98 var a = coeffs[i][1];
99 var b = coeffs[i][0];
100
101 var x1 = range[0];
102 var y1 = a * x1 + b;
103 var x2 = range[1];
104 var y2 = a * x2 + b;
105
106 // Scale up to percentages, rather than fractions.
107 y1 *= 100;
108 y2 *= 100;
109
110 var p1 = g.toDomCoords(x1, y1);
111 var p2 = g.toDomCoords(x2, y2);
112
113 var c = new RGBColor(g.getColors()[i - 1]);
114 c.r = Math.floor(255 - 0.5 * (255 - c.r));
115 c.g = Math.floor(255 - 0.5 * (255 - c.g));
116 c.b = Math.floor(255 - 0.5 * (255 - c.b));
117 var color = c.toHex();
118 ctx.save();
119 ctx.strokeStyle = color;
120 ctx.lineWidth = 1.0;
121 ctx.beginPath();
122 ctx.moveTo(p1[0], p1[1]);
123 ctx.lineTo(p2[0], p2[1]);
124 ctx.closePath();
125 ctx.stroke();
126 ctx.restore();
127 }
128 }
129
130 </script>
131
132 <div style="position: absolute; left: 500px; top: 150px;">
133 <input type=button style="color: green;" value="Regression (Y1)" onClick="regression(1)" />
134 <br/><br/>
135 <input type=button style="color: blue;" value="Regression (Y2)" onClick="regression(2)" />
136 <br/><br/>
137 <input type=button value="Clear Lines" onClick="clearLines()" />
138 </div>
139</body>
140</html>