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