Google style chart: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary  | 
				A WASSERMANN (talk | contribs) No edit summary  | 
				||
| (28 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
<jsxgraph width="  | <jsxgraph width="647" height="400">  | ||
  var graph1;  |   var graph1;  | ||
  var brd = JXG.JSXGraph.initBoard('jxgbox', {  |   var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1,6,21,-1], axis: true});  | ||
function doIt() {  | function doIt() {  | ||
    var i;  |     var i, x1, y1;  | ||
    var p;  |     var p;  | ||
    var   |     var points = [];  | ||
    var x = [];  | |||
   var y = [];  | |||
    var start = 0;  | |||
    var   |     var end = 20;  | ||
    var   |     points.push(brd.create('point', [start,0], {visible:false, name:'', fixed:true}));    | ||
    for (i=start;i<=end;i++) {  | |||
    for (i=  | |||
      // Generate random coordinates  | |||
      x1 = i;  | |||
      y1 = Math.random()*4+1;  | |||
      p = brd.  | |||
     // Plot it  | |||
      p = brd.create('point', [x1,y1],    | |||
                    {strokeWidth:2, strokeColor:'#ffffff',    |                     {strokeWidth:2, strokeColor:'#ffffff',    | ||
                     highlightStrokeColor:'#0077cc', fillColor:'#0077cc',     |                      highlightStrokeColor:'#0077cc', fillColor:'#0077cc',     | ||
                     highlightFillColor:'#0077cc', style:6, name:''}  |                      highlightFillColor:'#0077cc', style:6, name:'', fixed:true}  | ||
                  );    |                   );    | ||
      points.push(p);  | |||
      y.push(  |      x.push(x1);  | ||
      y.push(y1);  | |||
    }  |     }  | ||
    // Filled area. We need two additional points [start,0] and [end,0]  | |||
   points.push(brd.create('point', [end,0], {visible:false, name:'', fixed:true}));    | |||
    brd.  |     brd.create('polygon',points, {withLines:false,fillColor:'#e6f2fa'});  | ||
   // Curve:  | |||
    brd.create('curve', [x,y],    | |||
                  {strokeWidth:3, strokeColor:'#0077cc',    |                   {strokeWidth:3, strokeColor:'#0077cc',    | ||
                   highlightStrokeColor:'#0077cc  |                    highlightStrokeColor:'#0077cc'}  | ||
                );    |                 );    | ||
}  | }  | ||
brd.suspendUpdate();  | |||
doIt();  | doIt();  | ||
brd.unsuspendUpdate();  | |||
</jsxgraph>  | </jsxgraph>  | ||
===JavaScript code to produce this chart===  | ===JavaScript code to produce this chart===  | ||
<source lang="  | <source lang="javascript">  | ||
  var graph1;  |   var graph1;  | ||
  var brd = JXG.JSXGraph.initBoard('jxgbox', {  |   var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1,6,21,-1], axis: true});  | ||
function doIt() {  | function doIt() {  | ||
    var i;  |     var i, x1, y1;  | ||
    var   |     var p;  | ||
    var points = [];  | |||
   var x = [];  | |||
    var y = [];  | |||
    var   |     var start = 0;  | ||
    var   |     var end = 20;  | ||
    var   |    points.push(brd.create('point', [start,0], {visible:false, name:'', fixed:true}));    | ||
    for (i=  |     for (i=start;i<=end;i++) {  | ||
      // Generate random coordinates  | |||
      x1 = i;  | |||
      y1 = Math.random()*4+1;  | |||
      // Plot it  | |||
      p = brd.create('point', [x1,y1],    | |||
      brd.  | |||
                    {strokeWidth:2, strokeColor:'#ffffff',    |                     {strokeWidth:2, strokeColor:'#ffffff',    | ||
                     highlightStrokeColor:'#0077cc', fillColor:'#0077cc',     |                      highlightStrokeColor:'#0077cc', fillColor:'#0077cc',     | ||
                     highlightFillColor:'#0077cc', style:6, name:''}  |                      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.create('point', [end,0], {visible:false, name:'', fixed:true}));    | |||
    brd.  |     brd.create('polygon',points, {withLines:false,fillColor:'#e6f2fa'});  | ||
   // Curve:  | |||
    brd.create('curve', [x,y],    | |||
                  {strokeWidth:3, strokeColor:'#0077cc',    |                   {strokeWidth:3, strokeColor:'#0077cc',    | ||
                   highlightStrokeColor:'#0077cc  |                    highlightStrokeColor:'#0077cc'}  | ||
                );    |                 );    | ||
}  | }  | ||
| Line 76: | Line 86: | ||
doIt();  | doIt();  | ||
brd.unsuspendUpdate();  | brd.unsuspendUpdate();  | ||
</source>  | </source>  | ||
[[Category:Examples]]  | [[Category:Examples]]  | ||
[[Category:Charts]]  | |||
Latest revision as of 13:11, 3 March 2021
JavaScript code to produce this chart
 var graph1;
 var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1,6,21,-1], axis: true});
function doIt() {
   var i, x1, y1;
   var p;
   var points = [];
   var x = [];
   var y = [];
   var start = 0;
   var end = 20;
   points.push(brd.create('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.create('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.create('point', [end,0], {visible:false, name:'', fixed:true})); 
   brd.create('polygon',points, {withLines:false,fillColor:'#e6f2fa'});
   
   // Curve:
   brd.create('curve', [x,y], 
                 {strokeWidth:3, strokeColor:'#0077cc', 
                  highlightStrokeColor:'#0077cc'}
               ); 
}
brd.suspendUpdate();
doIt();
brd.unsuspendUpdate();