Difference between revisions of "Google style chart"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
Line 7: | Line 7: | ||
var p; | var p; | ||
var points = []; | var points = []; | ||
− | |||
var x = []; | var x = []; | ||
var y = []; | var y = []; | ||
− | for (i= | + | 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 | // Generate random coordinates | ||
Line 26: | Line 28: | ||
y.push(y1); | y.push(y1); | ||
} | } | ||
− | // Filled area | + | // Filled area. We need two additional points [start,0] and [end,0] |
− | points.push(brd.createElement('point', [ | + | points.push(brd.createElement('point', [end,0], {visible:false, name:'', fixed:true})); |
brd.createElement('polygon',points, {withLines:false,fillColor:'#e6f2fa'}); | brd.createElement('polygon',points, {withLines:false,fillColor:'#e6f2fa'}); | ||
Line 50: | Line 52: | ||
var i, x1, y1; | var i, x1, y1; | ||
var p; | var p; | ||
− | var x = [ | + | var points = []; |
− | var y = [0]; | + | var x = []; |
− | for (i= | + | 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 | // Generate random coordinates | ||
Line 64: | Line 70: | ||
highlightFillColor:'#0077cc', style:6, name:'', fixed:true} | highlightFillColor:'#0077cc', style:6, name:'', fixed:true} | ||
); | ); | ||
+ | points.push(p); | ||
x.push(x1); | x.push(x1); | ||
y.push(y1); | y.push(y1); | ||
} | } | ||
− | + | // 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], | brd.createElement('curve', [x,y], | ||
{strokeWidth:3, strokeColor:'#0077cc', | {strokeWidth:3, strokeColor:'#0077cc', | ||
− | highlightStrokeColor:'#0077cc | + | highlightStrokeColor:'#0077cc'} |
); | ); | ||
} | } |
Revision as of 18:56, 10 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, 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);
}
// 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'}
);
}
brd.suspendUpdate();
doIt();
brd.unsuspendUpdate();
</jsxgraph>