Difference between revisions of "Time series II"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
Line 2: | Line 2: | ||
<jsxgraph width="600" height="400"> | <jsxgraph width="600" height="400"> | ||
+ | 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]}); | var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1,4500,50,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]]); | ||
+ | |||
+ | // 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); | ||
+ | </jsxgraph> | ||
+ | |||
+ | ===The underlying JavaScript code=== | ||
+ | |||
+ | <source lang="javascript"> | ||
var toDate = function(datestr) { | var toDate = function(datestr) { | ||
Line 24: | Line 80: | ||
]; | ]; | ||
− | var | + | var plotChartGoogleStyle = function(board, x, y, axisHeight) { |
var points = [], i, p; | var points = [], i, p; | ||
points.push(board.createElement('point', [0, axisHeight], {visible:false, name:'', fixed:true, withLabel:false})); | points.push(board.createElement('point', [0, axisHeight], {visible:false, name:'', fixed:true, withLabel:false})); | ||
Line 49: | Line 105: | ||
birthday = toDate(table[0][0]); | 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++) { | 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.floor(((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); |
+ | </source> | ||
+ | |||
+ | [[Category:Charts]] | ||
+ | [[Category:Examples]] |
Revision as of 19:19, 3 February 2010
The weight of Antonia Wassermann
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);