Time series

From JSXGraph Wiki
Revision as of 12:54, 22 June 2009 by A WASSERMANN (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, 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

JavaScript code

<jsxgraph width="700" height="400" box="jxgbox2">
    var height = 400;
    var unitY = height/(130-80);
    var originY = unitY*130;

    brd2 = JXG.JSXGraph.initBoard('jxgbox2', {axis:true, originX: 60, originY: originY, unitX: 10, unitY: unitY});

    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
        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.createElement('point', [x1,y1], 
                   {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', [x1,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>