javascript - how to make interactive & animated SVG polyline chart -


so, i'm trying make chart using svg , polyline assign points to. part no trouble new @ web development struggling making interactive. want show y-value @ mouseover @ x-value in tooltip. managed create tooltip don't know how acquire y-value there way this?

another thing i'm trying animate polyline drawn instead of appearing on screen once coordinates read. found similar path in svg here: https://jakearchibald.com/2013/animated-line-drawing-svg/

var path = document.queryselector('.squiggle-animated path'); var length = path.gettotallength(); // clear previous transition path.style.transition = path.style.webkittransition = 'none'; // set starting positions path.style.strokedasharray = length + ' ' + length; path.style.strokedashoffset = length; // trigger layout styles calculated & browser // picks starting position before animating path.getboundingclientrect(); // define our transition path.style.transition = path.style.webkittransition = 'stroke-dashoffset 2s ease-in-out'; // go! path.style.strokedashoffset = '0'; 

this how path animation code looks reason doesn't work on polyline. there specific reason giving path not equal polyline?


Comments

Popular posts from this blog

magento2 - Magento 2 admin grid add filter to collection -

Android volley - avoid multiple requests of the same kind to the server? -

Combining PHP Registration and Login into one class with multiple functions in one PHP file -