Difference between revisions of "Time series rent BT"
From JSXGraph Wiki
Jump to navigationJump to search (Created page with "The body weight of Antonia Wassermann (days vs. grams): <jsxgraph width="600" height="400"> var toDate = function(datestr) { var a = datestr.split('.'); return n...") |
|||
Line 1: | Line 1: | ||
− | + | Average rent in BT city for flats of size <math>76-100m^2</math> from 2004 to 2011 | |
<jsxgraph width="600" height="400"> | <jsxgraph width="600" height="400"> | ||
Line 18: | Line 18: | ||
var plotChartGoogleStyle = function(board, x, y, axisHeight) { | var plotChartGoogleStyle = function(board, x, y, axisHeight) { | ||
− | |||
var points = [], i, p; | var points = [], i, p; | ||
board.suspendUpdate(); | board.suspendUpdate(); | ||
Line 36: | Line 35: | ||
// Curve: | // Curve: | ||
− | board.create('curve', [x,y], | + | var c = board.create('curve', [x,y], |
{strokeWidth:3, strokeColor:'#0077cc', | {strokeWidth:3, strokeColor:'#0077cc', | ||
highlightStrokeColor:'#0077cc'} | highlightStrokeColor:'#0077cc'} | ||
); | ); | ||
board.unsuspendUpdate(); | board.unsuspendUpdate(); | ||
+ | |||
+ | return c; | ||
}; | }; | ||
Line 51: | Line 52: | ||
brd.highlightInfobox = function(x,y,el) { | brd.highlightInfobox = function(x,y,el) { | ||
− | var | + | var te = table[Math.floor(x)]; |
− | this.infobox.setText('<span style="color:black;font-weight:bold">' + | + | 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.border = 'groove ' + el.visProp['strokecolor'] + ' 2px'; | ||
this.infobox.rendNode.style.padding = '5px'; | this.infobox.rendNode.style.padding = '5px'; | ||
Line 64: | Line 66: | ||
} | } | ||
− | plotChartGoogleStyle(brd,x,y,0); | + | var ts = plotChartGoogleStyle(brd,x,y,0); |
var reg = brd.create('functiongraph',[JXG.Math.Numerics.regressionPolynomial(2,x,y)],{strokeColor:'black',dash:3}); | var reg = brd.create('functiongraph',[JXG.Math.Numerics.regressionPolynomial(2,x,y)],{strokeColor:'black',dash:3}); | ||
+ | |||
+ | var line2012 = brd.create('line', [[8, 0], [8, 2]], {strokeColor: 'black', strokeWidth: 2, withLabel: false, visible: false}); | ||
+ | var indicator2012 = brd.create('intersection', [line2012, ts], {withLabel: false, color: 'black', size: 3}); | ||
+ | |||
+ | var line2013 = brd.create('line', [[9, 0], [9, 2]], {strokeColor: 'black', strokeWidth: 2, withLabel: false, visible: false}); | ||
+ | var indicator2013 = brd.create('intersection', [line2013, ts], {withLabel: false, color: 'black', size: 3}); | ||
+ | |||
</jsxgraph> | </jsxgraph> | ||
Line 72: | Line 81: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
+ | 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.createElement('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.padding = '5px'; | ||
+ | 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; | ||
+ | } | ||
+ | |||
+ | var ts = plotChartGoogleStyle(brd,x,y,0); | ||
+ | |||
+ | var reg = brd.create('functiongraph',[JXG.Math.Numerics.regressionPolynomial(2,x,y)],{strokeColor:'black',dash:3}); | ||
+ | |||
+ | var line2012 = brd.create('line', [[8, 0], [8, 2]], {strokeColor: 'black', strokeWidth: 2, withLabel: false, visible: false}); | ||
+ | var indicator2012 = brd.create('intersection', [line2012, ts], {withLabel: false, color: 'black', size: 3}); | ||
+ | var line2013 = brd.create('line', [[9, 0], [9, 2]], {strokeColor: 'black', strokeWidth: 2, withLabel: false, visible: false}); | ||
+ | var indicator2013 = brd.create('intersection', [line2013, ts], {withLabel: false, color: 'black', size: 3}); | ||
</source> | </source> | ||
[[Category:Charts]] | [[Category:Charts]] | ||
[[Category:Examples]] | [[Category:Examples]] |
Revision as of 00:09, 15 August 2012
Average rent in BT city for flats of size [math]76-100m^2[/math] 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.createElement('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.padding = '5px';
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;
}
var ts = plotChartGoogleStyle(brd,x,y,0);
var reg = brd.create('functiongraph',[JXG.Math.Numerics.regressionPolynomial(2,x,y)],{strokeColor:'black',dash:3});
var line2012 = brd.create('line', [[8, 0], [8, 2]], {strokeColor: 'black', strokeWidth: 2, withLabel: false, visible: false});
var indicator2012 = brd.create('intersection', [line2012, ts], {withLabel: false, color: 'black', size: 3});
var line2013 = brd.create('line', [[9, 0], [9, 2]], {strokeColor: 'black', strokeWidth: 2, withLabel: false, visible: false});
var indicator2013 = brd.create('intersection', [line2013, ts], {withLabel: false, color: 'black', size: 3});