Plot data with slider: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(13 intermediate revisions by the same user not shown)
Line 1: Line 1:
<jsxgraph width="600" height="300" box="box1">
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 = [
var plotData = [
   [0, 1, 2, 3, 4, 5, 6, 7],
   [0, 1, 2, 3, 4, 5, 6, 7],
Line 5: Line 7:
  ];
  ];


var brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[0,50,8,-50], axis:true, keepaspectratio:false});
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 = brd.create('slider', [[2.5,30], [5,30], [0, 1, 1]], {name:'&mu;'});
// Slider between 0 and 1, initially set to 0.8
var plot = brd.create('curve', plotData, {type:'plot'});
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() {
plot.updateDataArray = function() {
     var i, len = plotData[0].length;
     var i, len = plotData[1].length;
      
 
     this.dataY = [];
     for (i = 0; i < len; i++) {
     for (i = 0; i < len; i++) {
         this.dataY[i] = plotData[1][i] * mu.Value();
         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:'&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">
<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 09: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:'&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());
    }
};

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