Difference between revisions of "Google style chart - interactive"

From JSXGraph Wiki
Jump to: navigation, search
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
By clicking on points one can set new values for the y-coordinates.
 
<jsxgraph width="647" height="400">
 
<jsxgraph width="647" height="400">
 
  var graph1;
 
  var graph1;
Line 25: Line 26:
 
                 );  
 
                 );  
 
     points.push(p);
 
     points.push(p);
 +
    x.push(x1);
 +
    y.push(y1);
  
 
     p.rendNode._num = i;                          // memorize the number of this point in the array
 
     p.rendNode._num = i;                          // memorize the number of this point in the array
 
     p.rendNode.onclick = function() {
 
     p.rendNode.onclick = function() {
         var p = points[this._num];
+
        var i = this._num;                        // Now we can access the number again
 +
         var p = points[i+1];                       // The point number is one off
 
         var v = prompt("New value:", p.Y())*1.0;
 
         var v = prompt("New value:", p.Y())*1.0;
         p.setPosition(JXG.COORDS_BY_USER, p.X(), v);
+
         p.setPosition(JXG.COORDS_BY_USER, p.X(), v); // New coordinates for the point
         y[this._num] = v;
+
         y[i] = v;                                 // New coordinates for the curve
 
         brd.update();
 
         brd.update();
 
     };
 
     };
 +
  }
 +
  // Filled area. We need two additional points [start,0] and [end,0]
 +
  points.push(brd.createElement('point', [end,0], {visible:false, name:'', fixed:true}));
 +
  brd.createElement('polygon',points, {withLines:false,fillColor:'#e6f2fa'});
 +
 
 +
  // Curve:
 +
  brd.createElement('curve', [x,y],
 +
                {strokeWidth:3, strokeColor:'#0077cc',
 +
                  highlightStrokeColor:'#0077cc'}
 +
              );
 +
}
 +
doIt();
 +
</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.createElement('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.createElement('point', [x1,y1],
 +
                  {strokeWidth:2, strokeColor:'#ffffff',
 +
                    highlightStrokeColor:'#0077cc', fillColor:'#0077cc', 
 +
                    highlightFillColor:'#0077cc', style:6, name:'', fixed:true}
 +
                );
 +
    points.push(p);
 
     x.push(x1);
 
     x.push(x1);
 
     y.push(y1);
 
     y.push(y1);
 +
 +
    p.rendNode._num = i;                          // memorize the number of this point in the array
 +
    p.rendNode.onclick = function() {
 +
        var i = this._num;                        // Now we can access the number again
 +
        var p = points[i+1];                      // The point number is one off
 +
        var v = prompt("New value:", p.Y())*1.0;
 +
        p.setPosition(JXG.COORDS_BY_USER, p.X(), v); // New coordinates for the point
 +
        y[i] = v;                                  // New coordinates for the curve
 +
        brd.update();
 +
    };
 
   }
 
   }
 
   // Filled area. We need two additional points [start,0] and [end,0]
 
   // Filled area. We need two additional points [start,0] and [end,0]
Line 48: Line 102:
 
               );  
 
               );  
 
}
 
}
brd.suspendUpdate();
 
 
doIt();
 
doIt();
brd.unsuspendUpdate();
+
</source>
</jsxgraph>
+
 
 +
[[Category:Examples]]
 +
[[Category:Charts]]

Latest revision as of 16:26, 29 July 2011

By clicking on points one can set new values for the y-coordinates.

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.createElement('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.createElement('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);

     p.rendNode._num = i;                          // memorize the number of this point in the array
     p.rendNode.onclick = function() {
        var i = this._num;                         // Now we can access the number again
        var p = points[i+1];                       // The point number is one off
        var v = prompt("New value:", p.Y())*1.0;
        p.setPosition(JXG.COORDS_BY_USER, p.X(), v); // New coordinates for the point
        y[i] = v;                                  // New coordinates for the curve
        brd.update();
     };
   }
   // Filled area. We need two additional points [start,0] and [end,0]
   points.push(brd.createElement('point', [end,0], {visible:false, name:'', fixed:true})); 
   brd.createElement('polygon',points, {withLines:false,fillColor:'#e6f2fa'});
   
   // Curve:
   brd.createElement('curve', [x,y], 
                 {strokeWidth:3, strokeColor:'#0077cc', 
                  highlightStrokeColor:'#0077cc'}
               ); 
}
doIt();