Difference between revisions of "Highlight curve via slider"

From JSXGraph Wiki
Jump to: navigation, search
(New page: <jsxgraph height="500" width="600" board="board" box="jxgbox"> board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 25, unitY: 25}); var a = board.createElement('s...)
 
 
(8 intermediate revisions by one other user not shown)
Line 1: Line 1:
<jsxgraph height="500" width="600" board="board"  box="jxgbox">
+
Depending on the value of the slider ''s'', one of the curves is highlighted.
board = JXG.JSXGraph.initBoard('jxgbox', {originX: 250, originY: 250, unitX: 25, unitY: 25});
+
<jsxgraph height="500" width="500" board="board"  box="jxgbox">
var a = board.createElement('slider', [[1,8],[5,8],[0,1,4]]);
+
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-10, 10, 10, -10]});
 +
var s = board.create('slider', [[1,8],[5,8],[0,0,1]]);
  
var g = board.createElement('functiongraph', [function(x){ return x*x;}]);
+
var g = board.create('functiongraph', [function(x){ return x*x;}],
var f = board.createElement('functiongraph', [function(x){ return x+1;}]);
+
                    {
 +
                        strokeColor:function(){ return (s.Value()<0.5)?'red':'blue';},
 +
                        strokeWidth:function(){ return (s.Value()<0.5)?4:1;}
 +
                    });
 +
var f = board.create('functiongraph', [function(x){ return x+1;}],
 +
                    {
 +
                        strokeColor:function(){ return (s.Value()>=0.5)?'red':'blue';},
 +
                        strokeWidth:function(){ return (s.Value()>=0.5)?4:1;}
 +
                    });
 +
</jsxgraph>
 +
 
 +
===The underlying JavaScript code===
 +
<source lang="javascript">
 +
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-10, 10, 10, -10]});
 +
var s = board.create('slider', [[1,8],[5,8],[0,0,1]]);
 +
 
 +
var g = board.create('functiongraph', [function(x){ return x*x;}],
 +
        {
 +
          strokeColor:function(){ return (s.Value()<0.5)?'red':'blue';},
 +
          strokeWidth:function(){ return (s.Value()<0.5)?4:1;}
 +
        });
 +
var f = board.create('functiongraph', [function(x){ return x+1;}],
 +
        {
 +
          strokeColor:function(){ return (s.Value()>=0.5)?'red':'blue';},
 +
          strokeWidth:function(){ return (s.Value()>=0.5)?4:1;}
 +
        });
 +
</source>
  
</jsxgraph>
+
[[Category:Examples]]

Latest revision as of 09:15, 8 June 2011

Depending on the value of the slider s, one of the curves is highlighted.

The underlying JavaScript code

board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-10, 10, 10, -10]});
var s = board.create('slider', [[1,8],[5,8],[0,0,1]]);

var g = board.create('functiongraph', [function(x){ return x*x;}],
         {
          strokeColor:function(){ return (s.Value()<0.5)?'red':'blue';},
          strokeWidth:function(){ return (s.Value()<0.5)?4:1;}
         });
var f = board.create('functiongraph', [function(x){ return x+1;}],
         {
          strokeColor:function(){ return (s.Value()>=0.5)?'red':'blue';},
          strokeWidth:function(){ return (s.Value()>=0.5)?4:1;}
         });