We want to plot a timeseries where the data points shows up as they happen. We'll model this a Random Walk always from the same starting point. mdn 
mdn
let x = 0 let y = 50 const rn = () => Math.random()-Math.random() const nx = () => [x+=1, Math.round(y+=rn()*5)]
We collect data in a growing polyline.
output.innerHTML = ` <svg viewBox="0 0 100 100"> <polyline id="grid" points="0,0 0,100 100,100 100,0 0,0 0,50 100,50" stroke="#ccc" fill="none"/> <polyline id="growing" points="" fill="none" stroke="brown" stroke-width=".5" stroke-linejoin="round"/> </svg>`
When the line is full we start another.
function grow () { let points = growing.getAttribute('points') if (x > 130) {x=0; y=50; points=''; save() } growing.setAttribute('points', points+' '+nx()) } setInterval(grow, 10)
We clone and color lines as they complete. mdn
function save () { let hist = growing.cloneNode() hist.setAttribute('id','') hist.setAttribute('stroke','#ddd') grid.before(hist) }
null
//wiki.ralfbarkow.ch/assets/pages/snippet-template/basicjs.html?snippet-template HEIGHT 400