Time series forecasting: double exponential smoothing
From JSXGraph Wiki
The data is from the file zurich.txt from http://statistik.mathematik.uni-wuerzburg.de/timeseries/index.php.
The dashed curve are the observed values. The blue curve are the predicted values and it is computed by the following rules:
Initial values:
- [math]\displaystyle{ S_0 = y_0 }[/math]
- [math]\displaystyle{ b_0 = y_1-y_0 }[/math]
Then, the values are iteratively computed by
- [math]\displaystyle{ S_t = \alpha\cdot y_t + (1-\alpha)\cdot(S_{t-1} + b_{t-1}) }[/math]
- [math]\displaystyle{ b_t = \gamma\cdot(S_t - S_{t-1}) + (1-\gamma)\cdot b_{t-1} }[/math]
Here, the time series [math]\displaystyle{ y }[/math] is stored in the array data.
The JavaScript code
var data, datax, i, brd;
//
// zurich.txt from http://statistik.mathematik.uni-wuerzburg.de/timeseries/index.php
//
// global array data
data = "406.60 428.50 ... 521.80 524.40 526.80";
data = data.split(' ');
datax = [];
for (i = 0; i < data.length; i++) {
data[i] = parseFloat(data[i]);
datax[i] = i;
}
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2, 550, data.length+2, 380], grid: false});
brd.create('axis',[[0,0],[0,1]]);
brd.create('axis',[[0,400],[1,400]]);
brd.create('curve',[datax,data],{strokeColor:'gray',dash:2}); // plot the observed data
alpha = brd.create('slider', [[10,520],[100,520],[0,0.1,1.0]],{name:'α'});
gamma = brd.create('slider', [[10,510],[100,510],[0,0.1,1.0]],{name:'γ'});
estimate = brd.create('curve',[[0],[0]]); // The filtered curve
estimate.updateDataArray = function() {
var t,
alphalocal = alpha.Value(), // Read the slider value of alpha
gammalocal = gamma.Value(), // Read the slider value of gamma
S = data[0], // Set the inital values for S and b
b = data[1]-data[0],
Snew;
this.dataX[0] = 0;
this.dataY[0] = S;
for (t=1; t<data.length; t++) {
Snew = alphalocal*data[t] + (1-alphalocal)*(S + b);
b = gammalocal*(Snew - S) + (1-gammalocal)*b;
this.dataX[t] = t;
this.dataY[t] = Snew;
S = Snew;
}
}
brd.update(); // first computation of the filtered curve.