Blog
Gráficos a partir de dados

CSV para gráfico de cascata online

Um gráfico de cascata mostra como você saiu de um número e chegou a outro. Cada barra flutua na altura em que a anterior terminou, então a imagem se lê como um saldo corrente: a receita entra, os custos puxam para baixo e a última barra desce até o chão para mostrar o que sobrou.

Seus dados não saem deste dispositivo

Seus dados

Cole uma tabela direto do Excel ou do Planilhas Google, ou solte um arquivo CSV. Nada é enviado: todo o cálculo acontece dentro desta aba do navegador.

CSV, TSV ou texto simples. Arquivos salvos em windows-1251 são detectados e relidos automaticamente, então os cabeçalhos não viram caracteres estranhos.

Opções de leitura

Colunas

Resultado

A biblioteca de desenho é baixada apenas ao pressionar o botão e apenas nesta página.

Esta página não tem lado servidor nenhum. A tabela colada é processada por JavaScript dentro do seu próprio navegador, o gráfico é desenhado num elemento canvas da sua máquina e o arquivo de exportação é montado localmente. Nada é enviado, armazenado ou gravado em qualquer log. Você pode desconectar a rede depois que a página carregar e tudo continuará funcionando — é a forma mais simples de verificar você mesmo.

Fatos e limites do método

Ideal para Explicar a diferença entre dois números por meio de uma sequência de mudanças
Formato de entrada Variações com sinal, não níveis absolutos: positivos somam, negativos subtraem
Barra de total Adicionada automaticamente no fim, desenhada do zero na cor da marca
Código de cores Verde para aumentos, vermelho para quedas, azul para o total
Limite de etapas Cerca de 12; além disso o saldo corrente fica difícil de acompanhar
Saída PNG em escala 2×, mais CSV com cada etapa e o saldo corrente

Quando induz ao erro

Como é calculado

Sua coluna de valores é lida como uma lista de variações com sinal. A primeira barra começa no zero, e cada barra seguinte começa onde a anterior terminou, então a borda superior da última barra de variação é o saldo corrente naquele ponto.

Uma barra final é acrescentada automaticamente, desenhada do zero até o total acumulado. É a única barra, além da primeira, ancorada ao eixo, e tem cor diferente para marcar que é um resultado e não uma etapa.

As barras são coloridas pelo sinal: aumentos em verde, quedas em vermelho, o total em azul. Como a cor sozinha não é sinal confiável para todo leitor, a direção também aparece na geometria: uma barra de queda pende abaixo da borda superior anterior.

O CSV exportado contém três colunas: o nome da etapa, sua variação com sinal e o saldo corrente depois dela. Essa coluna de saldo é o número que as pessoas normalmente querem e quase nunca conseguem extrair de uma imagem.

Perguntas e respostas

Devo inserir valores absolutos ou variações?

Variações, com sinal. Receita como positivo, cada custo como negativo. Se inserir níveis absolutos, o gráfico vai empilhá-los num total crescente sem sentido em vez de uma ponte.

De onde vem a barra final de total?

Ela é calculada, não lida dos seus dados: é a soma de todas as variações inseridas. Se não bater com o resultado esperado, a divergência está na entrada e não no gráfico.

A ordem das etapas importa?

Visualmente, enormemente. A aritmética é a mesma em qualquer ordem, mas a história não: a etapa que empurra o saldo abaixo de zero parece a culpada. Escolha a ordem de propósito e explique por quê.

Posso mostrar uma etapa que soma e subtrai ao mesmo tempo?

Não numa única barra. Divida em duas etapas, uma positiva e uma negativa — o que também fica mais claro para o leitor.

Meus dados são enviados?

Não. Tudo é calculado no seu navegador, inclusive o saldo corrente.

Ferramentas relacionadas

Todas as ferramentas