Difference between revisions of "Google style chart"

From JSXGraph Wiki
Jump to navigationJump to search
Line 4: Line 4:
  
 
function doIt() {
 
function doIt() {
   var i;
+
   var i, x1, y1;
 
   var p;
 
   var p;
  var t = '';
 
  for (i=0;i<=20;i++) {
 
    t += i+' '+brd.round(((Math.random()*4-2)+3),2)+'\n';
 
  }
 
  var a = t.split('\n');
 
 
   var x = [0];
 
   var x = [0];
 
   var y = [0];
 
   var y = [0];
   for (i=0;i<a.length;i++) {
+
   for (i=0;i<=20;i++) {
     var b = a[i].split(/\s+/);
+
 
     b[0]=b[0]*1.0;
+
     // Generate random coordinates
     b[1]=b[1]*1.0;
+
     x1 = i;
     p = brd.createElement('point', [b[0],b[1]],  
+
     y1 = Math.random()*4+1;
 +
 
 +
    // Plot it
 +
     p = brd.createElement('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', style:6, name:'', fixed:true}
 
                 );  
 
                 );  
     if (!isNaN(b[0]) && !isNaN(b[1])) {
+
     x.push(x1);
      x.push(b[0]);
+
    y.push(y1);
      y.push(b[1]);
 
    }
 
 
   }
 
   }
 
   x.push(x[x.length-1]);
 
   x.push(x[x.length-1]);

Revision as of 11:55, 9 May 2009

JavaScript code to produce this chart

<
<jsxgraph width="600" height="400">
 var graph1;
 var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 20, originY: 300, axis: true, unitX: 28, unitY: 50});

function doIt() {
   var i;
   var t = '';
   for (i=0;i<=20;i++) {
     t += i+' '+brd.round(((Math.random()*4-2)+3),2)+'\n';
   }
   var a = t.split('\n');
   var x = [0];
   var y = [0];
   for (i=0;i<a.length;i++) {
     var b = a[i].split(/\s+/);
     b[0]=b[0]*1.0;
     b[1]=b[1]*1.0;
     if (!isNaN(b[0]) && !isNaN(b[1])) { 
       x.push(b[0]);
       y.push(b[1]);
     }
     brd.createElement('point', [b[0],b[1]], 
                   {strokeWidth:2, strokeColor:'#ffffff', 
                    highlightStrokeColor:'#0077cc', fillColor:'#0077cc',  
                    highlightFillColor:'#0077cc', style:6, name:'', fixed:true}
                 ); 
   }
   x.push(x[x.length-1]);
   y.push(0);
   brd.createElement('curve', [x,y], 
                 {strokeWidth:3, strokeColor:'#0077cc', 
                  highlightStrokeColor:'#0077cc',fillColor:'#e6f2fa'}
               ); 
}
brd.suspendUpdate();
doIt();
brd.unsuspendUpdate();
</jsxgraph>