# Difference between revisions of "Google style chart - interactive"

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