Time series II: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
No edit summary |
||
Line 48: | Line 48: | ||
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]]); | ||
brd.highlightInfobox = function(x,y,el) { | |||
var date = new Date().setTime(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() + '.' + date.getFullYear() + ', ' + y + 'grams</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 | // Transform the dates into days from birthday |
Revision as of 14:05, 4 February 2010
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],
['1.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]]);
// 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);