Google style chart: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(33 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() {
            var i;
  var i, x1, y1;
            var t = '';
  var p;
            for (i=0;i<=20;i++) {
  var points = [];
                t += i+' '+brd.round(((Math.random()*4-2)+3),2)+'\n';
  var x = [];
            }
  var y = [];
            var a = t.split('\n');
  var start = 0;
            var x = [0];
  var end = 20;
            var y = [0];
  points.push(brd.create('point', [start,0], {visible:false, name:'', fixed:true}));  
            for (i=0;i<a.length;i++) {
  for (i=start;i<=end;i++) {
                var b = a[i].split(/\s+/);
 
                b[0]=b[0]*1.0;
    // Generate random coordinates
                b[1]=b[1]*1.0;
    x1 = i;
                if (!isNaN(b[0]) && !isNaN(b[1])) {
    y1 = Math.random()*4+1;
                    x.push(b[0]);
 
                    y.push(b[1]);
    // Plot it
                }
    p = brd.create('point', [x1,y1],  
                brd.createElement('point', [b[0],b[1]], {strokeWidth:2, strokeColor:'#ffffff',  
                  {strokeWidth:2, strokeColor:'#ffffff',  
                                    highlightStrokeColor:'#ffffff', fillColor:'#0077cc',   
                    highlightStrokeColor:'#0077cc', fillColor:'#0077cc',   
                                    highlightFillColor:'#e6f2fa', style:6, name:''});  
                    highlightFillColor:'#0077cc', style:6, name:'', fixed:true}
            }
                );  
            x.push(x[x.length-1]);
    points.push(p);
            y.push(0);
    x.push(x1);
            brd.createElement('curve', [x,y], {strokeWidth:3, strokeColor:'#0077cc', highlightStrokeColor:'#0077cc',fillColor:'#e6f2fa'});  
    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();
brd.suspendUpdate();
doIt();
doIt();
brd.unsuspendUpdate();
brd.unsuspendUpdate();
</jsxgraph>
</jsxgraph>
===JavaScript code to produce this chart===
<source lang="javascript">
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();
</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();