SVG path commands in Javascript

Question

I’m trying to create a line chart based on the values entered by a user in the HTML input field, but I’m having trouble converting the SVG element commands to Javascript.

How can I convert? I need that when the user enters the value, it will appear in the graph dynamically.

 function line() {
    var svgElement = document.getElementById('svgCanvas');
    let data = new Array();
    data[0] = document.getElementById('data1').value;
    data[1] = document.getElementById('data2').value;
    data[2] = document.getElementById('data3').value;
    data[3] = document.getElementById('data4').value;
    data[4] = document.getElementById('data5').value;
    data[5] = document.getElementById('data6').value;

    let index=0;
    let dx;
    dx += 20;

    var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path.setAttribute('d','M 100,0' + 
                      'L' + dx + data[0] + 
                      'L' + dx + data[1] +  
                      'L' + dx + data[2] +  
                      'L' + dx + data[3] + 
                      'L' + dx + data[4] +  
                      'L' + dx + data[5] + 
                      'L' + dx + data[6]
                      );
    path.setAttribute('stroke','red');
    path.setAttribute('fill','none');
    path.setAttribute('stroke-width', 5);
    svgElement.appendChild(path);
}

If anyone can help me, I’d appreciate it enormously.

Answer 1

There were some errors in the code.

The variable dx was being initialized worthless and then you increased it by 20 which resulted in NaN:

let dx;
dx += 20; // dx é igual a NaN

Missing spaces between the coordinates of the points of the line.

There was the use of the array element data index 6 whose value was null.

function line() {
  var svgElement = document.getElementById('svgCanvas');
  let data = new Array();
  data[0] = document.getElementById('data1').value;
  data[1] = document.getElementById('data2').value;
  data[2] = document.getElementById('data3').value;
  data[3] = document.getElementById('data4').value;
  data[4] = document.getElementById('data5').value;
  data[5] = document.getElementById('data6').value;

  let index = 0;
  let dx = 20;

  var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('d', 'M 100 0' +
    ' L ' + dx + ' ' + data[0] +
    ' L ' + dx + ' ' + data[1] +
    ' L ' + dx + ' ' + data[2] +
    ' L ' + dx + ' ' + data[3] +
    ' L ' + dx + ' ' + data[4] +
    ' L ' + dx + ' ' + data[5]        
  );
  path.setAttribute('stroke', 'red');
  path.setAttribute('fill', 'none');
  path.setAttribute('stroke-width', 5);
  svgElement.appendChild(path);
}

<svg id="svgCanvas">

</svg><br>

<span>data1:</span><input type="number" id="data1" value="0"><br>
<span>data2:</span><input type="number" id="data2" value="0"><br>
<span>data3:</span><input type="number" id="data3" value="0"><br>
<span>data4:</span><input type="number" id="data4" value="0"><br>
<span>data5:</span><input type="number" id="data5" value="0"><br>
<span>data6:</span><input type="number" id="data6" value="0"><br>
<button type="button" onclick="line()">Linha</button>