Google style chart: Difference between revisions

From JSXGraph Wiki
No edit summary
Line 6: Line 6:
   var i, x1, y1;
   var i, x1, y1;
   var p;
   var p;
  var points = [];
  points.push(brd.createElement('point', [0,0], {visible:false, name:'', fixed:true}));
   var x = [0];
   var x = [0];
   var y = [0];
   var y = [0];
Line 20: Line 22:
                     highlightFillColor:'#0077cc', style:6, name:'', fixed:true}
                     highlightFillColor:'#0077cc', style:6, name:'', fixed:true}
                 );  
                 );  
    points.push(p);
     x.push(x1);
     x.push(x1);
     y.push(y1);
     y.push(y1);
Line 25: Line 28:
   x.push(x1);
   x.push(x1);
   y.push(0);
   y.push(0);
  points.push(brd.createElement('point', [x1,0], {visible:false, name:'', fixed:true}));
  brd.createElement('polygon',[points]);
  /*
   brd.createElement('curve', [x,y],  
   brd.createElement('curve', [x,y],  
                 {strokeWidth:3, strokeColor:'#0077cc',  
                 {strokeWidth:3, strokeColor:'#0077cc',  
                   highlightStrokeColor:'#0077cc',fillColor:'#e6f2fa'}
                   highlightStrokeColor:'#0077cc',fillColor:'#e6f2fa'}
               );  
               );  
  */
}
}
brd.suspendUpdate();
brd.suspendUpdate();

Revision as of 16:46, 10 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, x1, y1;
   var p;
   var x = [0];
   var y = [0];
   for (i=0;i<=20;i++) {

     // Generate random coordinates
     x1 = i;
     y1 = Math.random()*4+1;

     // Plot it
     p = brd.createElement('point', [x1,y1], 
                   {strokeWidth:2, strokeColor:'#ffffff', 
                    highlightStrokeColor:'#0077cc', fillColor:'#0077cc',  
                    highlightFillColor:'#0077cc', style:6, name:'', fixed:true}
                 ); 
     x.push(x1);
     y.push(y1);
   }
   x.push(x1);
   y.push(0);
   brd.createElement('curve', [x,y], 
                 {strokeWidth:3, strokeColor:'#0077cc', 
                  highlightStrokeColor:'#0077cc',fillColor:'#e6f2fa'}
               ); 
}
brd.suspendUpdate();
doIt();
brd.unsuspendUpdate();
</jsxgraph>