Problem with polygon!

[Emilio López Plaza]

Hi friends!

I'm new in this group, I just started to use JSXGraphs and I love it!

I have to do a chart which shows an area between two X-axis coordinates. I've been using a "polygon" but I wish I would change it dynamically with sliders. The problem is that moving the start and end points, do not recalculate the intermediate points of the polygon to display the new area.

You can show my problem in

You can see a picture of my problem on this link: http://img87.imageshack.us/img87/9150/graphri.png

This is the code of this part:

-----------------------------------------------------------------------------------------------------

//Sliders
var n = brd.createElement('slider', [[10, 5.7],[50,5.7],[0,10,70]], {name:'seg', snapWidth:1});
var m = brd.createElement('slider', [[10, 5.3],[50,5.3],[0,20,70]], {name:'seg', snapWidth:1});
                   
// Points of the area
g1 = brd.createElement('point', [function(){ return n.Value()}, function(){ return y[Math.floor(n.Value())]}], {});
g2 = brd.createElement('point', [function(){ return n.Value()}, 0], {});
g3 = brd.createElement('point', [function(){ return m.Value()}, function(){ return y[Math.floor(m.Value())]}], {});
g4 = brd.createElement('point', [function(){ return m.Value()}, 0], {});
                   
area.push(g3);
area.push(g4);
area.push(g2);
area.push(g1);
                   
for (j = start; j <= end; j++) {
    if (j > n.Value() && j < m.Value()) {
        area.push(brd.createElement('point', [j, y[j]], {}));
    }
}                       
       
pol = brd.createElement('polygon', area, {});
                   
-----------------------------------------------------------------------------------------------------

Thanks for your help!
Emilio, Spain ;)

[Alfred.W...@uni-bayreuth.de]

Dear Emilio,
thank you for using JSXGraph!

For your application I would not recommend using the polygon object.
Usually, if you have a varying number of vertices it is difficult (and computationally expensive)
to keep track of the points defining the polygon.
Instead I would use a curve. I put together a quick example:
http://jsxgraph.uni-bayreuth.de/~alfred/jsxgraph/trunk/examples/curve2.html

In this example the method "updateDataArray()" of the curve object curve2
is redefined. You simply have to set the arrays this.dataX and this.dataY
for curve2 in this method.
This is much faster than adding points. Of course, you can additionally
position the four points from your example to make the graphics look better.

Hope that helps, best wishes,
Alfred

[Emilio López Plaza]

Thank you Alfred!

That's just what I wanted!!! :D

but now I have another question haha
Can I change the value of a slider manually?. In my chart, I need that the value of one of the sliders will never be less than the value of the other, so, if it's less I need to modify it manually. There is some function similar to slider.setValue(x)?

Thank you a lot!!!
Emilio.

[Alfred Wassermann]

Dear Emilio,
the file
http://jsxgraph.uni-bayreuth.de/~alfred/jsxgraph/trunk/examples/curve2.html
contains an update answering your question.

The straightforward solution is to add a function via Board.addHook() which
watches the two slider values. For doing this you have to know how sliders work.
The method slider.Value() returns a value between min value and maximum value
- as specified during the construction of the slider.
Internal we keep track of the position of the slider by using the property "position"
which takes a value between 0 and 1.
So, if the two sliders have the same min and max values, you can use:
    brd.addHook(function(){
        if (s2.Value()<s.Value()) {
            s2.position = s.position;
        }
    });
or equivalently
    brd.addHook(function(){
        if (s2.position<s.position) {
            s2.position = s.position;
        }
    });

Best wishes,
Alfred

[Emilio López Plaza]

Alfred,
thank you very much!, your help has been extremely useful for me.

Emilio.