JSXGraph: How to keep two graphs in sync

Question

I would like to have two graphs, a x(t)-graph and a v(t)-graph. Students shall be able to move some points around in the v(t)-graph. At the same time, gliders in the x(t)-graph should be synchronized such that their time coordinates are bound to the points in the v(t)-graph.

I have got most of it working, see jsfiddle. The x(t)-graph, however, only updates when some element in it is touched. But I would like the gliders to move together with the points in the v(t)-graph. Is this possible?

HTML code:

<div id="BOARDID0" class="jxgbox" style="width:400px; height:300px">
</div>
<div id="BOARDID1" class="jxgbox" style="width:400px; height:300px">
</div>

JS code:

const brd0 = JXG.JSXGraph.initBoard('BOARDID0', { 
    boundingbox: [-1, 11, 12, -11], axis:true,
    defaultAxes: {
        x: {withLabel: true, name: 't in s',
            label: {position: 'rt', offset: [-0, 15], anchorX: 'right'} },
        y: {withLabel:true, name: 'x in m',      
            label: {position: 'rt', offset: [+15, -0]} } },
    showCopyright: false, showNavigation: false 
    });

const brd1 = JXG.JSXGraph.initBoard('BOARDID1', { 
    boundingbox: [-1, 6, 12, -6], axis:true,
    defaultAxes: {
        x: {withLabel: true, name: 't in s',
            label: {position: 'rt', offset: [-0, 15], anchorX: 'right'} },
        y: {withLabel:true, name: 'v_x in m/s',      
        label: {position: 'rt', offset: [+15, -0]} } },
    showCopyright: false, showNavigation: false 
    });



function attrPfix(addAttr={}) {
    return {fixed: true, visible: false, withLabel: false, addAttr}; 
}
function attrPmov(addAttr={}) {
    const movAttr = {fixed: false, snapToGrid: true, withLabel: false, addAttr};
    return { ...movAttr, ...addAttr};
}
function attrPsma(addAttr={}) {
    const movAttr = {visible: true, withLabel: false, color:'#4285F4', size: 1};
    return { ...movAttr, ...addAttr};
}
const attrLine = {borders: {strokeColor:'#4285F4', strokeWidth: 3} };
const attrGlid = {visible:false};


var v0=1, t1=1, v1=2, t2=2, v2=3, t3=3, v3=0;

brd1.suspendUpdate();
var lV0 = brd1.create('segment', [[0,-10], [0,10]], {visible:false}),
    lV3 = brd1.create('segment', [[-10,v3], [20,v3]], {visible:false});
var pV0 = brd1.create('glider', [0, v0, lV0], attrPmov({name: "pV0"}) ),
    pV1 = brd1.create('point', [t1, v1], attrPmov({name: "pV1"}) ),
    pV2 = brd1.create('point', [t2, v2], attrPmov({name: "pV2"}) ),
    pV3 = brd1.create('glider', [t3, 0, lV3], attrPmov({name: "pV3"}) ),
    pV01 = brd1.create('point', ["X(pV1)", "Y(pV0)"], attrPsma() ),
    pV12 = brd1.create('point', ["X(pV2)", "Y(pV1)"], attrPsma() ),
    pV23 = brd1.create('point', ["X(pV3)", "Y(pV2)"], attrPsma() )  ;

brd1.create('polygonalchain', [ pV0, pV01, pV1, pV12, pV2, pV23, pV3 ], attrLine);
brd1.unsuspendUpdate();




var x0=1, x1=2, x2=3, x3=4;

brd0.suspendUpdate();
var lX1 = brd0.create('line', [[function(){return pV1.X();},-10], [function(){return pV1.X();},10]], attrGlid),
    lX2 = brd0.create('line', [[function(){return pV2.X();},-10], [function(){return pV2.X();},10]], attrGlid),
    lX3 = brd0.create('line', [[function(){return pV3.X();},-10], [function(){return pV3.X();},10]], attrGlid);
var pX0 = brd0.create('point', [0, x0], attrPsma({fixed: true}) ),
    pX1 = brd0.create('glider', [t1, x1, lX1], attrPmov({face: 'diamond'}) ),
    pX2 = brd0.create('glider', [t2, x2, lX2], attrPmov({face: 'diamond'}) ),
    pX3 = brd0.create('glider', [t3, x3, lX3], attrPmov({face: 'diamond'}) );

brd0.create('polygonalchain', [ pX0, pX1, pX2, pX3 ], attrLine);
brd0.unsuspendUpdate();

Answer 1

It suffices to set

brd1.addChild(brd0);

after creating the two boards in your example, see https://jsfiddle.net/6xohbeza/.