Google style chart: Difference between revisions
From JSXGraph Wiki
| A WASSERMANN (talk | contribs) No edit summary | A WASSERMANN (talk | contribs) No edit summary | ||
| Line 7: | Line 7: | ||
|     var p; |     var p; | ||
|     var points = []; |     var points = []; | ||
|     var x = []; |     var x = []; | ||
|     var y = []; |     var y = []; | ||
|     for (i= |    var start = 0; | ||
|    var end = 20; | |||
|    points.push(brd.createElement('point', [start,0], {visible:false, name:'', fixed:true}));  | |||
|     for (i=start;i<=end;i++) { | |||
|       // Generate random coordinates |       // Generate random coordinates | ||
| Line 26: | Line 28: | ||
|       y.push(y1); |       y.push(y1); | ||
|     } |     } | ||
|     // Filled area |     // Filled area. We need two additional points [start,0] and [end,0] | ||
|     points.push(brd.createElement('point', [ |     points.push(brd.createElement('point', [end,0], {visible:false, name:'', fixed:true}));   | ||
|     brd.createElement('polygon',points, {withLines:false,fillColor:'#e6f2fa'}); |     brd.createElement('polygon',points, {withLines:false,fillColor:'#e6f2fa'}); | ||
| Line 50: | Line 52: | ||
|     var i, x1, y1; |     var i, x1, y1; | ||
|     var p; |     var p; | ||
|     var x = [ |    var points = []; | ||
|     var y = [0]; |     var x = []; | ||
|     for (i= |     var y = []; | ||
|    var start = 0; | |||
|    var end = 20; | |||
|    points.push(brd.createElement('point', [start,0], {visible:false, name:'', fixed:true}));   | |||
|     for (i=start;i<=end;i++) { | |||
|       // Generate random coordinates |       // Generate random coordinates | ||
| Line 64: | Line 70: | ||
|                      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); | ||
|     } |     } | ||
|     // Filled area. We need two additional points [start,0] and [end,0] | |||
|    points.push(brd.createElement('point', [end,0], {visible:false, name:'', fixed:true}));   | |||
|     brd.createElement('polygon',points, {withLines:false,fillColor:'#e6f2fa'}); | |||
|    // Curve: | |||
|     brd.createElement('curve', [x,y],   |     brd.createElement('curve', [x,y],   | ||
|                   {strokeWidth:3, strokeColor:'#0077cc',   |                   {strokeWidth:3, strokeColor:'#0077cc',   | ||
|                    highlightStrokeColor:'#0077cc |                    highlightStrokeColor:'#0077cc'} | ||
|                 );   |                 );   | ||
| } | } | ||
Revision as of 16:56, 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 points = [];
   var x = [];
   var y = [];
   var start = 0;
   var end = 20;
   points.push(brd.createElement('point', [start,0], {visible:false, name:'', fixed:true})); 
   for (i=start;i<=end;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}
                 ); 
     points.push(p);
     x.push(x1);
     y.push(y1);
   }
   // Filled area. We need two additional points [start,0] and [end,0]
   points.push(brd.createElement('point', [end,0], {visible:false, name:'', fixed:true})); 
   brd.createElement('polygon',points, {withLines:false,fillColor:'#e6f2fa'});
   
   // Curve:
   brd.createElement('curve', [x,y], 
                 {strokeWidth:3, strokeColor:'#0077cc', 
                  highlightStrokeColor:'#0077cc'}
               ); 
}
brd.suspendUpdate();
doIt();
brd.unsuspendUpdate();
</jsxgraph>
