Google style chart - interactive

From JSXGraph Wiki
Revision as of 15:26, 29 July 2011 by A WASSERMANN (talk | contribs)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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();