title: Fourier transform visualization in javascript
body: <p>I use <a href="https://www.nayuki.io/page/free-small-fft-in-multiple-languages" rel="nofollow noreferrer">this library</a> to do an fft on an audio file, after this I want to visualize the result with <a href="http://canvasjs.com/" rel="nofollow noreferrer">canvasjs</a>, but I do not know how to do this.</p>
  
  <p>I am not sure what should I use as <code>x</code> and <code>y</code> axes. If it is frequency and amplitude, how to do it? The max <code>x</code> axis value should be equal to the max frequency, if yes than what is the step value? (I computed the magnitude, and the max frequency).</p>
  
  <p>I would be grateful if anyone could help.</p>
  
  <p><strong>Edit</strong>:
  I try to reproduce <a href="https://www.mathworks.com/help/matlab/math/fourier-transforms.html" rel="nofollow noreferrer">this</a>, but i got the following result. The magnitude is not that bad, but the phase is horrible. I thought the <code>Math.atan2()</code> will be the problem, because that is calculate from two numbers, so i tried with Math.js and with arrays, but got the same result. (Expected result in the link)</p>
  
  <pre><code>    for (var i = 0; i &lt; 10 - 1/50; i+=1/50) {
        realArray.push(Math.sin(2 * Math.PI * 15 * i) + Math.sin(2 * Math.PI * 20 * i));
      }
  
      //Phase
      counter = 0;
      for (var i = 0; i &lt; realArray.length ; i++) {
        rnd.push({x: i, y: (Math.atan2(imag[counter], realArray[counter]) * (180 / Math.PI))});
        counter++;
      }
  
      //Magnitude
      counter = 0 ;
      for (var i = 0; i &lt; realArray.length  ; i++) {          
        rnd1.push({x: i , y: Math.abs(realArray[counter])});
        counter++;
      }
  </code></pre>
  
  <p>I am totally lost please give me some adive.</p>
  
  <p><a href="https://i.stack.imgur.com/48tIA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/48tIA.png" alt="enter image description here"></a></p>