how to plot functions containing variables in function-plot?

Question

I have the code to generate a sine wave in the javascript library- function-plot:

    functionPlot({
  target: '#domain',
  yAxis: {domain: [-1, 1]},
  xAxis: {domain: [8, 24]},
  data: [{
    fn: 'sin(x)'
  }]
})

But it doesn't generate a graph when I plot sin(kx-wt) which is what needed for a moving wave.

I think the library only takes in strings as inputs.

Is there any way to bypass this and generate a plot of a function containing variables?

Answer 1

You can declare a string as

var myfunction = "sin(kx-wt)"

and input this function as:

data: [{
    fn: myfunction
  }]

Now, you can declare variables for k,w and t. In your case, you want to animate the t value. I am doing this by using setTimeout

    var t = 0;
  
  function mytimer(){
  t+=.5
     
     var funb = "sin("+k+"*x"+-t+")";
  
  

var options = {
  
    
  
    target: '#root',
    xAxis: { domain: [0, 10] },
    yAxis: { domain: [-3, 3] },
    
    data: [
      {
        fn: funb
      },
      
    ]
  }

functionPlot(options)
    
    
    document.getElementById("test").innerHTML = "t="+t;
  setTimeout(mytimer, 50); 
  } 
  
  window.onload=setTimeout(mytimer,50);
    

implementation example: https://pbphysics.blogspot.com/2022/09/test-python.html