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...) |
A WASSERMANN (talk | contribs) |
||
| Line 11: | Line 11: | ||
<jsxgraph width="700" height="400"> | <jsxgraph width="700" height="400"> | ||
| − | brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, originX: 60, originY: 300, unitX: | + | brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, originX: 60, originY: 300, unitX: 10, unitY: 2}); |
| − | + | var inputString = document.getElementById('inputData').value; // Read the data as string | |
| − | var inputString = document.getElementById('inputData').value; | ||
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 29: | ||
} | } | ||
| − | var plot = brd.createElement('curve', [x,y]); | + | var plot = brd.createElement('curve', [x,y], {strokeColor:'red'}); |
| + | </jsxgraph> | ||
| + | |||
| + | |||
| + | ===Time series - Google style=== | ||
| + | <jsxgraph width="700" height="400" box="jxgbox2"> | ||
| + | brd2 = JXG.JSXGraph.initBoard('jxgbox2', {axis:true, originX: 60, originY: 300, unitX: 10, unitY: 2}); | ||
| + | |||
| + | 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.createElement('point', [0,0], {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 | ||
| + | x = (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 = v; | ||
| + | p = brd2.createElement('point', [x,y], | ||
| + | {strokeWidth:2, strokeColor:'#ffffff', | ||
| + | highlightStrokeColor:'#0077cc', fillColor:'#0077cc', | ||
| + | highlightFillColor:'#0077cc', style:6, name:'', fixed:true} | ||
| + | points.push(p); | ||
| + | x.push(x1); | ||
| + | y.push(y1); | ||
| + | |||
| + | } | ||
| + | points.push(brd2.createElement('point', [y1,0], {visible:false, name:'', fixed:true})); | ||
| + | |||
| + | // Filled area. We need two additional points [start,0] and [end,0] | ||
| + | brd2.createElement('polygon',points, {withLines:false,fillColor:'#e6f2fa'}); | ||
| + | |||
| + | // Curve: | ||
| + | brd2.createElement('curve', [x,y], | ||
| + | {strokeWidth:3, strokeColor:'#0077cc', | ||
| + | highlightStrokeColor:'#0077cc'} | ||
| + | ); | ||
</jsxgraph> | </jsxgraph> | ||
Revision as of 16:03, 17 June 2009
