Difference between revisions of "Time series"

From JSXGraph Wiki
Jump to navigationJump to search
Line 1: Line 1:
 
<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 31: Line 31:
 
     var plot = brd.createElement('curve', [x,y], {strokeColor:'red'});             
 
     var plot = brd.createElement('curve', [x,y], {strokeColor:'red'});             
 
</jsxgraph>
 
</jsxgraph>
 +
====JavaScript code====
 +
<source lang="xml">
 +
    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
 +
    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.createElement('curve', [x,y], {strokeColor:'red'});           
 +
</jsxgraph>
 +
</source>
  
 
===Time series - Google style===
 
===Time series - Google style===

Revision as of 15:09, 17 June 2009

Simple style

JavaScript code

    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
    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.createElement('curve', [x,y], {strokeColor:'red'});            
</jsxgraph>

Time series - Google style