Difference between revisions of "Google style chart"

From JSXGraph Wiki
Jump to navigationJump to search
Line 1: Line 1:
 
<jsxgraph width="600" height="400">
 
<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', {originX: 20, originY: 300, axis: true, unitX: 28, unitY: 50});
  
        function doIt() {
+
function doIt() {
            var i;
+
  var i;
            var t = '';
+
  var t = '';
            for (i=0;i<=20;i++) {
+
  for (i=0;i<=20;i++) {
                t += i+' '+brd.round(((Math.random()*4-2)+3),2)+'\n';
+
    t += i+' '+brd.round(((Math.random()*4-2)+3),2)+'\n';
            }
+
  }
            var a = t.split('\n');
+
  var a = t.split('\n');
            var x = [0];
+
  var x = [0];
            var y = [0];
+
  var y = [0];
            for (i=0;i<a.length;i++) {
+
  for (i=0;i<a.length;i++) {
                var b = a[i].split(/\s+/);
+
    var b = a[i].split(/\s+/);
                b[0]=b[0]*1.0;
+
    b[0]=b[0]*1.0;
                b[1]=b[1]*1.0;
+
    b[1]=b[1]*1.0;
                if (!isNaN(b[0]) && !isNaN(b[1])) {  
+
    if (!isNaN(b[0]) && !isNaN(b[1])) {  
                    x.push(b[0]);
+
      x.push(b[0]);
                    y.push(b[1]);
+
      y.push(b[1]);
                }
+
    }
                brd.createElement('point', [b[0],b[1]], {strokeWidth:2, strokeColor:'#ffffff',  
+
    brd.createElement('point', [b[0],b[1]],  
                                    highlightStrokeColor:'#0077cc', fillColor:'#0077cc',   
+
                  {strokeWidth:2, strokeColor:'#ffffff',  
                                    highlightFillColor:'#0077cc', style:6, name:''});  
+
                    highlightStrokeColor:'#0077cc', fillColor:'#0077cc',   
            }
+
                    highlightFillColor:'#0077cc', style:6, name:''}
            x.push(x[x.length-1]);
+
                );  
            y.push(0);
+
  }
            brd.createElement('curve', [x,y], {strokeWidth:3, strokeColor:'#0077cc', highlightStrokeColor:'#0077cc',fillColor:'#e6f2fa'});  
+
  x.push(x[x.length-1]);
        }
+
  y.push(0);
 +
  brd.createElement('curve', [x,y],  
 +
                {strokeWidth:3, strokeColor:'#0077cc',  
 +
                  highlightStrokeColor:'#0077cc',fillColor:'#e6f2fa'}
 +
              );  
 +
}
 
brd.suspendUpdate();
 
brd.suspendUpdate();
 
doIt();
 
doIt();
 
brd.unsuspendUpdate();
 
brd.unsuspendUpdate();
 
</jsxgraph>
 
</jsxgraph>
 +
 +
===JavaScript code to produce this chart===
 +
<source lang="xml"><
 +
<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;
 +
  var t = '';
 +
  for (i=0;i<=20;i++) {
 +
    t += i+' '+brd.round(((Math.random()*4-2)+3),2)+'\n';
 +
  }
 +
  var a = t.split('\n');
 +
  var x = [0];
 +
  var y = [0];
 +
  for (i=0;i<a.length;i++) {
 +
    var b = a[i].split(/\s+/);
 +
    b[0]=b[0]*1.0;
 +
    b[1]=b[1]*1.0;
 +
    if (!isNaN(b[0]) && !isNaN(b[1])) {
 +
      x.push(b[0]);
 +
      y.push(b[1]);
 +
    }
 +
    brd.createElement('point', [b[0],b[1]],
 +
                  {strokeWidth:2, strokeColor:'#ffffff',
 +
                    highlightStrokeColor:'#0077cc', fillColor:'#0077cc', 
 +
                    highlightFillColor:'#0077cc', style:6, name:''}
 +
                );
 +
  }
 +
  x.push(x[x.length-1]);
 +
  y.push(0);
 +
  brd.createElement('curve', [x,y],
 +
                {strokeWidth:3, strokeColor:'#0077cc',
 +
                  highlightStrokeColor:'#0077cc',fillColor:'#e6f2fa'}
 +
              );
 +
}
 +
brd.suspendUpdate();
 +
doIt();
 +
brd.unsuspendUpdate();
 +
</jsxgraph>
 +
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]

Revision as of 12:44, 9 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;
   var t = '';
   for (i=0;i<=20;i++) {
     t += i+' '+brd.round(((Math.random()*4-2)+3),2)+'\n';
   }
   var a = t.split('\n');
   var x = [0];
   var y = [0];
   for (i=0;i<a.length;i++) {
     var b = a[i].split(/\s+/);
     b[0]=b[0]*1.0;
     b[1]=b[1]*1.0;
     if (!isNaN(b[0]) && !isNaN(b[1])) { 
       x.push(b[0]);
       y.push(b[1]);
     }
     brd.createElement('point', [b[0],b[1]], 
                   {strokeWidth:2, strokeColor:'#ffffff', 
                    highlightStrokeColor:'#0077cc', fillColor:'#0077cc',  
                    highlightFillColor:'#0077cc', style:6, name:''}
                 ); 
   }
   x.push(x[x.length-1]);
   y.push(0);
   brd.createElement('curve', [x,y], 
                 {strokeWidth:3, strokeColor:'#0077cc', 
                  highlightStrokeColor:'#0077cc',fillColor:'#e6f2fa'}
               ); 
}
brd.suspendUpdate();
doIt();
brd.unsuspendUpdate();
</jsxgraph>