Difference between revisions of "Time series"

From JSXGraph Wiki
Jump to: navigation, search
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, 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 30: Line 30:
 
          
 
          
 
     }
 
     }
     var plot = brd.createElement('curve', [x,y], {strokeColor:'red'});             
+
     var plot = brd.create('curve', [x,y], {strokeColor:'red'});             
 
</jsxgraph>
 
</jsxgraph>
 
====JavaScript code====
 
====JavaScript code====
 
<source lang="xml">
 
<source lang="xml">
 
<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 53: Line 53:
 
          
 
          
 
     }
 
     }
     var plot = brd.createElement('curve', [x,y], {strokeColor:'red'});             
+
     var plot = brd.create('curve', [x,y], {strokeColor:'red'});             
 
</jsxgraph>
 
</jsxgraph>
 
</source>
 
</source>
Line 60: Line 60:
 
<jsxgraph width="700" height="400" box="jxgbox2">
 
<jsxgraph width="700" height="400" box="jxgbox2">
 
     brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-5,130,60,80]});
 
     brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-5,130,60,80]});
     var xax = brd2.createElement('axis',[[0,85],[1,85]]);
+
     var xax = brd2.create('axis',[[0,85],[1,85]]);
     var yax = brd2.createElement('axis',[[0,0],[0,1]]);
+
     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 71: Line 71:
 
     var points = [];
 
     var points = [];
  
     points.push(brd2.createElement('point', [0,85], {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 81: Line 81:
 
         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 90: Line 90:
 
          
 
          
 
     }
 
     }
     points.push(brd2.createElement('point', [x1,85], {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,85] and [end,85]
 
     // Filled area. We need two additional points [start,85] and [end,85]
     brd2.createElement('polygon',points, {withLines:false,fillColor:'#e6f2fa',withLabel:false});
+
     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'}
Line 105: Line 105:
 
<jsxgraph width="700" height="400" box="jxgbox2">
 
<jsxgraph width="700" height="400" box="jxgbox2">
 
     brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-5,130,60,80]});
 
     brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-5,130,60,80]});
     var xax = brd2.createElement('axis',[[0,85],[1,85]]);
+
     var xax = brd2.create('axis',[[0,85],[1,85]]);
     var yax = brd2.createElement('axis',[[0,0],[0,1]]);
+
     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 116: Line 116:
 
     var points = [];
 
     var points = [];
  
     points.push(brd2.createElement('point', [0,85], {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 126: Line 126:
 
         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 135: Line 135:
 
          
 
          
 
     }
 
     }
     points.push(brd2.createElement('point', [x1,85], {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,0] and [end,0]
     brd2.createElement('polygon',points, {withLines:false,fillColor:'#e6f2fa',withLabel:false});
+
     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'}

Revision as of 09:33, 9 June 2011

Input data

Simple style

JavaScript code

<jsxgraph width="700" height="400">
    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'});            
</jsxgraph>

Time series - Google style

JavaScript code

<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]]);

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