Add New Data to SVG Line

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

http://js.ward.asia.wiki.org/assets/pages/snippet-template/basicjs.html?snippet-template HEIGHT 400