# Time series rent BT

Average rent in BT city for flats of size $\displaystyle{ 76-100m^2 }$ from 2004 to 2011

### The underlying JavaScript code

var toDate = function(datestr) {
var a = datestr.split('.');
return new Date(a[2]*1,a[1]*1-1,a[0]*1);
};

var table = [
['1.1.2004', 5.35],
['1.1.2005', 5.37],
['1.1.2006', 5.48],
['1.1.2007', 5.32],
['1.1.2008', 5.30],
['1.1.2009', 5.37],
['1.1.2010', 5.59],
['1.1.2011', 5.81]   ];

var plotChartGoogleStyle = function(board, x, y, axisHeight) {
var points = [], i, p;
board.suspendUpdate();
points.push(board.create('point', [0, axisHeight], {visible:false, name:'', fixed:true, withLabel:false}));
for (i=0;i<x.length;i++) {
p = board.create('point', [x[i],y[i]],
{strokeWidth:2, strokeColor:'#ffffff',
highlightStrokeColor:'#0077cc', fillColor:'#0077cc',
highlightFillColor:'#0077cc', style:6, name:'', fixed:true});
points.push(p);
}
points.push(board.create('point', [x[x.length-1],axisHeight], {visible:false, name:'', fixed:true}));

// Filled area. We need two additional points [start,axisHeight] and [end,axisHeight]
board.create('polygon',points, {withLines:false,
fillColor:'#e6f2fa',withLabel:false});

// Curve:
var c = board.create('curve', [x,y],
{strokeWidth:3, strokeColor:'#0077cc',
highlightStrokeColor:'#0077cc'}
);
board.unsuspendUpdate();

return c;
};

var i, x = [], y = [],
birthday = toDate(table[0][0]);

var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1,10,15,-1]});
brd.create('axis',[[0,0],[1,0]]);
brd.create('axis',[[0,0],[0,1]]);

brd.highlightInfobox = function(x,y,el) {
var te = table[Math.floor(x)];
console.log(x);
this.infobox.setText('<span style="color:black;font-weight:bold">' + (te ? te[0] : (Math.floor(x) == 8 ? '1.1.2012' : '1.1.2013')) + ', ' + y + ' EUR/m^2</span>');
this.infobox.rendNode.style.border = 'groove ' + el.visProp['strokecolor'] + ' 2px';
this.infobox.rendNode.style.backgroundColor = 'white';
}

// Transform the dates into years from start
for (i=0;i<table.length;i++) {
x[i] = Math.round(((toDate(table[i][0])).getTime()-birthday.getTime())/(1000.0*60.0*60.0*24.0*365.));
y[i] = table[i][1]*1;
}