0a93b8f85bf5c590c41536454338e0b0de8797a7
1 // Use this as a template for new Gallery entries.
5 name
: 'Linear Regressions',
6 title
: 'Linear Regression Demo',
7 setup
: function(parent
) {
9 "<p>Click the buttons to generate linear regressions over either data "+
10 "series. If you zoom in and then click the regression button, the regression "+
11 "will only be run over visible points. Zoom back out to see what the local "+
12 "regression looks like over the full data.</p> "+
13 "<div id='demodiv' style='width: 480px; height: 320px;'></div>" +
14 "<div style='text-align:center; width: 480px'>" +
15 "<button style='color: green;' id='ry1'>Regression (Y1)</button> " +
16 "<button style='color: blue;' id='ry2'>Regression (Y2)</button> " +
17 "<button id='clear'>Clear Lines</button>" +
21 document
.getElementById("ry1").onclick
= function() { regression(1) };
22 document
.getElementById("ry2").onclick
= function() { regression(2) };
23 document
.getElementById("clear").onclick
= function() { clearLines() };
26 for (var i
= 0; i
< 120; 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)]);
32 // coefficients of regression for each series.
33 // if coeffs = [ null, [1, 2], null ] then we draw a regression for series 1
34 // only. The regression line is y = 1 + 2 * x.
35 var coeffs
= [ null, null, null ];
36 function regression(series
) {
37 // Only run the regression over visible points.
38 var range
= g
.xAxisRange();
40 var sum_xy
= 0.0, sum_x
= 0.0, sum_y
= 0.0, sum_x2
= 0.0, num
= 0;
41 for (var i
= 0; i
< g
.numRows(); i
++) {
42 var x
= g
.getValue(i
, 0);
43 if (x
< range
[0] || x
> range
[1]) continue;
45 var y
= g
.getValue(i
, series
);
46 if (y
== null) continue;
59 var a
= (sum_xy
- sum_x
* sum_y
/ num) / (sum_x2
- sum_x
* sum_x
/ num
);
60 var b
= (sum_y
- a
* sum_x
) / num
;
62 coeffs
[series
] = [b
, a
];
63 if (typeof(console
) != 'undefined') {
64 console
.log("coeffs(" + series
+ "): [" + b
+ ", " + a
+ "]");
67 g
.updateOptions({}); // forces a redraw.
70 function clearLines() {
71 for (var i
= 0; i
< coeffs
.length
; i
++) coeffs
[i
] = null;
75 function drawLines(ctx
, area
, layout
) {
76 if (typeof(g
) == 'undefined') return; // won't be set on the initial draw.
78 var range
= g
.xAxisRange();
79 for (var i
= 0; i
< coeffs
.length
; i
++) {
80 if (!coeffs
[i
]) continue;
89 var p1
= g
.toDomCoords(x1
, y1
);
90 var p2
= g
.toDomCoords(x2
, y2
);
92 var c
= new RGBColor(g
.getColors()[i
- 1]);
93 c
.r
= Math
.floor(255 - 0.5 * (255 - c
.r
));
94 c
.g
= Math
.floor(255 - 0.5 * (255 - c
.g
));
95 c
.b
= Math
.floor(255 - 0.5 * (255 - c
.b
));
96 var color
= c
.toHex();
98 ctx
.strokeStyle
= color
;
101 ctx
.moveTo(p1
[0], p1
[1]);
102 ctx
.lineTo(p2
[0], p2
[1]);
110 document
.getElementById("demodiv"),
113 labels
: ['X', 'Y1', 'Y2'],
114 underlayCallback
: drawLines
,