View source for Plot data with slider

In the first window, the curve can be manipulated by a slider.
<jsxgraph width="600" height="250" box="box1">
// 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:'&mu;'});

// 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>

===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:'&mu;'});

// 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">
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>

[[Category:Examples]]
[[Category:Calculus]]