Set this for drawCallback
[dygraphs.git] / tests / linear-regression.html
CommitLineData
54425b14 1<!DOCTYPE html>
05a1d116
DV
2<html>
3 <head>
4 <title>Linear Regression</title>
7e5ddc94
DV
5 <!--
6 For production (minified) code, use:
7 <script type="text/javascript" src="dygraph-combined.js"></script>
8 -->
9 <script type="text/javascript" src="../dygraph-dev.js"></script>
10
05a1d116
DV
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">
176c94a4 25 var data = [];
05a1d116 26 for (var i = 0; i < 120; i++) {
176c94a4
DV
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)]);
05a1d116
DV
30 }
31
32 g = new Dygraph(
33 document.getElementById("demodiv"),
34 data,
35 {
176c94a4 36 labels: ['X', 'Y1', 'Y2'],
05a1d116 37 underlayCallback: drawLines,
de0445fc 38 drawPoints: true,
176c94a4 39 strokeWidth: 0.0
05a1d116
DV
40 }
41 );
42
43 // coefficients of regression for each series.
44 // if coeffs = [ null, [1, 2], null ] then we draw a regression for series 1
45 // only. The regression line is y = 1 + 2 * x.
46 var coeffs = [ null, null, null ];
47 function regression(series) {
48 // Only run the regression over visible points.
49 var range = g.xAxisRange();
50
51 var sum_xy = 0.0, sum_x = 0.0, sum_y = 0.0, sum_x2 = 0.0, num = 0;
52 for (var i = 0; i < g.numRows(); i++) {
53 var x = g.getValue(i, 0);
54 if (x < range[0] || x > range[1]) continue;
55
56 var y = g.getValue(i, series);
57 if (y == null) continue;
c5a37449
DV
58 if (y.length == 2) {
59 // using fractions
60 y = y[0] / y[1];
61 }
05a1d116
DV
62
63 num++;
64 sum_x += x;
65 sum_y += y;
66 sum_xy += x * y;
67 sum_x2 += x * x;
68 }
69
70 var a = (sum_xy - sum_x * sum_y / num) / (sum_x2 - sum_x * sum_x / num);
71 var b = (sum_y - a * sum_x) / num;
72
73 coeffs[series] = [b, a];
4df1af70 74 if (typeof(console) != 'undefined') {
2a07b0ad
DV
75 console.log("coeffs(" + series + "): [" + b + ", " + a + "]");
76 }
05a1d116
DV
77
78 g.updateOptions({}); // forces a redraw.
79 }
80
81 function clearLines() {
82 for (var i = 0; i < coeffs.length; i++) coeffs[i] = null;
83 g.updateOptions({});
84 }
85
0a171c09
DV
86 function toHex(rgb) {
87 return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
88 }
89
05a1d116
DV
90 function drawLines(ctx, area, layout) {
91 if (typeof(g) == 'undefined') return; // won't be set on the initial draw.
92
93 var range = g.xAxisRange();
94 for (var i = 0; i < coeffs.length; i++) {
95 if (!coeffs[i]) continue;
96 var a = coeffs[i][1];
97 var b = coeffs[i][0];
98
99 var x1 = range[0];
100 var y1 = a * x1 + b;
101 var x2 = range[1];
102 var y2 = a * x2 + b;
103
104 var p1 = g.toDomCoords(x1, y1);
105 var p2 = g.toDomCoords(x2, y2);
106
0a171c09 107 var c = Dygraph.toRGB_(g.getColors()[i - 1]);
34bbe78b
DV
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));
0a171c09 111 var color = toHex(c);
05a1d116
DV
112 ctx.save();
113 ctx.strokeStyle = color;
114 ctx.lineWidth = 1.0;
115 ctx.beginPath();
116 ctx.moveTo(p1[0], p1[1]);
117 ctx.lineTo(p2[0], p2[1]);
118 ctx.closePath();
119 ctx.stroke();
120 ctx.restore();
121 }
122 }
123
124 </script>
125
126 <div style="position: absolute; left: 500px; top: 150px;">
127 <input type=button style="color: green;" value="Regression (Y1)" onClick="regression(1)" />
128 <br/><br/>
129 <input type=button style="color: blue;" value="Regression (Y2)" onClick="regression(2)" />
130 <br/><br/>
131 <input type=button value="Clear Lines" onClick="clearLines()" />
132 </div>
133</body>
134</html>