Merge branch 'master' of github.com:danvk/dygraphs
[dygraphs.git] / tests / linear-regression-addseries.html
CommitLineData
54425b14 1<!DOCTYPE html>
34bbe78b
DV
2<html>
3 <head>
10494b48 4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
34bbe78b
DV
5 <title>Linear Regression</title>
6 <!--[if IE]>
a2b2c3a1 7 <script type="text/javascript" src="../excanvas.js"></script>
34bbe78b 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
34bbe78b
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 = [];
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,
de0445fc 44 strokeWidth: 0.0,
34bbe78b
DV
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;
d1dfab80
DV
68 if (y.length == 2) {
69 // using fractions
70 y = y[0] / y[1];
71 }
34bbe78b
DV
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];
4df1af70 84 if (typeof(console) != 'undefined') {
34bbe78b
DV
85 console.log("coeffs(" + series + "): [" + b + ", " + a + "]");
86 }
87
88 updateChart();
89 }
90
91 function updateChart() {
92 // Generate a new data set with the regression lines.
93 var new_labels = [];
94 var new_colors = [];
de0445fc 95 var new_opts = {};
34bbe78b
DV
96 for (var i = 0; i < labels.length; i++) {
97 new_labels.push(labels[i]);
98 if (i) new_colors.push(orig_colors[i - 1]);
99 if (coeffs[i]) {
100 // Darken the series by 50% to generate its regression.
227b93cc
DV
101 var label = labels[i] + " Regression";
102 new_labels.push(label);
42142795 103 var c = new RGBColorParser(orig_colors[i - 1]);
34bbe78b
DV
104 c.r = Math.floor(255 - 0.5 * (255 - c.r));
105 c.g = Math.floor(255 - 0.5 * (255 - c.g));
106 c.b = Math.floor(255 - 0.5 * (255 - c.b));
107 new_colors.push(c.toHex());
227b93cc 108 new_opts[label] = {
de0445fc
DV
109 drawPoints: false,
110 strokeWidth: 1.0
111 };
34bbe78b
DV
112 }
113 }
114
115 var new_data = [];
116 for (var i = 0; i < data.length; i++) {
117 new_data.push([]);
118 for (var j = 0; j < data[i].length; j++) {
119 new_data[i].push(data[i][j]);
120 if (coeffs[j]) {
121 new_data[i].push(coeffs[j][0] + coeffs[j][1] * data[i][0]);
122 }
123 }
124 }
125
de0445fc
DV
126 new_opts.file = new_data;
127 new_opts.labels = new_labels;
128 new_opts.colors = new_colors;
129 g.updateOptions(new_opts);
34bbe78b
DV
130 }
131
132 function clearLines() {
133 for (var i = 0; i < coeffs.length; i++) coeffs[i] = null;
134 updateChart();
135 }
34bbe78b
DV
136
137 </script>
138
139 <div style="position: absolute; left: 500px; top: 150px;">
140 <input type=button style="color: green;" value="Regression (Y1)" onClick="regression(1)" />
141 <br/><br/>
142 <input type=button style="color: blue;" value="Regression (Y2)" onClick="regression(2)" />
143 <br/><br/>
144 <input type=button value="Clear Lines" onClick="clearLines()" />
145 </div>
146</body>
147</html>