Time series

From JSXGraph Wiki
Revision as of 07:33, 9 June 2011 by Michael (talk | contribs)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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>