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