Time series II
From JSXGraph Wiki
The body weight of Antonia Wassermann (gram vs. days):
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]
];
var plotChartGoogleStyle = function(board, x, y, axisHeight) {
var points = [], i, p;
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:
board.create('curve', [x,y],
{strokeWidth:3, strokeColor:'#0077cc',
highlightStrokeColor:'#0077cc'}
);
};
var i, x = [], y = [],
birthday = toDate(table[0][0]);
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1,4500,50,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.floor(((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);