Google style chart: Difference between revisions
From JSXGraph Wiki
| A WASSERMANN (talk | contribs) No edit summary | A WASSERMANN (talk | contribs) No edit summary | ||
| (11 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() { | ||
| Line 11: | Line 11: | ||
|     var start = 0; |     var start = 0; | ||
|     var end = 20; |     var end = 20; | ||
|     points.push(brd. |     points.push(brd.create('point', [start,0], {visible:false, name:'', fixed:true}));   | ||
|     for (i=start;i<=end;i++) { |     for (i=start;i<=end;i++) { | ||
| Line 19: | Line 19: | ||
|       // Plot it |       // Plot it | ||
|       p = brd. |       p = brd.create('point', [x1,y1],   | ||
|                     {strokeWidth:2, strokeColor:'#ffffff',   |                     {strokeWidth:2, strokeColor:'#ffffff',   | ||
|                      highlightStrokeColor:'#0077cc', fillColor:'#0077cc',    |                      highlightStrokeColor:'#0077cc', fillColor:'#0077cc',    | ||
| Line 29: | Line 29: | ||
|     } |     } | ||
|     // Filled area. We need two additional points [start,0] and [end,0] |     // Filled area. We need two additional points [start,0] and [end,0] | ||
|     points.push(brd. |     points.push(brd.create('point', [end,0], {visible:false, name:'', fixed:true}));   | ||
|     brd. |     brd.create('polygon',points, {withLines:false,fillColor:'#e6f2fa'}); | ||
|     // Curve: |     // Curve: | ||
|     brd. |     brd.create('curve', [x,y],   | ||
|                   {strokeWidth:3, strokeColor:'#0077cc',   |                   {strokeWidth:3, strokeColor:'#0077cc',   | ||
|                    highlightStrokeColor:'#0077cc'} |                    highlightStrokeColor:'#0077cc'} | ||
| Line 44: | Line 44: | ||
| ===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() { | ||
| Line 57: | Line 56: | ||
|     var start = 0; |     var start = 0; | ||
|     var end = 20; |     var end = 20; | ||
|     points.push(brd. |     points.push(brd.create('point', [start,0], {visible:false, name:'', fixed:true}));   | ||
|     for (i=start;i<=end;i++) { |     for (i=start;i<=end;i++) { | ||
| Line 65: | Line 64: | ||
|       // Plot it |       // Plot it | ||
|       p = brd. |       p = brd.create('point', [x1,y1],   | ||
|                     {strokeWidth:2, strokeColor:'#ffffff',   |                     {strokeWidth:2, strokeColor:'#ffffff',   | ||
|                      highlightStrokeColor:'#0077cc', fillColor:'#0077cc',    |                      highlightStrokeColor:'#0077cc', fillColor:'#0077cc',    | ||
| Line 75: | Line 74: | ||
|     } |     } | ||
|     // Filled area. We need two additional points [start,0] and [end,0] |     // Filled area. We need two additional points [start,0] and [end,0] | ||
|     points.push(brd. |     points.push(brd.create('point', [end,0], {visible:false, name:'', fixed:true}));   | ||
|     brd. |     brd.create('polygon',points, {withLines:false,fillColor:'#e6f2fa'}); | ||
|     // Curve: |     // Curve: | ||
|     brd. |     brd.create('curve', [x,y],   | ||
|                   {strokeWidth:3, strokeColor:'#0077cc',   |                   {strokeWidth:3, strokeColor:'#0077cc',   | ||
|                    highlightStrokeColor:'#0077cc'} |                    highlightStrokeColor:'#0077cc'} | ||
| Line 87: | 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();
