How to change properties of element in JSXGraph?

Question

Suppose, I have the following piece of code:

var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
var ax2 = brd2.create('axis', [[0,0],[1,0]]);

How can I change second point of axis? Something like ax2.setSecondPoint([2,0])?

In general, how can I set property of any element?

Thank you.

Answer 1

Axis has two properties which names are self-explanatory: point1 and point2. You can use setPosition method on any of them, e.g.

ax2.point2.setPosition(JXG.COORDS_BY_USER,[2,0])

Now there is one catch: you will not see this change on the chart unless you set needsRegularUpdate property of the axis object to true. Finally, to refresh the chart you should execute fullUpdate() method on the board variable. The whole looks like this:

var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
var ax2 = brd2.create('axis', [[0,0],[1,0]],{needsRegularUpdate:true});

ax2.point2.setPosition(JXG.COORDS_BY_USER,[2,0]);
brd2.fullUpdate();

References:

http://jsxgraph.uni-bayreuth.de/docs/symbols/JXG.Point.html#setPosition

http://jsxgraph.uni-bayreuth.de/wiki/index.php/Options (search for "special axis options")

Now to change properties like fixed, visible, etc. you should use setAttribute method (setProperty is deprecated). Example:

// Set property directly on creation of an element using the attributes object parameter
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 5, 5, 1]};
var p = board.create('point', [2, 2], {visible: false});

// Now make this point visible and fixed:
p.setAttribute({
    fixed: true,
    visible: true
});

Source: http://jsxgraph.uni-bayreuth.de/docs/symbols/JXG.GeometryElement.html#setAttribute

Last but not least a simple formula:

a + b = c

where:
a = using JavaScript debugging tools in browsers to investigate object properties
b = checking documentation for products you use
c= success :)