Difference between revisions of "Time series II"

From JSXGraph Wiki
Jump to navigationJump to search
 
(26 intermediate revisions by the same user not shown)
Line 1: Line 1:
The body weight of Antonia Wassermann (gram vs. days):
+
The body weight of Antonia W. (days vs. grams):
  
 
<jsxgraph width="600" height="400">
 
<jsxgraph width="600" height="400">
Line 20: Line 20:
 
   ['7.2.2010',4000],
 
   ['7.2.2010',4000],
 
   ['11.2.2010',4020],
 
   ['11.2.2010',4020],
   ['13.2.2010',4240]
+
   ['13.2.2010',4240],
 +
  ['18.2.2010',4430],
 +
  ['21.2.2010',4480],
 +
  ['25.2.2010',4610],
 +
  ['28.2.2010',4650],
 +
  ['5.3.2010',4890],
 +
  ['13.3.2010',5000],
 +
  ['17.3.2010',5110],
 +
  ['21.3.2010',5260],
 +
  ['27.3.2010',5470],
 +
  ['1.4.2010',5450],
 +
  ['9.4.2010',5550],
 +
  ['19.4.2010',5680],
 +
  ['25.4.2010',5890],
 +
  ['28.4.2010',5825],
 +
  ['1.5.2010',5890],
 +
  ['9.5.2010',6020],
 +
  ['15.5.2010',6170]
 
   ];
 
   ];
  
Line 26: Line 43:
 
     var points = [], i, p;
 
     var points = [], i, p;
 
     board.suspendUpdate();
 
     board.suspendUpdate();
     points.push(board.createElement('point', [0, axisHeight], {visible:false, name:'', fixed:true, withLabel:false}));  
+
     points.push(board.create('point', [0, axisHeight], {visible:false, name:'', fixed:true, withLabel:false}));  
 
     for (i=0;i<x.length;i++) {  
 
     for (i=0;i<x.length;i++) {  
 
         p = board.create('point', [x[i],y[i]],  
 
         p = board.create('point', [x[i],y[i]],  
Line 37: Line 54:
 
   
 
   
 
     // Filled area. We need two additional points [start,axisHeight] and [end,axisHeight]
 
     // Filled area. We need two additional points [start,axisHeight] and [end,axisHeight]
     board.create('polygon',points, {withLines:false,fillColor:'#e6f2fa',withLabel:false});
+
     board.create('polygon',points, {withLines:false,
 +
                  fillColor:'#e6f2fa',withLabel:false});
 
   
 
   
 
     // Curve:
 
     // Curve:
Line 50: Line 68:
 
     birthday = toDate(table[0][0]);
 
     birthday = toDate(table[0][0]);
  
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1,4500,50,2500]});
+
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1,7000,160,2500]});
 
brd.create('axis',[[0,2700],[1,2700]]);
 
brd.create('axis',[[0,2700],[1,2700]]);
 
brd.create('axis',[[0,0],[0,1]]);
 
brd.create('axis',[[0,0],[0,1]]);
Line 57: Line 75:
 
   var date = new Date(x*1000.0*60.0*60.0*24.0 + birthday.getTime());
 
   var date = new Date(x*1000.0*60.0*60.0*24.0 + birthday.getTime());
 
   this.infobox.setText('<span style="color:black;font-weight:bold">' + date.getDate() + '.' + (date.getMonth()+1) + '.' + date.getFullYear() + ', ' + y + ' g</span>');
 
   this.infobox.setText('<span style="color:black;font-weight:bold">' + date.getDate() + '.' + (date.getMonth()+1) + '.' + date.getFullYear() + ', ' + y + ' g</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';
 
   this.infobox.rendNode.style.backgroundColor = 'white';
 
   this.infobox.rendNode.style.backgroundColor = 'white';
Line 64: Line 82:
 
// Transform the dates into days from birthday
 
// Transform the dates into days from birthday
 
for (i=0;i<table.length;i++) {
 
for (i=0;i<table.length;i++) {
     x[i] = Math.floor(((toDate(table[i][0])).getTime()-birthday.getTime())/(1000.0*60.0*60.0*24.0));
+
     x[i] = Math.round(((toDate(table[i][0])).getTime()-birthday.getTime())/(1000.0*60.0*60.0*24.0));
 
     y[i] = table[i][1]*1;
 
     y[i] = table[i][1]*1;
 
}
 
}
Line 70: Line 88:
 
plotChartGoogleStyle(brd,x,y,2700);
 
plotChartGoogleStyle(brd,x,y,2700);
  
var reg = brd.createElement('functiongraph',[JXG.Math.Numerics.regressionPolynomial(1,x,y)],{strokeColor:'black',dash:3});     
+
var reg = brd.create('functiongraph',[JXG.Math.Numerics.regressionPolynomial(2,x,y)],{strokeColor:'black',dash:3});     
 
</jsxgraph>
 
</jsxgraph>
  
Line 95: Line 113:
 
   ['7.2.2010',4000],
 
   ['7.2.2010',4000],
 
   ['11.2.2010',4020],
 
   ['11.2.2010',4020],
   ['13.2.2010',4240]
+
   ['13.2.2010',4240],
 +
  ['18.2.2010',4430],
 +
  ['21.2.2010',4480],
 +
  ['25.2.2010',4610],
 +
  ['28.2.2010',4650],
 +
  ['5.3.2010',4890],
 +
  ['13.3.2010',5000],
 +
  ['17.3.2010',5110],
 +
  ['21.3.2010',5260],
 +
  ['27.3.2010',5470],
 +
  ['1.4.2010',5450],
 +
  ['9.4.2010',5550],
 +
  ['19.4.2010',5680],
 +
  ['25.4.2010',5890],
 +
  ['28.4.2010',5825],
 +
  ['1.5.2010',5890],
 +
  ['9.5.2010',6020],
 +
  ['15.5.2010',6170]
 
   ];
 
   ];
  
Line 101: Line 136:
 
     var points = [], i, p;
 
     var points = [], i, p;
 
     board.suspendUpdate();
 
     board.suspendUpdate();
     points.push(board.createElement('point', [0, axisHeight], {visible:false, name:'', fixed:true, withLabel:false}));  
+
     points.push(board.create('point', [0, axisHeight], {visible:false, name:'', fixed:true, withLabel:false}));  
 
     for (i=0;i<x.length;i++) {  
 
     for (i=0;i<x.length;i++) {  
 
         p = board.create('point', [x[i],y[i]],  
 
         p = board.create('point', [x[i],y[i]],  
Line 125: Line 160:
 
     birthday = toDate(table[0][0]);
 
     birthday = toDate(table[0][0]);
  
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1,4500,50,2500]});
+
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1,7000,160,2500]});
 
brd.create('axis',[[0,2700],[1,2700]]);
 
brd.create('axis',[[0,2700],[1,2700]]);
 
brd.create('axis',[[0,0],[0,1]]);
 
brd.create('axis',[[0,0],[0,1]]);
Line 132: Line 167:
 
   var date = new Date(x*1000.0*60.0*60.0*24.0 + birthday.getTime());
 
   var date = new Date(x*1000.0*60.0*60.0*24.0 + birthday.getTime());
 
   this.infobox.setText('<span style="color:black;font-weight:bold">' + date.getDate() + '.' + (date.getMonth()+1) + '.' + date.getFullYear() + ', ' + y + ' g</span>');
 
   this.infobox.setText('<span style="color:black;font-weight:bold">' + date.getDate() + '.' + (date.getMonth()+1) + '.' + date.getFullYear() + ', ' + y + ' g</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';
 
   this.infobox.rendNode.style.backgroundColor = 'white';
 
   this.infobox.rendNode.style.backgroundColor = 'white';
Line 139: Line 174:
 
// Transform the dates into days from birthday
 
// Transform the dates into days from birthday
 
for (i=0;i<table.length;i++) {
 
for (i=0;i<table.length;i++) {
     x[i] = Math.floor(((toDate(table[i][0])).getTime()-birthday.getTime())/(1000.0*60.0*60.0*24.0));
+
     x[i] = Math.round(((toDate(table[i][0])).getTime()-birthday.getTime())/(1000.0*60.0*60.0*24.0));
 
     y[i] = table[i][1]*1;
 
     y[i] = table[i][1]*1;
 
}
 
}
  
 
plotChartGoogleStyle(brd,x,y,2700);
 
plotChartGoogleStyle(brd,x,y,2700);
var reg = brd.createElement('functiongraph',[JXG.Math.Numerics.regressionPolynomial(1,x,y)],{strokeColor:'black',dash:3});     
+
var reg = brd.create('functiongraph',[JXG.Math.Numerics.regressionPolynomial(2,x,y)],{strokeColor:'black',dash:3});     
 
</source>
 
</source>
  
 
[[Category:Charts]]
 
[[Category:Charts]]
 
[[Category:Examples]]
 
[[Category:Examples]]

Latest revision as of 15:29, 3 March 2021

The body weight of Antonia W. (days vs. grams):

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 = [ 
   ['9.1.2010',3250],
   ['12.1.2010',2950],
   ['15.1.2010',3200],
   ['17.1.2010',3200],
   ['18.1.2010',3210],
   ['20.1.2010',3250],
   ['23.1.2010',3400],
   ['27.1.2010',3590],
   ['31.1.2010',3750],
   ['3.2.2010',3810],
   ['7.2.2010',4000],
   ['11.2.2010',4020],
   ['13.2.2010',4240],
   ['18.2.2010',4430],
   ['21.2.2010',4480],
   ['25.2.2010',4610],
   ['28.2.2010',4650],
   ['5.3.2010',4890],
   ['13.3.2010',5000],
   ['17.3.2010',5110],
   ['21.3.2010',5260],
   ['27.3.2010',5470],
   ['1.4.2010',5450],
   ['9.4.2010',5550],
   ['19.4.2010',5680],
   ['25.4.2010',5890],
   ['28.4.2010',5825],
   ['1.5.2010',5890],
   ['9.5.2010',6020],
   ['15.5.2010',6170]
   ];

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:
    board.create('curve', [x,y], 
                 {strokeWidth:3, strokeColor:'#0077cc', 
                  highlightStrokeColor:'#0077cc'}
               ); 
    board.unsuspendUpdate();
};

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

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

brd.highlightInfobox = function(x,y,el) {
  var date = new Date(x*1000.0*60.0*60.0*24.0 + birthday.getTime());
  this.infobox.setText('<span style="color:black;font-weight:bold">' + date.getDate() + '.' + (date.getMonth()+1) + '.' + date.getFullYear() + ', ' + y + ' g</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 days from birthday
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));
    y[i] = table[i][1]*1;
}

plotChartGoogleStyle(brd,x,y,2700);
var reg = brd.create('functiongraph',[JXG.Math.Numerics.regressionPolynomial(2,x,y)],{strokeColor:'black',dash:3});