duda en el ciclo

function dibujarBarra(x, y, serie, colores, texto) { escribirTexto(x, y - 10, texto); var sumaAltura = 0; for (var i = 0; i < serie.length; i++) { var altura = serie[i]; dibujarRectangulo(x, y + sumaAltura, 50, altura, colores[i]); sumaAltura = sumaAltura + altura; } }

Primeramente, el ciclo for tiene como principal función iterar ( mover, aumentar, etc ) la variable que se le defina, que en este caso es la i (var i = 0) , entonces, por cada ejecución del ciclo ( ejecución refiriéndose a cuando termine de ejecutar todas las instrucciones que halla dentro del for ), esta aumentara, disminuira, multiplicara, etc, su valor en este caso aumenta en una unidad ( i++ que reescrito es i=i+1 ), entonces, serie esta guardando los valores de las barras ( que si no estoy mal es un diagrama de barras apiladas ) entonces, var altura = serie[i];<- aquí se esta guardando en altura el valor de la serie en la posición "i". Ahora bien:

        dibujarRectangulo(x, y + sumaAltura, 50, altura, colores[i]);

x representa la base de las barras, quiere decir en que posición se pintaran (como son barras apiladas, no es necesario modificarla ).
y representa la altura a la que se pintara cada barra.
sumaAltura antes de iniciar el ciclo esta definida en 0, quiere decir, que la primera barra que se pinte lo hará desde la base del grafico, luego esta aumentara la altura de la barra que acaba de pintar para que la siguiente barra se pinte justo en el limite de esta
```
      sumaAltura = sumaAltura + altura ;/*recordando que altura nos guarda el valor de la serie en cada posicion i */
```
50 es el valor por defecto que nos representa la anchura de todas las barras en pixeles
altura es la cantidad de pixeles que se pintaran para cada serie en cada posición "i"
colores esta guardando los colores de cada barra, al hacer colores[i], se extrae el color especifico para cada barra

Espero te saque de dudas.