Gráficos
Sete tipos de gráfico, desenhados em SVG no servidor — sem biblioteca e sem CDN.
A forma curta#
V.grafico_linha(dados, x := "mes", y := "receita")
V.grafico_barras(dados, x := "mes", y := ["receita", "meta"])
V.grafico_area(dados, x := "dia", y := "acumulado")
V.grafico_dispersao(dados, x := "peso", y := "altura")
V.grafico_pizza(dados, x := "categoria", y := "valor")
V.grafico_rosca(dados, x := "categoria", y := "valor")
V.grafico_barras_h(dados, x := "produto", y := "vendas")
V.histograma(dados, campo := "idade", faixas := 12)Sem x e y, a Vitrine adivinha: a primeira coluna não numérica vira o eixo, e as numéricas viram as séries. É o suficiente para um V.grafico_linha(vendas) funcionar na primeira tentativa.
A forma construída#
Quando há mais a dizer:
g := V.grafico("barras", vendas)
g.eixo_x("mes")
g.eixo_y(["receita", "meta"])
g.titulo("Vendas por período")
g.cores(["#FED403", "#0F62FE"])
g.altura(340)
g.empilhar(yes)
g.rotular(yes)
g.limite_y(0, 1000)
V.desenhar(g)Cada método devolve o próprio gráfico, então também dá para encadear. Nada aparece na página até V.desenhar.
| Método | Faz |
|---|---|
eixo_x(campo) | a coluna das categorias |
eixo_y(campo) | uma coluna, ou um cluster delas |
serie(campo) | acrescenta mais uma ao mesmo gráfico |
titulo(texto) | o título acima |
cores(cluster) | a paleta |
altura(px) | a altura do desenho |
empilhar(yes) | barras somadas em vez de lado a lado |
suavizar(yes) | curva em vez de linha reta |
rotular(yes) | o valor escrito sobre cada barra |
legenda(no) · grade(no) | desliga a legenda ou a grade |
limite_y(min, max) | fixa a escala |
O que os dados precisam parecer#
As mesmas três formas de V.tabela, mais uma quarta que um group_by costuma devolver:
[{"mes": "Jan", "receita": 120}] // cluster de vaults
{"mes": ["Jan"], "receita": [120]} // vault de colunas
[["Jan", 120]] // matriz
{"Sul": 120, "Norte": 90} // rótulo → númeroPor que SVG no servidor#
Uma dependência de JavaScript obrigaria a página a buscar centenas de kilobytes de uma CDN, o que quebra qualquer aplicação que rode numa rede fechada — e é exatamente onde painel de dados costuma rodar.
SVG também imprime, escala, é legível por leitor de tela, e o arquivo que sai daqui é o mesmo em qualquer navegador. A escala do eixo é arredondada para um número redondo: um eixo que vai até 1 237 não ajuda ninguém a ler o gráfico; até 1 500, com marcas de 500 em 500, ajuda.