Difference between revisions of "Google style chart"

From JSXGraph Wiki
Jump to navigationJump to search
 
(11 intermediate revisions by 3 users not shown)
Line 1: Line 1:
<jsxgraph width="600" height="400">
+
<jsxgraph width="647" height="400">
 
  var graph1;
 
  var graph1;
  var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 20, originY: 300, axis: true, unitX: 28, unitY: 50});
+
  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.createElement('point', [start,0], {visible:false, name:'', fixed:true}));  
+
   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.createElement('point', [x1,y1],  
+
     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.createElement('point', [end,0], {visible:false, name:'', fixed:true}));  
+
   points.push(brd.create('point', [end,0], {visible:false, name:'', fixed:true}));  
   brd.createElement('polygon',points, {withLines:false,fillColor:'#e6f2fa'});
+
   brd.create('polygon',points, {withLines:false,fillColor:'#e6f2fa'});
 
    
 
    
 
   // Curve:
 
   // Curve:
   brd.createElement('curve', [x,y],  
+
   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="xml">
+
<source lang="javascript">
<jsxgraph width="600" height="400">
 
 
  var graph1;
 
  var graph1;
  var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 20, originY: 300, axis: true, unitX: 28, unitY: 50});
+
  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.createElement('point', [start,0], {visible:false, name:'', fixed:true}));  
+
   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.createElement('point', [x1,y1],  
+
     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.createElement('point', [end,0], {visible:false, name:'', fixed:true}));  
+
   points.push(brd.create('point', [end,0], {visible:false, name:'', fixed:true}));  
   brd.createElement('polygon',points, {withLines:false,fillColor:'#e6f2fa'});
+
   brd.create('polygon',points, {withLines:false,fillColor:'#e6f2fa'});
 
    
 
    
 
   // Curve:
 
   // Curve:
   brd.createElement('curve', [x,y],  
+
   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();
</jsxgraph>
 
 
</source>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 +
[[Category:Charts]]

Latest revision as of 15: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();