Difference between revisions of "Time series"

From JSXGraph Wiki
Jump to navigationJump to search
(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...)
 
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: 25, unitY: 2});
+
     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;           // 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 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


Time series - Google style