Difference between revisions of "Time series II"

From JSXGraph Wiki
Jump to navigationJump to search
Line 2: Line 2:
  
 
<jsxgraph width="600" height="400">
 
<jsxgraph width="600" height="400">
 +
var toDate = function(datestr) {
 +
        var a = datestr.split('.');
 +
        return new Date(a[2]*1,a[1]*1-1,a[0]*1);
 +
    };
 +
 +
var table = [
 +
  ['9.1.2010',3250],
 +
  ['12.1.2010',2950],
 +
  ['15.1.2010',3200],
 +
  ['17.1.2010',3200],
 +
  ['18.1.2010',3210],
 +
  ['20.1.2010',3250],
 +
  ['23.1.2010',3400],
 +
  ['27.1.2010',3590],
 +
  ['31.1.2010',3750],
 +
  ['1.2.2010',3810]
 +
  ];
 +
 +
var plotChartGoogleStyle = function(board, x, y, axisHeight) {
 +
    var points = [], i, p;
 +
    points.push(board.createElement('point', [0, axisHeight], {visible:false, name:'', fixed:true, withLabel:false}));
 +
    for (i=0;i<x.length;i++) {
 +
        p = board.create('point', [x[i],y[i]],
 +
                  {strokeWidth:2, strokeColor:'#ffffff',
 +
                    highlightStrokeColor:'#0077cc', fillColor:'#0077cc', 
 +
                    highlightFillColor:'#0077cc', style:6, name:'', fixed:true});
 +
        points.push(p);
 +
    }
 +
    points.push(board.create('point', [x[x.length-1],axisHeight], {visible:false, name:'', fixed:true}));
 +
 +
    // Filled area. We need two additional points [start,axisHeight] and [end,axisHeight]
 +
    board.create('polygon',points, {withLines:false,fillColor:'#e6f2fa',withLabel:false});
 +
 +
    // Curve:
 +
    board.create('curve', [x,y],
 +
                {strokeWidth:3, strokeColor:'#0077cc',
 +
                  highlightStrokeColor:'#0077cc'}
 +
              );
 +
};
 +
 +
var i, x = [], y = [],
 +
    birthday = toDate(table[0][0]);
 +
 
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1,4500,50,2500]});
 
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1,4500,50,2500]});
 
brd.create('axis',[[0,2700],[1,2700]]);
 
brd.create('axis',[[0,2700],[1,2700]]);
 
brd.create('axis',[[0,0],[0,1]]);
 
brd.create('axis',[[0,0],[0,1]]);
 +
 +
// Transform the dates into days from birthday
 +
for (i=0;i<table.length;i++) {
 +
    x[i] = Math.floor(((toDate(table[i][0])).getTime()-birthday.getTime())/(1000.0*60.0*60.0*24.0));
 +
    y[i] = table[i][1]*1;
 +
}
 +
 +
plotChartGoogleStyle(brd,x,y,2700);
 +
</jsxgraph>
 +
 +
===The underlying JavaScript code===
 +
 +
<source lang="javascript">
  
 
var toDate = function(datestr) {
 
var toDate = function(datestr) {
Line 24: Line 80:
 
   ];
 
   ];
  
var googleStyleChart = function(board, x, y, axisHeight) {
+
var plotChartGoogleStyle = function(board, x, y, axisHeight) {
 
     var points = [], i, p;
 
     var points = [], i, p;
 
     points.push(board.createElement('point', [0, axisHeight], {visible:false, name:'', fixed:true, withLabel:false}));  
 
     points.push(board.createElement('point', [0, axisHeight], {visible:false, name:'', fixed:true, withLabel:false}));  
Line 49: Line 105:
 
     birthday = toDate(table[0][0]);
 
     birthday = toDate(table[0][0]);
  
 +
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1,4500,50,2500]});
 +
brd.create('axis',[[0,2700],[1,2700]]);
 +
brd.create('axis',[[0,0],[0,1]]);
 +
 +
// Transform the dates into days from birthday
 
for (i=0;i<table.length;i++) {
 
for (i=0;i<table.length;i++) {
 
     x[i] = Math.floor(((toDate(table[i][0])).getTime()-birthday.getTime())/(1000.0*60.0*60.0*24.0));
 
     x[i] = Math.floor(((toDate(table[i][0])).getTime()-birthday.getTime())/(1000.0*60.0*60.0*24.0));
 
     y[i] = table[i][1]*1;
 
     y[i] = table[i][1]*1;
 
}
 
}
googleStyleChart(brd,x,y,2700);
 
  
</jsxgraph>
+
plotChartGoogleStyle(brd,x,y,2700);
 +
</source>
 +
 
 +
[[Category:Charts]]
 +
[[Category:Examples]]

Revision as of 18:19, 3 February 2010

The weight of Antonia Wassermann

The underlying JavaScript code

var toDate = function(datestr) {
        var a = datestr.split('.');
        return new Date(a[2]*1,a[1]*1-1,a[0]*1);
    };

var table = [ 
   ['9.1.2010',3250],
   ['12.1.2010',2950],
   ['15.1.2010',3200],
   ['17.1.2010',3200],
   ['18.1.2010',3210],
   ['20.1.2010',3250],
   ['23.1.2010',3400],
   ['27.1.2010',3590],
   ['31.1.2010',3750],
   ['1.2.2010',3810]
   ];

var plotChartGoogleStyle = function(board, x, y, axisHeight) {
    var points = [], i, p;
    points.push(board.createElement('point', [0, axisHeight], {visible:false, name:'', fixed:true, withLabel:false})); 
    for (i=0;i<x.length;i++) { 
        p = board.create('point', [x[i],y[i]], 
                   {strokeWidth:2, strokeColor:'#ffffff', 
                    highlightStrokeColor:'#0077cc', fillColor:'#0077cc',  
                    highlightFillColor:'#0077cc', style:6, name:'', fixed:true});
        points.push(p);
    }
    points.push(board.create('point', [x[x.length-1],axisHeight], {visible:false, name:'', fixed:true})); 
 
    // Filled area. We need two additional points [start,axisHeight] and [end,axisHeight]
    board.create('polygon',points, {withLines:false,fillColor:'#e6f2fa',withLabel:false});
 
    // Curve:
    board.create('curve', [x,y], 
                 {strokeWidth:3, strokeColor:'#0077cc', 
                  highlightStrokeColor:'#0077cc'}
               ); 
};

var i, x = [], y = [], 
    birthday = toDate(table[0][0]);

var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1,4500,50,2500]});
brd.create('axis',[[0,2700],[1,2700]]);
brd.create('axis',[[0,0],[0,1]]);

// Transform the dates into days from birthday
for (i=0;i<table.length;i++) {
    x[i] = Math.floor(((toDate(table[i][0])).getTime()-birthday.getTime())/(1000.0*60.0*60.0*24.0));
    y[i] = table[i][1]*1;
}

plotChartGoogleStyle(brd,x,y,2700);