Difference between revisions of "Time series"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
|||
(10 intermediate revisions by 2 users not shown) | |||
Line 12: | Line 12: | ||
===Simple style=== | ===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; // Read the data as string | var inputString = document.getElementById('inputData').value; // Read the data as string | ||
Line 30: | Line 30: | ||
} | } | ||
− | var plot = brd. | + | var plot = brd.create('curve', [x,y], {strokeColor:'red'}); |
</jsxgraph> | </jsxgraph> | ||
====JavaScript code==== | ====JavaScript code==== | ||
− | <source lang=" | + | <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> | </source> | ||
===Time series - Google style=== | ===Time series - Google style=== | ||
<jsxgraph width="700" height="400" box="jxgbox2"> | <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]]); | |
− | |||
− | brd2 = JXG.JSXGraph.initBoard('jxgbox2', { | ||
− | var xax = brd2. | ||
− | var yax = brd2. | ||
inputString = document.getElementById('inputData').value; // Read the data as string | inputString = document.getElementById('inputData').value; // Read the data as string | ||
Line 75: | Line 69: | ||
var points = []; | var points = []; | ||
− | points.push(brd2. | + | points.push(brd2.create('point', [0,85], {visible:false, name:'', fixed:true})); |
var startDate; | var startDate; | ||
for (var i=0;i<lines.length;i++) { | for (var i=0;i<lines.length;i++) { | ||
Line 85: | Line 79: | ||
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 | 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; | y1 = v; | ||
− | p = brd2. | + | p = brd2.create('point', [x1,y1], |
{strokeWidth:2, strokeColor:'#ffffff', | {strokeWidth:2, strokeColor:'#ffffff', | ||
highlightStrokeColor:'#0077cc', fillColor:'#0077cc', | highlightStrokeColor:'#0077cc', fillColor:'#0077cc', | ||
− | highlightFillColor:'#0077cc', | + | highlightFillColor:'#0077cc', size:4, name:'', fixed:true}); |
points.push(p); | points.push(p); | ||
x.push(x1); | x.push(x1); | ||
Line 94: | Line 88: | ||
} | } | ||
− | points.push(brd2. | + | points.push(brd2.create('point', [x1,85], {visible:false, name:'', fixed:true})); |
− | // Filled area. We need two additional points [start, | + | // Filled area. We need two additional points [start,85] and [end,85] |
− | brd2. | + | brd2.create('polygon',points, {withLines:false,fillColor:'#e6f2fa',withLabel:false}); |
// Curve: | // Curve: | ||
− | brd2. | + | brd2.create('curve', [x,y], |
{strokeWidth:3, strokeColor:'#0077cc', | {strokeWidth:3, strokeColor:'#0077cc', | ||
highlightStrokeColor:'#0077cc'} | highlightStrokeColor:'#0077cc'} | ||
Line 106: | Line 100: | ||
</jsxgraph> | </jsxgraph> | ||
====JavaScript code==== | ====JavaScript code==== | ||
− | <source lang=" | + | <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> | </source> | ||
[[Category:Examples]] | [[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'}
);