Difference between revisions of "Google style chart"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
(26 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
− | <jsxgraph width=" | + | <jsxgraph width="647" height="400"> |
var graph1; | var graph1; | ||
− | var brd = JXG.JSXGraph.initBoard('jxgbox', { | + | var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1,6,21,-1], axis: true}); |
function doIt() { | function doIt() { | ||
− | var i; | + | var i, x1, y1; |
var p; | var p; | ||
− | var | + | var points = []; |
− | + | var x = []; | |
− | + | var y = []; | |
− | + | var start = 0; | |
− | var | + | var end = 20; |
− | var | + | points.push(brd.create('point', [start,0], {visible:false, name:'', fixed:true})); |
− | + | for (i=start;i<=end;i++) { | |
− | for (i= | + | |
− | + | // Generate random coordinates | |
− | + | x1 = i; | |
− | + | y1 = Math.random()*4+1; | |
− | p = brd. | + | |
+ | // Plot it | ||
+ | p = brd.create('point', [x1,y1], | ||
{strokeWidth:2, strokeColor:'#ffffff', | {strokeWidth:2, strokeColor:'#ffffff', | ||
highlightStrokeColor:'#0077cc', fillColor:'#0077cc', | highlightStrokeColor:'#0077cc', fillColor:'#0077cc', | ||
− | highlightFillColor:'#0077cc', style:6, name:''} | + | 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.create('point', [end,0], {visible:false, name:'', fixed:true})); | |
− | brd. | + | brd.create('polygon',points, {withLines:false,fillColor:'#e6f2fa'}); |
+ | |||
+ | // Curve: | ||
+ | brd.create('curve', [x,y], | ||
{strokeWidth:3, strokeColor:'#0077cc', | {strokeWidth:3, strokeColor:'#0077cc', | ||
− | highlightStrokeColor:'#0077cc | + | highlightStrokeColor:'#0077cc'} |
); | ); | ||
} | } | ||
− | + | brd.suspendUpdate(); | |
doIt(); | doIt(); | ||
− | + | brd.unsuspendUpdate(); | |
</jsxgraph> | </jsxgraph> | ||
===JavaScript code to produce this chart=== | ===JavaScript code to produce this chart=== | ||
− | <source lang=" | + | <source lang="javascript"> |
− | |||
var graph1; | var graph1; | ||
− | var brd = JXG.JSXGraph.initBoard('jxgbox', { | + | var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-1,6,21,-1], axis: true}); |
function doIt() { | function doIt() { | ||
− | var i; | + | var i, x1, y1; |
− | var | + | var p; |
− | + | var points = []; | |
− | + | var x = []; | |
− | + | var y = []; | |
− | var | + | var start = 0; |
− | var | + | var end = 20; |
− | var | + | points.push(brd.create('point', [start,0], {visible:false, name:'', fixed:true})); |
− | for (i= | + | for (i=start;i<=end;i++) { |
− | + | ||
− | + | // Generate random coordinates | |
− | + | x1 = i; | |
− | + | y1 = Math.random()*4+1; | |
− | + | ||
− | + | // Plot it | |
− | + | p = brd.create('point', [x1,y1], | |
− | brd. | ||
{strokeWidth:2, strokeColor:'#ffffff', | {strokeWidth:2, strokeColor:'#ffffff', | ||
highlightStrokeColor:'#0077cc', fillColor:'#0077cc', | highlightStrokeColor:'#0077cc', fillColor:'#0077cc', | ||
− | highlightFillColor:'#0077cc', style:6, name:''} | + | 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.create('point', [end,0], {visible:false, name:'', fixed:true})); | |
− | brd. | + | brd.create('polygon',points, {withLines:false,fillColor:'#e6f2fa'}); |
+ | |||
+ | // Curve: | ||
+ | brd.create('curve', [x,y], | ||
{strokeWidth:3, strokeColor:'#0077cc', | {strokeWidth:3, strokeColor:'#0077cc', | ||
− | highlightStrokeColor:'#0077cc | + | highlightStrokeColor:'#0077cc'} |
); | ); | ||
} | } | ||
Line 78: | Line 86: | ||
doIt(); | doIt(); | ||
brd.unsuspendUpdate(); | brd.unsuspendUpdate(); | ||
− | |||
</source> | </source> | ||
[[Category:Examples]] | [[Category:Examples]] | ||
+ | [[Category:Charts]] |
Latest revision as of 15:11, 3 March 2021
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.create('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.create('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.create('point', [end,0], {visible:false, name:'', fixed:true}));
brd.create('polygon',points, {withLines:false,fillColor:'#e6f2fa'});
// Curve:
brd.create('curve', [x,y],
{strokeWidth:3, strokeColor:'#0077cc',
highlightStrokeColor:'#0077cc'}
);
}
brd.suspendUpdate();
doIt();
brd.unsuspendUpdate();