Difference between revisions of "Plot data with slider"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
(16 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | <jsxgraph width="600" height=" | + | In the first window, the curve can be manipulated by a slider. |
− | var | + | <jsxgraph width="600" height="250" box="box1"> |
+ | // This is the original plot data. | ||
+ | var plotData = [ | ||
[0, 1, 2, 3, 4, 5, 6, 7], | [0, 1, 2, 3, 4, 5, 6, 7], | ||
[40, -1, 1, -40, -40, 1, 1, 40] | [40, -1, 1, -40, -40, 1, 1, 40] | ||
]; | ]; | ||
− | var | + | var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox:[0,50,8,-50], axis:true, keepaspectratio:false}); |
+ | brd1.defaultAxes.y.setAttribute({withLabel: true, name:'u'}); | ||
− | var mu = | + | // Slider between 0 and 1, initially set to 0.8 |
− | var plot = | + | var mu = brd1.create('slider', [[2.5,30], [5,30], [0, 0.8, 1]], {name:'μ'}); |
+ | |||
+ | // The original data is plotted | ||
+ | var plot = brd1.create('curve', plotData, {type:'plot'}); | ||
+ | |||
+ | // The update routine of the plot is overwritten. | ||
+ | // The plot data is manipulated by the value of the slider | ||
+ | plot.updateDataArray = function() { | ||
+ | var i, len = plotData[1].length; | ||
+ | |||
+ | this.dataY = []; | ||
+ | for (i = 0; i < len; i++) { | ||
+ | this.dataY[i] = plotData[1][i] * Math.asin(mu.Value()); | ||
+ | } | ||
+ | }; | ||
+ | </jsxgraph> | ||
+ | The first window controls the point in the second window. | ||
+ | <jsxgraph width="600" height="250" box="box2"> | ||
+ | var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox:[0,50,1.4,-10], axis:true, | ||
+ | keepaspectratio:false, showClearTraces:true}); | ||
+ | |||
+ | // This point depends on the data in brd1. | ||
+ | var p = brd2.create('point', [ | ||
+ | function() { return mu.Value();}, | ||
+ | function() { | ||
+ | var i = 0; len = plot.dataY.length, s = 0; | ||
+ | for (i = 0; i < len; i++) { | ||
+ | s += plot.dataY[i] * plot.dataY[i]; | ||
+ | } | ||
+ | |||
+ | return Math.sqrt(s) / 5; }], | ||
+ | {trace: true, name:'||u||_2'}); | ||
+ | |||
+ | // Connect brd1 and brd2. | ||
+ | brd1.addChild(brd2); | ||
</jsxgraph> | </jsxgraph> | ||
===The JavaScript code=== | ===The JavaScript code=== | ||
+ | Code for the first window: | ||
+ | <source lang="javascript"> | ||
+ | // This is the original plot data. | ||
+ | var plotData = [ | ||
+ | [0, 1, 2, 3, 4, 5, 6, 7], | ||
+ | [40, -1, 1, -40, -40, 1, 1, 40] | ||
+ | ]; | ||
+ | |||
+ | var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox:[0,50,8,-50], axis:true, keepaspectratio:false}); | ||
+ | brd1.defaultAxes.y.setAttribute({withLabel: true, name:'u'}); | ||
+ | |||
+ | // Slider between 0 and 1, initially set to 0.8 | ||
+ | var mu = brd1.create('slider', [[2.5,30], [5,30], [0, 0.8, 1]], {name:'μ'}); | ||
+ | |||
+ | // The original data is plotted | ||
+ | var plot = brd1.create('curve', plotData, {type:'plot'}); | ||
+ | |||
+ | // The update routine of the plot is overwritten. | ||
+ | // The plot data is manipulated by the value of the slider | ||
+ | plot.updateDataArray = function() { | ||
+ | var i, len = plotData[1].length; | ||
+ | this.dataY = []; | ||
+ | for (i = 0; i < len; i++) { | ||
+ | this.dataY[i] = plotData[1][i] * Math.asin(mu.Value()); | ||
+ | } | ||
+ | }; | ||
+ | </source> | ||
+ | Code for the second window: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
+ | var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox:[0,50,1.4,-10], axis:true, | ||
+ | keepaspectratio:false, showClearTraces:true}); | ||
+ | |||
+ | // This point depends on the data in brd1. | ||
+ | var p = brd2.create('point', [ | ||
+ | function() { return mu.Value();}, | ||
+ | function() { | ||
+ | var i = 0; len = plot.dataY.length, s = 0; | ||
+ | for (i = 0; i < len; i++) { | ||
+ | s += plot.dataY[i] * plot.dataY[i]; | ||
+ | } | ||
+ | |||
+ | return Math.sqrt(s) / 5; }], | ||
+ | {trace: true, name:'||u||_2'}); | ||
+ | |||
+ | // Connect brd1 and brd2. | ||
+ | brd1.addChild(brd2); | ||
</source> | </source> | ||
[[Category:Examples]] | [[Category:Examples]] | ||
[[Category:Calculus]] | [[Category:Calculus]] |
Latest revision as of 11:03, 12 April 2014
In the first window, the curve can be manipulated by a slider.
The first window controls the point in the second window.The JavaScript code
Code for the first window:
// This is the original plot data.
var plotData = [
[0, 1, 2, 3, 4, 5, 6, 7],
[40, -1, 1, -40, -40, 1, 1, 40]
];
var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox:[0,50,8,-50], axis:true, keepaspectratio:false});
brd1.defaultAxes.y.setAttribute({withLabel: true, name:'u'});
// Slider between 0 and 1, initially set to 0.8
var mu = brd1.create('slider', [[2.5,30], [5,30], [0, 0.8, 1]], {name:'μ'});
// The original data is plotted
var plot = brd1.create('curve', plotData, {type:'plot'});
// The update routine of the plot is overwritten.
// The plot data is manipulated by the value of the slider
plot.updateDataArray = function() {
var i, len = plotData[1].length;
this.dataY = [];
for (i = 0; i < len; i++) {
this.dataY[i] = plotData[1][i] * Math.asin(mu.Value());
}
};
Code for the second window:
var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox:[0,50,1.4,-10], axis:true,
keepaspectratio:false, showClearTraces:true});
// This point depends on the data in brd1.
var p = brd2.create('point', [
function() { return mu.Value();},
function() {
var i = 0; len = plot.dataY.length, s = 0;
for (i = 0; i < len; i++) {
s += plot.dataY[i] * plot.dataY[i];
}
return Math.sqrt(s) / 5; }],
{trace: true, name:'||u||_2'});
// Connect brd1 and brd2.
brd1.addChild(brd2);