Cómo animar jquery líneas flotantes 1 por 1

Quiero animar mi gráfico flotante jQuery consta de 3 líneas como se puede ver en la captura de pantalla.

introduzca la descripción de la imagen aquí

El escenario es “cuando se carga la página, quiero animar la línea desde la izquierda y dibujar todo hacia la derecha. Esto se debe hacer individualmente para todas las líneas hasta que se dibujen las 3 líneas”.

Lo he estado buscando desde hace 2 días, pero no he encontrado ningún método para lograrlo. También probé este plugin http://www.codicode.com/demo/flotanimator , pero solo está animando 1 línea y cada ejemplo en este El plugin está basado en 1 línea.

Cualquier ayuda o información sobre el plugin que pueda lograr esto es apreciada.

Esto es posible utilizando el evento animatorComplete del complemento. Funciona algo como esto:

  1. Trazar la primera serie de datos con animación y ocultar la segunda y tercera serie de datos
  2. Grafique la primera serie de datos sin animación y la segunda serie de datos con animación, oculte la tercera serie de datos
  3. Graficar primera y segunda serie de datos sin animación y tercera con animación

Si tiene todos sus datos en una serie de series de datos, esto se puede lograr fácilmente utilizando un bucle for y un contador. Para un ejemplo simple con dos series de datos, vea este violín .