Difference between revisions of "Time series"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) (New page: <html> <form> <textarea id="inputData"> 2009-01-04 : 126,5 2009-01-19 : 125,2 2009-01-20 : 125,0 2009-02-28 : 121,5 </textarea> </form> </html> <jsxgraph width="700" height="400"> brd...) |
|||
(31 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
+ | ====Input data==== | ||
<html> | <html> | ||
<form> | <form> | ||
− | <textarea id="inputData"> | + | <textarea id="inputData" rows=4> |
2009-01-04 : 126,5 | 2009-01-04 : 126,5 | ||
2009-01-19 : 125,2 | 2009-01-19 : 125,2 | ||
Line 9: | Line 10: | ||
</form> | </form> | ||
</html> | </html> | ||
− | + | ===Simple style=== | |
<jsxgraph width="700" height="400"> | <jsxgraph width="700" height="400"> | ||
− | brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, | + | brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox: [-6, 150, 64, -50]}); |
− | |||
− | var inputString = document.getElementById('inputData').value; | + | var inputString = document.getElementById('inputData').value; // Read the data as string |
inputString = inputString.replace(/^\s+/, '').replace(/\s+$/, ''); // Remove leading and trailing whitespace | inputString = inputString.replace(/^\s+/, '').replace(/\s+$/, ''); // Remove leading and trailing whitespace | ||
var lines=inputString.split('\n'); // Split into lines | var lines=inputString.split('\n'); // Split into lines | ||
Line 30: | Line 30: | ||
} | } | ||
− | var plot = brd. | + | var plot = brd.create('curve', [x,y], {strokeColor:'red'}); |
</jsxgraph> | </jsxgraph> | ||
+ | ====JavaScript code==== | ||
+ | <source lang="javascript"> | ||
+ | brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox: [-6, 150, 64, -50]}); | ||
+ | |||
+ | var inputString = document.getElementById('inputData').value; // Read the data as string | ||
+ | inputString = inputString.replace(/^\s+/, '').replace(/\s+$/, ''); // Remove leading and trailing whitespace | ||
+ | var lines=inputString.split('\n'); // Split into lines | ||
+ | var x = []; | ||
+ | var y = []; | ||
+ | var startDate; | ||
+ | for (var i=0;i<lines.length;i++) { | ||
+ | var c = lines[i].split(' : '); | ||
+ | var d = c[0].split('-'); | ||
+ | var v = parseFloat(c[1].replace(/,+/,'.')); // Change 126,5 to 126.5 | ||
+ | var date = new Date(d[0],d[1],d[2]); // Split the date into Year, Month, Day | ||
+ | if (i==0) { startDate = new Date(d[0],d[1],d[2]); } // Keep the first date in memory | ||
+ | x[i] = (date.getTime()-startDate.getTime())/ ( 1000.0*60.0*60.0*24.0 ); // The x coordinate of a value is the number of days from the first entry | ||
+ | y[i] = v; | ||
+ | |||
+ | } | ||
+ | var plot = brd.create('curve', [x,y], {strokeColor:'red'}); | ||
+ | </source> | ||
+ | |||
+ | ===Time series - Google style=== | ||
+ | <jsxgraph width="700" height="400" box="jxgbox2"> | ||
+ | brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-5,130,60,80]}); | ||
+ | var xax = brd2.create('axis',[[0,85],[1,85]]); | ||
+ | var yax = brd2.create('axis',[[0,0],[0,1]]); | ||
+ | |||
+ | inputString = document.getElementById('inputData').value; // Read the data as string | ||
+ | inputString = inputString.replace(/^\s+/, '').replace(/\s+$/, ''); // Remove leading and trailing whitespace | ||
+ | var lines=inputString.split('\n'); // Split into lines | ||
+ | var p, x1, y1; | ||
+ | var x = []; | ||
+ | var y = []; | ||
+ | var points = []; | ||
+ | |||
+ | points.push(brd2.create('point', [0,85], {visible:false, name:'', fixed:true})); | ||
+ | var startDate; | ||
+ | for (var i=0;i<lines.length;i++) { | ||
+ | var c = lines[i].split(' : '); | ||
+ | var d = c[0].split('-'); | ||
+ | var v = parseFloat(c[1].replace(/,+/,'.')); // Change 126,5 to 126.5 | ||
+ | var date = new Date(d[0],d[1],d[2]); // Split the date into Year, Month, Day | ||
+ | if (i==0) { startDate = new Date(d[0],d[1],d[2]); } // Keep the first date in memory | ||
+ | x1 = (date.getTime()-startDate.getTime())/ ( 1000.0*60.0*60.0*24.0 ); // The x coordinate of a value is the number of days from the first entry | ||
+ | y1 = v; | ||
+ | p = brd2.create('point', [x1,y1], | ||
+ | {strokeWidth:2, strokeColor:'#ffffff', | ||
+ | highlightStrokeColor:'#0077cc', fillColor:'#0077cc', | ||
+ | highlightFillColor:'#0077cc', size:4, name:'', fixed:true}); | ||
+ | points.push(p); | ||
+ | x.push(x1); | ||
+ | y.push(y1); | ||
+ | |||
+ | } | ||
+ | points.push(brd2.create('point', [x1,85], {visible:false, name:'', fixed:true})); | ||
+ | |||
+ | // Filled area. We need two additional points [start,85] and [end,85] | ||
+ | brd2.create('polygon',points, {withLines:false,fillColor:'#e6f2fa',withLabel:false}); | ||
+ | |||
+ | // Curve: | ||
+ | brd2.create('curve', [x,y], | ||
+ | {strokeWidth:3, strokeColor:'#0077cc', | ||
+ | highlightStrokeColor:'#0077cc'} | ||
+ | ); | ||
+ | </jsxgraph> | ||
+ | ====JavaScript code==== | ||
+ | <source lang="javascript"> | ||
+ | brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-5,130,60,80]}); | ||
+ | var xax = brd2.create('axis',[[0,85],[1,85]]); | ||
+ | var yax = brd2.create('axis',[[0,0],[0,1]]); | ||
+ | |||
+ | inputString = document.getElementById('inputData').value; // Read the data as string | ||
+ | inputString = inputString.replace(/^\s+/, '').replace(/\s+$/, ''); // Remove leading and trailing whitespace | ||
+ | var lines=inputString.split('\n'); // Split into lines | ||
+ | var p, x1, y1; | ||
+ | var x = []; | ||
+ | var y = []; | ||
+ | var points = []; | ||
+ | |||
+ | points.push(brd2.create('point', [0,85], {visible:false, name:'', fixed:true})); | ||
+ | var startDate; | ||
+ | for (var i=0;i<lines.length;i++) { | ||
+ | var c = lines[i].split(' : '); | ||
+ | var d = c[0].split('-'); | ||
+ | var v = parseFloat(c[1].replace(/,+/,'.')); // Change 126,5 to 126.5 | ||
+ | var date = new Date(d[0],d[1],d[2]); // Split the date into Year, Month, Day | ||
+ | if (i==0) { startDate = new Date(d[0],d[1],d[2]); } // Keep the first date in memory | ||
+ | x1 = (date.getTime()-startDate.getTime())/ ( 1000.0*60.0*60.0*24.0 ); // The x coordinate of a value is the number of days from the first entry | ||
+ | y1 = v; | ||
+ | p = brd2.create('point', [x1,y1], | ||
+ | {strokeWidth:2, strokeColor:'#ffffff', | ||
+ | highlightStrokeColor:'#0077cc', fillColor:'#0077cc', | ||
+ | highlightFillColor:'#0077cc', size:4, name:'', fixed:true}); | ||
+ | points.push(p); | ||
+ | x.push(x1); | ||
+ | y.push(y1); | ||
+ | |||
+ | } | ||
+ | points.push(brd2.create('point', [x1,85], {visible:false, name:'', fixed:true})); | ||
+ | |||
+ | // Filled area. We need two additional points [start,0] and [end,0] | ||
+ | brd2.create('polygon',points, {withLines:false,fillColor:'#e6f2fa',withLabel:false}); | ||
+ | |||
+ | // Curve: | ||
+ | brd2.create('curve', [x,y], | ||
+ | {strokeWidth:3, strokeColor:'#0077cc', | ||
+ | highlightStrokeColor:'#0077cc'} | ||
+ | ); | ||
+ | </source> | ||
+ | |||
+ | [[Category:Examples]] |
Latest revision as of 08:35, 9 June 2011
Contents
Input data
Simple style
JavaScript code
brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox: [-6, 150, 64, -50]});
var inputString = document.getElementById('inputData').value; // Read the data as string
inputString = inputString.replace(/^\s+/, '').replace(/\s+$/, ''); // Remove leading and trailing whitespace
var lines=inputString.split('\n'); // Split into lines
var x = [];
var y = [];
var startDate;
for (var i=0;i<lines.length;i++) {
var c = lines[i].split(' : ');
var d = c[0].split('-');
var v = parseFloat(c[1].replace(/,+/,'.')); // Change 126,5 to 126.5
var date = new Date(d[0],d[1],d[2]); // Split the date into Year, Month, Day
if (i==0) { startDate = new Date(d[0],d[1],d[2]); } // Keep the first date in memory
x[i] = (date.getTime()-startDate.getTime())/ ( 1000.0*60.0*60.0*24.0 ); // The x coordinate of a value is the number of days from the first entry
y[i] = v;
}
var plot = brd.create('curve', [x,y], {strokeColor:'red'});
Time series - Google style
JavaScript code
brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-5,130,60,80]});
var xax = brd2.create('axis',[[0,85],[1,85]]);
var yax = brd2.create('axis',[[0,0],[0,1]]);
inputString = document.getElementById('inputData').value; // Read the data as string
inputString = inputString.replace(/^\s+/, '').replace(/\s+$/, ''); // Remove leading and trailing whitespace
var lines=inputString.split('\n'); // Split into lines
var p, x1, y1;
var x = [];
var y = [];
var points = [];
points.push(brd2.create('point', [0,85], {visible:false, name:'', fixed:true}));
var startDate;
for (var i=0;i<lines.length;i++) {
var c = lines[i].split(' : ');
var d = c[0].split('-');
var v = parseFloat(c[1].replace(/,+/,'.')); // Change 126,5 to 126.5
var date = new Date(d[0],d[1],d[2]); // Split the date into Year, Month, Day
if (i==0) { startDate = new Date(d[0],d[1],d[2]); } // Keep the first date in memory
x1 = (date.getTime()-startDate.getTime())/ ( 1000.0*60.0*60.0*24.0 ); // The x coordinate of a value is the number of days from the first entry
y1 = v;
p = brd2.create('point', [x1,y1],
{strokeWidth:2, strokeColor:'#ffffff',
highlightStrokeColor:'#0077cc', fillColor:'#0077cc',
highlightFillColor:'#0077cc', size:4, name:'', fixed:true});
points.push(p);
x.push(x1);
y.push(y1);
}
points.push(brd2.create('point', [x1,85], {visible:false, name:'', fixed:true}));
// Filled area. We need two additional points [start,0] and [end,0]
brd2.create('polygon',points, {withLines:false,fillColor:'#e6f2fa',withLabel:false});
// Curve:
brd2.create('curve', [x,y],
{strokeWidth:3, strokeColor:'#0077cc',
highlightStrokeColor:'#0077cc'}
);