Time series: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(26 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 11: Line 12:
===Simple style===
===Simple style===
<jsxgraph width="700" height="400">
<jsxgraph width="700" height="400">
     brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, originX: 60, originY: 300, unitX: 10, unitY: 2});
     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 29: Line 30:
          
          
     }
     }
     var plot = brd.createElement('curve', [x,y], {strokeColor:'red'});             
     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===
===Time series - Google style===
<jsxgraph width="700" height="400" box="jxgbox2">
<jsxgraph width="700" height="400" box="jxgbox2">
     brd2 = JXG.JSXGraph.initBoard('jxgbox2', {axis:true, originX: 60, originY: 300, unitX: 10, unitY: 2});
     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 = document.getElementById('inputData').value;        // Read the data as string
Line 45: Line 69:
     var points = [];
     var points = [];


     points.push(brd2.createElement('point', [0,0], {visible:false, name:'', fixed:true}));  
     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 55: 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.createElement('point', [x1,y1],  
         p = brd2.create('point', [x1,y1],  
                   {strokeWidth:2, strokeColor:'#ffffff',  
                   {strokeWidth:2, strokeColor:'#ffffff',  
                     highlightStrokeColor:'#0077cc', fillColor:'#0077cc',   
                     highlightStrokeColor:'#0077cc', fillColor:'#0077cc',   
                     highlightFillColor:'#0077cc', style:6, name:'', fixed:true});
                     highlightFillColor:'#0077cc', size:4, name:'', fixed:true});
         points.push(p);
         points.push(p);
         x.push(x1);
         x.push(x1);
Line 64: Line 88:
          
          
     }
     }
     points.push(brd2.createElement('point', [x1,0], {visible:false, name:'', fixed:true}));  
     points.push(brd2.create('point', [x1,85], {visible:false, name:'', fixed:true}));  
   
   
     // Filled area. We need two additional points [start,0] and [end,0]
     // Filled area. We need two additional points [start,85] and [end,85]
     brd2.createElement('polygon',points, {withLines:false,fillColor:'#e6f2fa'});
     brd2.create('polygon',points, {withLines:false,fillColor:'#e6f2fa',withLabel:false});


     // Curve:
     // Curve:
     brd2.createElement('curve', [x,y],  
     brd2.create('curve', [x,y],  
                 {strokeWidth:3, strokeColor:'#0077cc',  
                 {strokeWidth:3, strokeColor:'#0077cc',  
                   highlightStrokeColor:'#0077cc'}
                   highlightStrokeColor:'#0077cc'}
               );  
               );  
</jsxgraph>
</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 07:35, 9 June 2011

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'}
           );