Difference between revisions of "Google style chart"

From JSXGraph Wiki
Jump to navigationJump to search
 
(41 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
<html><form>
+
<jsxgraph width="647" height="400">
−
    <input type="button" value="Generate data" onClick="generateData()"> <br>
+
var graph1;
−
    <textarea id="eingabe" rows=8 cols=20>
+
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1,6,21,-1], axis: true});
−
    </textarea> <br>
 
−
    <input type="button" value="Plot it" onClick="doIt()">
 
−
</form></html>
 
−
<jsxgraph width="600" height="400">
 
−
        var graph1;
 
−
        var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 20, originY: 300, axis: true, unitX: 28, unitY: 50});
 
  
−
        function generateData() {
+
function doIt() {
−
            if (graph1) { brd.removeObject(graph1); }
+
  var i, x1, y1;
−
            var t = '';
+
  var p;
−
            for (var i=0;i<=20;i++) {
+
  var points = [];
−
                t += i+' '+brd.round(((Math.random()*4-2)+3),2)+'\n';
+
  var x = [];
−
            }
+
  var y = [];
−
            $('eingabe').value = t;
+
  var start = 0;
−
        }
+
  var end = 20;
 +
  points.push(brd.create('point', [start,0], {visible:false, name:'', fixed:true}));  
 +
  for (i=start;i<=end;i++) {
  
−
        function doIt() {
+
    // Generate random coordinates
−
            var s = $('eingabe').value.strip();
+
    x1 = i;
−
            var a = s.split('\n');
+
    y1 = Math.random()*4+1;
−
            var x = [];
+
 
−
            var y = [];
+
    // Plot it
−
            for (var i=0;i<a.length;i++) {
+
    p = brd.create('point', [x1,y1],
−
                var b = a[i].split(/\s+/);
+
                  {strokeWidth:2, strokeColor:'#ffffff',
−
                b[0]=b[0]*1.0;
+
                    highlightStrokeColor:'#0077cc', fillColor:'#0077cc', 
−
                b[1]=b[1]*1.0;
+
                    highlightFillColor:'#0077cc', style:6, name:'', fixed:true}
−
                if (!isNaN(b[0]) && !isNaN(b[1])) {
+
                );  
−
                    x[i] = b[0];
+
    points.push(p);
−
                    y[i] = b[1];
+
    x.push(x1);
−
                }
+
    y.push(y1);
−
            }
+
  }
−
            brd.createElement('curve', [x,y], {strokeWidth:3, strockeColor:'#0077cc', highlightStrokeColor:'#0077cc',fillColor:'#e6f2fa'});  
+
  // 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();
 
</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 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();
Retrieved from "http://jsxgraph.org/wiki/index.php?title=Google_style_chart&oldid=7133"