Difference between revisions of "Google style chart"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
Line 1: | Line 1: | ||
<jsxgraph width="600" height="400"> | <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; | |
− | + | var t = ''; | |
− | + | for (i=0;i<=20;i++) { | |
− | + | t += i+' '+brd.round(((Math.random()*4-2)+3),2)+'\n'; | |
− | + | } | |
− | + | var a = t.split('\n'); | |
− | + | var x = [0]; | |
− | + | var y = [0]; | |
− | + | for (i=0;i<a.length;i++) { | |
− | + | var b = a[i].split(/\s+/); | |
− | + | b[0]=b[0]*1.0; | |
− | + | b[1]=b[1]*1.0; | |
− | + | if (!isNaN(b[0]) && !isNaN(b[1])) { | |
− | + | x.push(b[0]); | |
− | + | y.push(b[1]); | |
− | + | } | |
− | + | brd.createElement('point', [b[0],b[1]], | |
− | + | {strokeWidth:2, strokeColor:'#ffffff', | |
− | + | highlightStrokeColor:'#0077cc', fillColor:'#0077cc', | |
− | + | highlightFillColor:'#0077cc', style:6, name:''} | |
− | + | ); | |
− | + | } | |
− | + | x.push(x[x.length-1]); | |
− | + | y.push(0); | |
+ | brd.createElement('curve', [x,y], | ||
+ | {strokeWidth:3, strokeColor:'#0077cc', | ||
+ | highlightStrokeColor:'#0077cc',fillColor:'#e6f2fa'} | ||
+ | ); | ||
+ | } | ||
brd.suspendUpdate(); | brd.suspendUpdate(); | ||
doIt(); | doIt(); | ||
brd.unsuspendUpdate(); | brd.unsuspendUpdate(); | ||
</jsxgraph> | </jsxgraph> | ||
+ | |||
+ | ===JavaScript code to produce this chart=== | ||
+ | <source lang="xml">< | ||
+ | <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; | ||
+ | var t = ''; | ||
+ | for (i=0;i<=20;i++) { | ||
+ | t += i+' '+brd.round(((Math.random()*4-2)+3),2)+'\n'; | ||
+ | } | ||
+ | var a = t.split('\n'); | ||
+ | var x = [0]; | ||
+ | var y = [0]; | ||
+ | for (i=0;i<a.length;i++) { | ||
+ | var b = a[i].split(/\s+/); | ||
+ | b[0]=b[0]*1.0; | ||
+ | b[1]=b[1]*1.0; | ||
+ | if (!isNaN(b[0]) && !isNaN(b[1])) { | ||
+ | x.push(b[0]); | ||
+ | y.push(b[1]); | ||
+ | } | ||
+ | brd.createElement('point', [b[0],b[1]], | ||
+ | {strokeWidth:2, strokeColor:'#ffffff', | ||
+ | highlightStrokeColor:'#0077cc', fillColor:'#0077cc', | ||
+ | highlightFillColor:'#0077cc', style:6, name:''} | ||
+ | ); | ||
+ | } | ||
+ | x.push(x[x.length-1]); | ||
+ | y.push(0); | ||
+ | brd.createElement('curve', [x,y], | ||
+ | {strokeWidth:3, strokeColor:'#0077cc', | ||
+ | highlightStrokeColor:'#0077cc',fillColor:'#e6f2fa'} | ||
+ | ); | ||
+ | } | ||
+ | brd.suspendUpdate(); | ||
+ | doIt(); | ||
+ | brd.unsuspendUpdate(); | ||
+ | </jsxgraph> | ||
+ | </source> | ||
[[Category:Examples]] | [[Category:Examples]] |
Revision as of 12:44, 9 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;
var t = '';
for (i=0;i<=20;i++) {
t += i+' '+brd.round(((Math.random()*4-2)+3),2)+'\n';
}
var a = t.split('\n');
var x = [0];
var y = [0];
for (i=0;i<a.length;i++) {
var b = a[i].split(/\s+/);
b[0]=b[0]*1.0;
b[1]=b[1]*1.0;
if (!isNaN(b[0]) && !isNaN(b[1])) {
x.push(b[0]);
y.push(b[1]);
}
brd.createElement('point', [b[0],b[1]],
{strokeWidth:2, strokeColor:'#ffffff',
highlightStrokeColor:'#0077cc', fillColor:'#0077cc',
highlightFillColor:'#0077cc', style:6, name:''}
);
}
x.push(x[x.length-1]);
y.push(0);
brd.createElement('curve', [x,y],
{strokeWidth:3, strokeColor:'#0077cc',
highlightStrokeColor:'#0077cc',fillColor:'#e6f2fa'}
);
}
brd.suspendUpdate();
doIt();
brd.unsuspendUpdate();
</jsxgraph>