[Duda] GRAFICA DE BARRAS,por que se usa Altura y (y + sumaAltura) para graficar la barra?y por que colores lleva[i]?

Te puedo colaborar con lo de los colores. Este al ser un arreglo de String lo debemos recorrer con la variable i del loop a fin de que por cada posicion podamos enviar el valor como parámetro a la funcion dibujarRectangulo.

Hola,

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;

Se tiene y + sumaAltura para que los valores se vayan modificando de acuerdo a cada iteracion que tiene el Bucle For. Haz de cuenta que x=50,y=100 y serie = [15,25,30] Tendriamos esto:

for (var i = 0; i < serie.length; i++) {  //serie.length para este caso seria 3

Para i = 0:
    Se cumple que 0 < 3? Sí, entonces
    var altura = serie[0] //Esto en el Array equivale a 15, seria altura = 15
    Luego la funcion continua con esto:
    dibujarRectangulo(x, **y + sumaAltura**, 50, altura, colores[i]);
    dibujarRectangulo(50, **100 + 0**, 50, 15, colores[0]); // var sumaAltura = 0 segun lo que esta inicializado antes del For, y la altura = 15, segun el paso anterior
     Finalmente la funcion haria lo siguiente:
     sumaAltura = sumaAltura + altura;
     sumaAltura = 0 + 15; // Reemplazamos sumaAltura = 0, y la altura = 15, segun lo que vimos en el paso anterior
     El nuevo valor de sumaAltura = 15;

Para i = 1:
    Se cumple que 1 < 3? Sí, entonces
    var altura = serie[1] //Esto en el Array equivale a 25, seria altura = 25
    Luego la funcion continua con esto:
    dibujarRectangulo(x, **y + sumaAltura**, 50, altura, colores[i]);
    dibujarRectangulo(50, 100 + 15, 50, 25, colores[1]); // sumaAltura = 15 , y la altura = 25, segun el paso anterior
     Finalmente la funcion haria lo siguiente:
     sumaAltura = sumaAltura + altura;
     sumaAltura = 15 + 25; // Reemplazamos sumaAltura = 15, y la altura = 25, segun lo que vimos en el paso anterior
     El nuevo valor de sumaAltura = 40;

Para i = 2:
    Se cumple que 2 < 3? Sí, entonces
    var altura = serie[2] //Esto en el Array equivale a 30, seria altura = 30
    Luego la funcion continua con esto:
    dibujarRectangulo(x, **y + sumaAltura**, 50, altura, colores[i]);
    dibujarRectangulo(50, 100 + 40, 50, 30, colores[1]); // sumaAltura = 40 , y la altura = 30, segun el paso anterior
     Finalmente la funcion haria lo siguiente:
     sumaAltura = sumaAltura + altura;
     sumaAltura = 40 + 30; // Reemplazamos sumaAltura = 40, y la altura = 30, segun lo que vimos en el paso anterior
     El nuevo valor de sumaAltura = 70;

Para i = 3:
    Se cumple que 3 < 3? No, entonces se rompe el bucle 

Espero no haberme enredado mucho, trata de hacerlo en un papel yo lo entiendo mejor asi

Estoy perdida, con la altura, pero creo entender que es para determinar el inicio y el fin del color?

es correcto o estoy perdida?

y muchas gracias por tomarse el tiempo de explicar tan detalladamente

Altura es como inicio de cada barra tomando en cuenta que utilizamos los elementos del Arrays en cada LOOP así vamos también agregamos un nuevo punto de inicio con el sumaAltura agregando una barra por cada pasada en el LOOP. Saludos...

Hola,

Lo que hace var altura = serie[i] es guardar el valor que va tomando serie[i] cuando el For va recorriendo el Array serie

En nuestro ejemplo serie = [15,25,30], el i representa el indice o posicion de nuestro Array serie e inicia en 0, asi: i = 0 1 2

Entonces cuando yo tengo serie[0], hace referencia al primer elemento que es el 15, y este valor se guarda en una variable que en este caso esta nombrada como altura. var altura = serie[0] var altura = 15

Y asi a medida que el i va tomando distintas posiciones (0,1,2) hasta que se deje de cumplir la condicion for (var i = 0; i < serie.length; i++)

Lo de los colores tambien se va actualizando de acuerdo al valor que va tomando el i Si tuvieramos el array colores = ["rojo","verde","amarillo"] i = 0 1 2

Tomando el ejemplo del primer comentario quedaria algo asi:

Para i = 0:
    Se cumple que 0 < 3? Sí, entonces
    var altura = serie[0] //Esto en el Array equivale a 15, seria altura = 15
    Luego la funcion continua con esto:
    dibujarRectangulo(x, **y + sumaAltura**, 50, altura, colores[i]);
    dibujarRectangulo(50, **100 + 0**, 50, 15, colores[0]); // var sumaAltura = 0 segun lo que esta inicializado antes del For, y la altura = 15, segun el paso anterior, el color seria rojo porque colores[0] hace referencia a la posicion 0 del array colores. 
     Finalmente la funcion haria lo siguiente:
     sumaAltura = sumaAltura + altura;
     sumaAltura = 0 + 15; // Reemplazamos sumaAltura = 0, y la altura = 15, segun lo que vimos en el paso anterior
     El nuevo valor de sumaAltura = 15;

Ah y aportando a la primera pregunta;

Utilizamos el 'y' por que estamos trabajando en plano "Y" donde se dibuja verticalmente, y recordar que el eje "x" trabaja en forma horizontal.

Y el contador 'i' trabaja con el LOOP 'for' además con los arrays para mover por los elementos [0,1,2,3...n].

muchas gracias a todos

gracias por fin entendi

Buenos días, quisiera consultarles, el "50 " a que hace referencia

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;
    }
}

Hola, hace referencia a la base o ancho de la barra

Hola, disculpen, podría despejarme una duda, en la parte " i < serie.length ", a cual de los arrays invoca la 2009 o 2019?? O no es necesario colocar todo el nombre?? me causa confusión.

Hola en "serie.lenght" se invoca a serie como una variable asi que cuando utilices la función aplicas la invocación en; dibujarBarra(x, y, serie, colores, texto); Ejemplo: dibujarBarra(x, y, serie2019, colores, texto);