Difference between revisions of "Highlight curve via slider"

From JSXGraph Wiki
Jump to: navigation, search
Line 7: Line 7:
 
                     {
 
                     {
 
                         strokeColor:function(){ return (s.Value()<0.5)?'red':'blue';},
 
                         strokeColor:function(){ return (s.Value()<0.5)?'red':'blue';},
                         strokeWidth:function(){ return (s.Value()<0.5)?4:1;},
+
                         strokeWidth:function(){ return (s.Value()<0.5)?4:1;}
 
                     });
 
                     });
 
var f = board.createElement('functiongraph', [function(x){ return x+1;}],
 
var f = board.createElement('functiongraph', [function(x){ return x+1;}],
 
                     {
 
                     {
 
                         strokeColor:function(){ return (s.Value()>=0.5)?'red':'blue';},
 
                         strokeColor:function(){ return (s.Value()>=0.5)?'red':'blue';},
                         strokeWidth:function(){ return (s.Value()>=0.5)?4:1;},
+
                         strokeWidth:function(){ return (s.Value()>=0.5)?4:1;}
 
                     });
 
                     });
 
</jsxgraph>
 
</jsxgraph>
Line 23: Line 23:
 
         {
 
         {
 
           strokeColor:function(){ return (s.Value()<0.5)?'red':'blue';},
 
           strokeColor:function(){ return (s.Value()<0.5)?'red':'blue';},
           strokeWidth:function(){ return (s.Value()<0.5)?4:1;},
+
           strokeWidth:function(){ return (s.Value()<0.5)?4:1;}
 
         });
 
         });
 
var f = board.createElement('functiongraph', [function(x){ return x+1;}],
 
var f = board.createElement('functiongraph', [function(x){ return x+1;}],
 
         {
 
         {
 
           strokeColor:function(){ return (s.Value()>=0.5)?'red':'blue';},
 
           strokeColor:function(){ return (s.Value()>=0.5)?'red':'blue';},
           strokeWidth:function(){ return (s.Value()>=0.5)?4:1;},
+
           strokeWidth:function(){ return (s.Value()>=0.5)?4:1;}
 
         });
 
         });
 
</source>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]

Revision as of 14:58, 2 June 2009

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

The underlying JavaScript code

var s = board.createElement('slider', [[1,8],[5,8],[0,0,1]]);

var g = board.createElement('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.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;}
         });