CODEWITHSUNDEEP
javascripthtmlanimationsvgpolyline
dj-neza
dj-neza

Reputation: 308

how to make interactive & animated SVG polyline chart

So, I'm trying to make a chart using SVG and polyline that I assign points to. That part was no trouble but new as I am at web development I am struggling with making it interactive. I want it to show the Y-value at mouseover at certain X-value in a tooltip. I managed to create a tooltip but don't know how to acquire the Y-value so is there a good way to do this?

Another thing I'm trying to do is to animate the polyline so it would look like it is actually drawn instead of just appearing on screen once the coordinates are read. I found something similar for Path in SVG here: https://jakearchibald.com/2013/animated-line-drawing-svg/ 

var path = document.querySelector('.squiggle-animated path');
var length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition =
'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the 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 is how the path animation code looks like but for some reason it doesn't work on a polyline. Is there a specific reason for that giving that path is not equal to polyline?

Upvotes: 3

Views: 1084

Answers (1)

bjmc
bjmc

Reputation: 3282

I'm doing something similar myself, and I haven't tackled the tooltip yet. However, I do have a working example of an animated polyline based on the same blog post you referenced.

The only difference I can see is that I'm using style.webkitTransition (notice small w) while your code has style.WebkitTransition. I noticed the same difference in this answer. Maybe at some point since 2013 the name of that CSS property was standardized with the small letter.

function cssAnimate() {
  var polyline = document.getElementById('plotLine');
  var length = polyline.getTotalLength();
  // Clear any previous transition
  polyline.style.transition = polyline.style.webkitTransition = 'none';
  // Set up the starting positions
  polyline.style.strokeDasharray = length + ' ' + length;
  polyline.style.strokeDashoffset = length;
  // Trigger a layout so styles are calculated & the browser
  // picks up the starting position before animating
  polyline.getBoundingClientRect();
  // Define our transition
  polyline.style.transition = polyline.style.webkitTransition = 'stroke-dashoffset 3s ease-in-out';
  // Go!
  polyline.style.strokeDashoffset = '0';
}
cssAnimate();
<html>
<svg id="plot" viewBox="0 0 100 100" class="chart">

  <polyline
    id="plotLine"
    fill="none"
    stroke="#0074d9"
    stroke-width="1"
    stroke-dasharray=""
    stroke-dashoffset="0.00"
    points="
    00,50
    10,70
    20,35
    30,65
    40,77
    50,91
    "
   />

</svg>

</body>

</html>

Upvotes: 1

Related Questions