Difference between revisions of "Time series rent BT"

From JSXGraph Wiki
Jump to: navigation, 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:
−
The body weight of Antonia Wassermann (days vs. grams):
+
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) {
−
console.log(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 date = new Date(x*1000.0*60.0*60.0*24.0 + birthday.getTime());
+
   var te = table[Math.floor(x)];
−
   this.infobox.setText('<span style="color:black;font-weight:bold">' + date.getDate() + '.' + (date.getMonth()+1) + '.' + date.getFullYear() + ', ' + y + ' EUR/m^2</span>');
+
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});
Retrieved from "http://jsxgraph.uni-bayreuth.de/wiki/index.php?title=Time_series_rent_BT&oldid=5749"