Plot data with slider

From JSXGraph Wiki
Revision as of 09:03, 12 April 2014 by A WASSERMANN (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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);