Creating graph of f(x) and f(x-a) by using JSX graph

Question

How the graph of f(x) (input by user) and graph of f(x-a) where the value of a is received from slider can be plotted by using jsx graph? For example if user inputs xx and value of a from slider is 1 then two graphs will be on jsx board: one that of x and other of (x-1)(x-1)?

Answer 1

Picking up my answer from Changing the function in the text box is not changing the graph a simultaneous plot of a user supplied function f(x) and a function f(x-a) which depends on a slider can look like this:

board = JXG.JSXGraph.initBoard('box', {boundingbox: [-6, 12, 8, -6], axis: true});
a = board.create('slider', [[-4,7], [4,7], [-10, 1,10]], {name:'a'});

doPlot = function() {
    var txtraw = document.getElementById('input').value, // Read user input
        f = board.jc.snippet(txtraw, true, 'x', true), // Parse input with JessieCode
        curve, curve2;

    board.removeObject('f'); // Remove element with name f
    board.removeObject('g'); // Remove element with name g
    curve = board.create('functiongraph', [f, -10, 10], {name:'f'});
    curve2 = board.create('functiongraph', [
        function(x) {
            return f(x - a.Value());
        }, -10, 10], {name:'g', strokeColor: 'red'});
};

doPlot();

That means the trick is to define a second function which returns f(x-a). See https://jsfiddle.net/qmp0qdvv/1/. As in the above mentioned other problem, this example allows input of plain math syntax instead of JavaScript code by using JSXGraph's JessieCode parser.