Difference between revisions of "Plot data with slider"

From JSXGraph Wiki
Jump to: navigation, search
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
In the first window, the curve can be manipulated by a slider.
 
<jsxgraph width="600" height="250" box="box1">
 
<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 6: Line 8:
  
 
var brd1 = 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 = brd1.create('slider', [[2.5,30], [5,30], [0, 1, 1]], {name:'&mu;'});
+
// 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'});
 
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[1].length;
 
     var i, len = plotData[1].length;
Line 15: Line 23:
 
     this.dataY = [];
 
     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>
 
</jsxgraph>
 
+
The first window controls the point in the second window.
 
<jsxgraph width="600" height="250" box="box2">
 
<jsxgraph width="600" height="250" box="box2">
var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox:[0,50,1,-1], axis:true,  
+
var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox:[0,50,1.4,-10], axis:true,  
keepaspectratio:false});
+
keepaspectratio:false, showClearTraces:true});
 
 
var p = brd2.create('point', [ function() { return mu.Value();}, function() { return 1; }]);
 
  
 +
// 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);
 
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 10: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);