Documentação HorusBI
Buscar K

Aparência

Gráficos de Barra, Linha e Área (Combo) ​

Este é o Widget mais poderoso e versátil do Horus DataViz. Ele não é apenas um gráfico simples, mas uma "engine" de visualização capaz de criar desde gráficos de barras básicos até displays complexos com eixos múltiplos (Combo Charts) e drill-down hierárquico.

📊 Modos de Operação (Dados) ​

O comportamento do gráfico muda drasticamente dependendo de como a aba Dados é configurada. O Widget detecta e se adapta a 3 modos principais:

1. Comparação Simples (1 Dimensão + N Valores) ​

  • Configuração: 1 Dimensão (Vendedor) e 1 ou mais métricas (Venda, Meta)
  • Resultado: Cria barras/linhas lado a lado para cada vendedor. Se houverem múltiplas métricas, elas serão agrupadas

TIP

O cenário de uso mais comum para esta visualização é a criação de rankings e a comparação direta entre diferentes categorias ou indicadores.

2. Agrupamento Automático (2 Dimensões + 1 Valor) ​

  • Configuração: 2 Dimensões (Ano) e (Estado) e 1 Métrica (Venda)
  • Resultado: O sistema faz um "Pivot" automático
    • O Eixo X representará os Anos
    • Cada Estado se tornará uma série individual (representada por cores diferentes)

TIP

Ideal para analisar a evolução da composição (Vendas por Estado ao longo dos Anos).

3. Multi-KPI (0 Dimensões + N Valores) ​

  • Configuração: Nenhuma dimensão, apenas várias métricas (Total Vendas, Total Custos, Lucro)
  • Resultado: Cria uma barra/ponto único para cada métrica global

TIP

Ideal para comparação de métricas que não possuem relação direta de categoria, como um "Resumo Executivo" visual.

🔀 Combo Charts e Eixos Múltiplos ​

Uma das funções mais avançadas é a capacidade de "misturar" tipos de gráficos e escalas no mesmo visual.

Configuração por Série (Métrica) ​

Ao adicionar métricas na aba Dados, clique no ícone de Engrenagem ao lado de cada medida para abrir o painel avançado:

  1. Tipo de Gráfico Individual: É possível forçar uma métrica específica para se comportar como Linha enquanto os demais dados do gráfico se mantêm como Barra

    • Exemplo: Vendas em Colunas (Volume) e Margem % em Linha (Tendência)

  2. Múltiplos Eixos (Y): O Horus DataViz suporta até 3 eixos verticais independentes

    • Configuração: Na engrenagem da métrica, mude a propriedade Eixo para 2 ou 3

  3. Acumular Valores: Transforma a série em um "Total Acumulado" (Running Total)

TIP

Essencial quando se comparam grandezas diferentes (Faturamento em Milhões R$ no Eixo 1 e Margem Percentual % no Eixo 2)

WARNING

A acumulação soma os valores sequencialmente. Não utilize isso com métricas de porcentagem ou médias, pois a soma matemática (10% + 20% = 30%) raramente faz sentido estatístico.

🔍 Interatividade e Drill-down ​

O Widget oferece caminhos poderosos para o usuário explorar os dados:

1. Drill-down Hierárquico ​

Permite "mergulhar" nos dados (Ano > Mês > Dia)

  • Como configurar:
    1. Adicione a dimensão principal (Ano)
    2. Na área Dimensões Alternativas, adicione os próximos níveis (Mês) e (Dia)
    3. Altere o Comportamento para Drilldown Hierárquico
  • Funcionamento: Quando o Dashboard recebe um filtro da dimensão principal (usuário clica na barra de "2024" ou filtra 2024 no topo), o gráfico automaticamente atualiza para mostrar os Meses de 2024

2. Escolha do Usuário (Alternância) ​

Permite que o próprio usuário decida como quer visualizar o gráfico.

  • Como configurar: Mesmos passos acima, mas altere o Comportamento para Escolha do Usuário
  • Funcionamento: Botões aparecem sobre o gráfico permitindo alterar o eixo X instantaneamente (análise por "Loja", depois alternar para análise por "Vendedor")

🕸️ Radar (Spiderweb) ​

O tipo Radar projeta os dados em eixos radiais que partem do centro.

  • Distinção: Ao selecionar "Radar/Spiderweb" no tipo global, todas as séries obedecem a este formato, impossibilitando a mistura entre Radar e Barras convencionais

TIP

Excelente para análise de "Perfil" ou multiparâmetros, como em uma avaliação de um funcionário em 5 competências diferentes.

🎨 Configuração Visual ​

Cores e Temas ​

  • Coloração por Eixo (Dimensão): Cada barra tem uma cor baseada no seu nome ("Aprovado" verde, "Reprovado" vermelho)
  • Coloração por Valor (Métrica): A cor muda baseada na magnitude ou em regras de negócio (Expressão)

Ajustes Finos ​

  • Largura da Barra: Automático ou Personalizado (para evitar barras largas em gráficos com poucos itens)
  • Empilhamento:
    • Normal: Soma os valores (bom para volume total)
    • 100% (Relativo): Estica tudo para o topo (bom para ver share/participação sem se importar com volume absoluto)
  • Preencher Lacunas de Data: Se o eixo X for temporal, essa opção força o aparecimento de dias/meses que não houveram vendas (valor zero), garantindo que a linha do tempo seja contínua e proporcional

📋 Guia Completo de Configuração ​

Abaixo listamos todos os parâmetros disponíveis no painel de configuração do Widget.

1. Aba Dados ​

Configuração de Séries (Engrenagem no Valor) ​

Ao clicar na engrenagem ao lado de uma métrica, são exibidas opções granulares:

  • Tipo de Coloração:
    • Cor Fixa: Uma única cor sólida para toda a série
    • Cor por Expressão: Coloração dinâmica via JavaScript
  • Escala (Eixo): Define em qual eixo vertical Y a métrica será plotada (1, 2 ou 3). Múltiplos eixos são cruciais para comparar grandezas diferentes (R$ vs %)
  • Tipo de Gráfico: Sobrescreve o tipo global apenas para essa série (O gráfico é de Barras, porém essa métrica em específico será uma Linha)
  • Mostrar valores sobre os dados: Força a exibição (ou ocultação) dos rótulos de dados apenas para essa série
  • Formato do Número: Força a formatação visual (Padrão, Número, Moeda, Porcentagem, Reduzido 1k, Inteiro)
  • Acumular Valores: Soma progressiva dos valores (Running Total). Ideal para análises de evolução acumulada

Configuração de Eixos (Engrenagem na Dimensão) ​

Disponível apenas em gráficos coloridos por dimensão.

  • Mapeamento Manual: Lista os valores encontrados ("SP", "RJ") e permite escolher uma cor fixa para cada um
  • Botão "Carregar Valores": Busca os primeiros 50 registros do banco para popular a lista de cores
  • Cor por Expressão: Regra JavaScript para colorir o eixo X

Outros Campos ​

  • Valores Alternativos: Funciona da mesma forma que as Dimensões Alternativas, mas para métricas. Permite ao usuário trocar o que está vendo (trocar "Vendas" por "Lucro" no mesmo gráfico)
  • Ordenação: É possível ordenar por campos que não estão visíveis no gráfico
    • Exemplo: Mostrar os "Nomes dos Meses" (Jan, Fev) no eixo X, mas ordenar pelo "Número do Mês" logicamente para garantir a sequência temporal correta

2. Aba Visual ​

Aparência Geral ​

  • Estilo:
    • Padrão: Fundo sólido (cor configurável em Cor do Fundo)
    • Transparente: Remove o fundo para integrar ao Dashboard
    • Destacado: Adiciona sombras e bordas
  • Cor do valor sobre os dados: Define a cor global dos textos numéricos (Data Labels)

Layout e Orientação ​

  • Orientação: Vertical (Colunas) ou Horizontal (Barras)
  • Barras/Áreas Empilhadas: Ativa o modo Stacked
    • Empilhamento Relativo: Normaliza as barras para 100% de altura
    • Mostrar valores sobre o total: Exibe o somatório no topo da pilha
    • Mostrar valores para cada barra: Exibe os valores individuais dentro de cada segmento da pilha
  • Largura da Barra:
    • Automático: O sistema calcula a largura baseada no número de itens
    • Personalizado: Permite definir uma largura máxima em pixels (Ideal para estéticas minimalistas)

Legendas e Eixos ​

  • Mostrar Legenda: Habilita/Desabilita a legenda das séries
    • Posição: Topo ou Base
  • Linhas de Grade: Controle independente para grade Vertical (X) e Horizontal (Y)
  • Pontos de marcações (Markers): Exibe "bolinhas" em cima de cada ponto das linhas. Ideal para destacar a precisão dos dados
  • Mostrar Escala: Exibe ou oculta os números do eixo Y lateral
  • Não mostrar valores zerados: Remove do gráfico pontos que tenham valor 0 (ao invés de desenhar uma linha no chão do gráfico)
  • Limitar Registros: Corta o gráfico nos Top N itens (Top 10 Clientes), ordenando pelos valores – máximo de 500

3. Aba Comportamento ​

  • Comportamento Dimensões Alternativas:
    • Escolha do Usuário: Botões para troca manual
    • Drilldown Hierárquico: Navegação por clique (Nível 1 > Nível 2)
  • Preencher lacunas de data: Se houver dimensão de data, caso haja registros fantasmas, serão exibidos com valor zero para datas ausentes
  • Mostrar itens sem valores: Força o banco de dados a trazer registros nulos. Ideal para visualizar cadastros que não tiveram movimentação
  • Campos para Relatório: Define quais colunas aparecerão na tabela de detalhes "Drill-through" ao exportar ou visualizar os dados brutos deste Widget

💡 Dicas de DataViz ​

Para criar Dashboards profissionais, escolha o tipo adequado para cada dado:

TIP

  • Linhas: Use exclusivamente para dados contínuos/temporais (Dias, Meses, Anos). Linhas indicam conectividade e tendência. Usar linhas para dados categóricos (Produtos) é um erro conceitual, pois não existe "transição" entre um produto e outro.
  • Barras (Horizontais): Melhores para rankings com muitos itens ou quando os nomes (rótulos) são longos e difíceis de serem interpretados na vertical.
  • Colunas (Verticais): Ótimas para comparação de poucos itens (fácil comparação de altura) ou séries temporais curtas.
  • Eixos Duplos: Utilize-os com moderação. Se as linhas se cruzam demais, podem gerar confusão. Tente manter no máximo 2 eixos para clareza.