Google style chart: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
| Line 8: | Line 8: | ||
var points = []; | var points = []; | ||
points.push(brd.createElement('point', [0,0], {visible:false, name:'', fixed:true})); | points.push(brd.createElement('point', [0,0], {visible:false, name:'', fixed:true})); | ||
var x = [ | var x = []; | ||
var y = [ | var y = []; | ||
for (i=0;i<=20;i++) { | for (i=0;i<=20;i++) { | ||
| Line 26: | Line 26: | ||
y.push(y1); | y.push(y1); | ||
} | } | ||
// Filled area: | |||
points.push(brd.createElement('point', [x1,0], {visible:false, name:'', fixed:true})); | points.push(brd.createElement('point', [x1,0], {visible:false, name:'', fixed:true})); | ||
brd.createElement('polygon',points, {withLines:false | 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',fillColor:'#e6f2fa'} | highlightStrokeColor:'#0077cc',fillColor:'#e6f2fa'} | ||
); | ); | ||
} | } | ||
brd.suspendUpdate(); | brd.suspendUpdate(); | ||
Revision as of 16:53, 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 x = [0];
var y = [0];
for (i=0;i<=20;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}
);
x.push(x1);
y.push(y1);
}
x.push(x1);
y.push(0);
brd.createElement('curve', [x,y],
{strokeWidth:3, strokeColor:'#0077cc',
highlightStrokeColor:'#0077cc',fillColor:'#e6f2fa'}
);
}
brd.suspendUpdate();
doIt();
brd.unsuspendUpdate();
</jsxgraph>
