Gráficos

Um widget de gráfico tem três decisões: o tipo, o mapeamento dos campos e as opções. A lista completa dos catorze tipos e do que cada um suporta está em Tipos de gráfico.

O mapeamento

Depois de o conjunto de dados estar definido, o gráfico oferece as colunas que a consulta devolve. Há três lugares onde as colocar:

Campo	O que é
Categoria	O eixo horizontal, ou as fatias num circular
Valores	Uma ou mais colunas numéricas; cada uma é uma série
Série	Uma coluna cujos valores distintos geram séries, pivotando o primeiro valor

Um gráfico de vendas por mês tem categoria mes e valores [vendas]. Acrescentar custo aos valores dá duas linhas comparáveis. Em alternativa, pôr canal como série dá uma linha por canal.

Categoria e série não são intermutáveis

Com categoria mes e série canal, a consulta tem de devolver as duas dimensões — uma linha por mês e por canal. Se a consulta só agrupar por mês, a série não tem por onde se dividir.

Escolher o tipo

Barras — comparar categorias. É a escolha certa muito mais vezes do que parece. Horizontais quando os nomes são compridos (regiões, produtos).

Linhas — evolução no tempo. Só faz sentido quando o eixo tem ordem natural.

Área — como linhas, mas destacando o volume acumulado. Empilhada, mostra a composição ao longo do tempo.

Circular — partes de um todo, com poucas fatias. Com mais de seis categorias, barras lêem-se melhor. O modo donut liberta o centro e é ligeiramente mais legível.

Dispersão — relação entre duas grandezas numéricas.

Radar — comparar poucas entidades em várias dimensões. Bonito e frequentemente ilegível: use com três ou quatro séries no máximo.

Funil — etapas com perda entre elas.

Velocímetro — um valor contra uma escala. Na prática, um KPI ou um progresso comunicam melhor.

Mapa de calor — densidade em duas dimensões (dia da semana × hora).

Treemap e sunburst — hierarquia por área.

Caixa de bigodes — distribuição e dispersão.

Velas — séries financeiras de abertura, máximo, mínimo e fecho.

Sankey — fluxos entre nós.

As opções

O inspector só mostra as opções que o tipo escolhido suporta.

Legenda — ligada por omissão, com posição configurável. Mantenha-a: três das oito cores da paleta têm contraste baixo, e a legenda é o que garante que se percebe qual é qual. Se tapar o desenho, ver Espaçamento.

Rótulos — o valor escrito sobre cada ponto ou barra. Excelente em gráficos com poucas barras; ruído em séries temporais longas.

Empilhar — soma as séries em vez de as pôr lado a lado. Útil para composição, mau para comparar séries individuais.

Suavizar — arredonda as linhas. Cosmético, e engana ligeiramente sobre a variação entre pontos.

Horizontal — deita as barras.

Formato dos valores — nenhum, número ou compacto, com casas decimais, prefixo e sufixo. Aplica-se ao eixo, aos rótulos e à dica.

Limites do eixo — mínimo e máximo fixos. Um eixo que não começa em zero exagera diferenças; usar com intenção.

Escala logarítmica — para grandezas com ordens de magnitude diferentes.

Espaçamento: a legenda contra o gráfico

A legenda e o desenho partilham a mesma caixa. Não há um mecanismo que as afaste uma da outra: quem se atravessar fica por cima. Uma legenda com seis séries ocupa duas linhas e cai em cima dos eixos — e aumentar o widget não resolve, porque a legenda cresce com ele.

Por omissão reserva-se espaço do lado onde a legenda está: com a legenda no topo, o gráfico começa mais abaixo; ao fundo, acaba mais acima. Também se reserva espaço para os títulos dos eixos. Chega na maioria dos casos.

Quando não chega, há duas formas de o corrigir — a mesma medida, dois caminhos.

Arrastar no editor

Com o gráfico seleccionado, aparece por cima dele um rectângulo tracejado: a área do gráfico, o espaço que o desenho ocupa.

• Arraste uma aresta para dar ou tirar espaço desse lado. O gráfico redesenha-se enquanto arrasta, com a medida em píxeis à vista.
• Arraste a pega da legenda para onde a quiser. Largada perto de uma aresta, é essa que passa a ser a sua, à distância a que ficou — muda de lado e de afastamento no mesmo gesto.

Ao largar, o valor fica gravado e entra no histórico de anular/refazer.

O meio de cada aresta é do widget

As pegas de cada aresta têm o meio livre, porque é lá que ficam as pegas de redimensionar o próprio widget. Agarre a aresta um pouco ao lado do centro.

Escrever a medida

No inspector, o bloco Espaçamento tem os mesmos valores em píxeis:

Campo	O que faz
Legenda: distância à margem	Afasta a legenda da margem do widget — e o gráfico acompanha, para não ficarem em cima um do outro
Margens da área do gráfico	Topo, fundo, esquerda e direita: espaço entre cada margem do widget e o desenho. Aumentar = o gráfico encolhe desse lado

Campo vazio = automático. É o caminho a usar quando quer o mesmo valor exacto em vários gráficos.

Nem todos os tipos têm área ajustável

Barras, linhas, área, dispersão, caixa de bigodes, velas e mapa de calor ajustam-se pela grelha dos eixos. Circular, funil, treemap e sankey ajustam-se pela caixa da série — um donut também desce quando a legenda ocupa o topo.

Radar, velocímetro e sunburst posicionam-se por centro e raio, que dependem do tamanho real em píxeis: nesses não se oferecem margens, só o afastamento da legenda.

Opções avançadas (código)

Para o que a interface não exprime — várias grelhas, séries mistas de conjuntos diferentes, dicas à medida — há um editor de código que recebe o option gerado e devolve o que lhe quer acrescentar:

return { series: [{ label: { fontSize: 14 } }] };

O que devolve é fundido por cima do gerado. Para construir o option inteiro de raiz, devolva-o com $replace: true.

O ctx dá acesso aos parâmetros do ecrã (ctx.params), às linhas de qualquer consulta do widget (ctx.rowsOf("nome")) e aos anexos do dashboard (ctx.asset("asset:…")) — ver Imagens e ficheiros.

Mudar a posição de um componente

As chaves de posição de uma legenda excluem-se: dar-lhe bottom quando o gerado tem top deixaria as duas e o ECharts ficaria pelo top. Definir uma delas limpa as outras, portanto legend: { bottom: 0 } move mesmo a legenda. O mesmo vale para o título, a barra de ferramentas e o mapa visual; a grelha não, que aí as quatro são a caixa.

Um erro no código nunca parte o ecrã: o gráfico volta ao option gerado e o erro fica na consola.

Segundo eixo

Quando duas séries têm grandezas muito diferentes — vendas em milhares e margem em percentagem — a série pequena fica esmagada contra o zero.

A opção de segundo eixo resolve: escolhem-se as séries que vão para o eixo da direita e dá-se-lhe um título. É também assim que se combinam barras com uma linha, escolhendo o tipo por série.

Dois eixos exigem cuidado

Duas escalas diferentes no mesmo gráfico permitem sugerir correlações que não existem, conforme os limites escolhidos. Use quando as duas séries são mesmo a mesma história; caso contrário, dois gráficos.

Cores

Por omissão, o gráfico usa a paleta do tema: oito cores por ordem fixa, com os pares vizinhos verificados para continuarem distinguíveis por quem tem daltonismo.

Pode definir-se uma paleta própria por gráfico. Se o fizer, verifique o resultado no tema claro e no escuro.

Interacção

Um gráfico responde ao rato de três formas:

• Dica ao passar sobre um ponto;
• Legenda clicável, que esconde e mostra séries;
• Clique num ponto, que pode filtrar outro widget do mesmo ecrã ou abrir um ecrã de detalhe.

Ver Cruzamento entre widgets e Drill para o detalhe.

Erros frequentes

Um gráfico para um número. Se há um só valor, é um KPI.

Demasiadas séries. Acima de cinco ou seis, nem a legenda salva. Agregue ou divida em dois gráficos. Se a legenda passar a ocupar duas linhas e tapar o desenho, o espaçamento corrige-se — mas o problema de fundo é o número de séries.

Séries temporais densas. Mais de sessenta pontos numa linha é uma mancha. Suba a granularidade — ver Dimensões e medidas.

Circular com quinze fatias. Barras ordenadas por valor comunicam o mesmo em metade do espaço.