Não consegui entender o por que de criar uma variável "i".

Felipe,

A variável "i " do for, é um contador, ela vai de 0 até o tamanho da serie(array).

Se o array tiver o tamanho 5, ela executa o código 5 vezes e altera o valor da variável altura.

Espero ter ajudado.

Ola Felipe,

No caso deste exercício temos 3 vetores e cada um possui 4 valores. São eles:

serie2015 = [50, 25, 20, 5];
serie2016 = [65, 20, 13, 2];
cores = ['blue', 'green', 'yellow', 'red'];

Cada informação que está contido dento de cada vetor tem sua localização (índice). Esta localização começa na posição "0" e indo até a posição "3", porque cada vetor possui somente "4" elementos.

Para conseguimos extrair cada elemento destes vetores, utilizamos o índice de cada posição conforme mostrado abaixo:

serie2015[0] = 50
serie2015[1] = 25
serie2015[2] = 20
serie2015[3] = 5

serie2016[0] = 65
serie2016[1] = 20
serie2016[2] = 13
serie2016[3] = 2

cores[0] = 'blue'
cores[1] = 'green'
cores[2] = 'yellow'
cores[3] = 'red'

Antes de falar no código que você colocou, temos a sintaxe "length" que corresponde ao tamanho do vetor que no caso, como mencionei antes é "4" para todos os 3 vetores.

O código abaixo caminha pelo vetor utilizando o índice "i" que começa em "0" e quando chega no "4" ela termina a repetição (looping), pois para continuar dentro da repetição é necessário atender ao critério "i < serie.length", e quando "i" = 4, este critério não será mais verdadeiro.

for (var i = 0; i < serie.length; i++) {
            var altura = serie[i];
            desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);
            somaAltura = somaAltura + altura;

Toda vez que o "i" mudar ele pegara a informação dentro de cada vetor correspondente aquela posição.

Ex: quando ele começar com "i"=0, as informações substituídas, serão:

for (var i = 0; 0 < 4; 1) {
            var altura = serie[0]; // onde serie[0] podera ser serie2015[0] = 50 ou serie2016[0] = 65
            desenhaRetangulo(x, y + somaAltura, 50, altura, cores[0]); // cores[0] = 'blue'
            somaAltura = somaAltura + altura;

Quando mencionei que "serie[0] poderá ser serie2015[0] = 50 ou serie2016[0] = 65", vai depender de quais valores a função "desenhaBarra" estará trabalhando. Se a função for desenhaBarra(50, 50, serie2015, cores, '2015'), ele pegara os valores do vetor serie2015, se for desenhaBarra(150, 50, serie2016, cores, '2016') ele pegara os valores contidos no vetor serie2016.

Espero ter ajudado e não confundido sua cabeça. rsrsrs.