SVG – Add/Insert Points using Path or Polyline – JavaScript

SVG polyLine / add points via appendItem

Note: you need to remove the first item after the first insert; the first insert is like a loop-back, weird behavior.

<svg preserveAspectRatio="none" id="svg1" viewBox="0 0 900 200">
  <path d="M0 1"/>
  <polyline id="polyline1" 
	 fill="none"
	 stroke="#0074d9"
	 stroke-width="1"
	 points=""/>
</svg>
...
<script>
var svg1 = document.getElementById('svg1');
var svgpoint = svg1.createSVGPoint();
var polyline1 = document.getElementById('polyline1');
var svgpoint_att = polyline1.getAttribute("points");

svgpoint.x = Math.round(xindex);
svgpoint.y = Math.round(yPlot);
polyline1.points.appendItem(svgpoint);
if (CurrentInterval == 1)
    polyline1.points.removeItem(0);
</script>

SVG polyLine  / add points via setAttribute; Reliable, without problems, but is slower than appendItem!

<svg id="svg1" viewBox="0 0 900 200">
  <path d="M0 1"/>
  <polyline id="polyline1" 
	 fill="none"
	 stroke="#0074d9"
	 stroke-width="1"
	 points=""/>
</svg>
...
<script>
var polyline1 = document.getElementById('polyline1');
let strx = Math.round(xindex) + "," + Math.round(yindex);
svgpoint_att += ' '+strx;
polyline1.setAttribute("points", svgpoint_att);
</script>

SVG – add points using path – not polyline – via setAttribute

<svg viewBox="0 0 900 200" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path id="path1" d="M0 1"  fill="none" stroke="blue" stroke-width="3" />
</svg>
...
<script>
var pathid1 = document.getElementById('path1'); 
var pathid1_att = pathid1.getAttribute("d");

strx = 'L '+Math.round(xindex) + " " + Math.round(yindex);
pathid1_att += ' '+strx;
pathid1.setAttribute("d", pathid1_att);
</script>

Bonus:

Veritical resize/rescaling SVG

svg1.setAttribute("viewBox","0 0 900 "+ maxHeight);