Gráfico de Barras

1. Geral

O Gráfico de Barras é um componente avançado para criar gráficos interativos. Sua principal finalidade não é apenas exibir dados, mas sim criar uma ferramenta de análise multidimensional, permitindo que o usuário explore os dados e aprofunde a visualização (Drill Anywhere).

2. Como configurar 

A configuração do componente é feita através de um conjunto de variáveis. Abaixo estão as suas funcionalidades e como configurá-las.

3. Configurações Gerais

3.1. Título 

Define o título que aparece no topo do componente.

3.2. Subtítulo

Define o subtítulo que aparece no topo do componente.

3.3. Exibição da Borda

Adiciona uma borda e sombra ao redor do componente.

3.4. Raio de Arredondamento das Bordas

Define o arredondamento dos cantos das barras do componente. Insira um número que representa a intensidade do arredondamento. Se você não definir a variável ou usar o valor "0", os cantos serão quadrados (90 graus).

3.5. Prefixo

Adiciona um prefixo aos valores (exemplo: "R$").

3.6. Orientação

Define a direção das barras do gráfico. Valores Possíveis:

• Vertical: As barras crescem de baixo para cima. É o formato de gráfico de barras clássico.

• Horizontal: As barras crescem da esquerda para a direita. Ideal para quando os rótulos do eixo são muito longos, pois oferece mais espaço para o texto.

3.7. Orientação dos Dados do Eixo X

Controla a rotação dos rótulos (textos) no eixo X (horizontal). É extremamente útil para evitar que os textos se sobreponham quando são longos ou numerosos. Valores Possíveis:

• Horizontal: Os textos são escritos normalmente, na horizontal.

• Diagonal: Os textos são inclinados em 45 graus.

• Vertical: Os textos são escritos na vertical.

4. Barra de Rolagem e Zoom

4.1. Tipo de Exibição

Quando ativada (Com Barra de Zoom e Rolagem), esta variável adiciona uma ferramenta de seleção de intervalo (conhecida como “brush”) na parte inferior do gráfico. Ela exibe uma miniatura de todo o período do gráfico, permitindo que o usuário arraste e selecione uma janela específica para dar zoom.

É ideal para gráficos com muitos pontos de dados no eixo X, como vendas diárias ao longo de um ano ou dados mensais de vários anos. Em vez de poluir a tela com centenas de barras, o usuário pode facilmente focar em um período de interesse (exemplo: o último trimestre).

Valores Possíveis:

• Com Barra de Zoom e Rolagem: Ativa a ferramenta de zoom.

• Sem Barra de Zoom e Rolagem: A ferramenta não é exibida.

• Modelo Padrão: A barra de zoom é exibida e o gráfico inicia focado nas primeiras N categorias — por padrão, 12. Se houver menos, ou igual ao número de categorias definido, todo o período é mostrado. Você pode alterar esse valor inicial preenchendo Valor Inicial da Barra (Modelo Padrão) (exemplo: 6, 24). O usuário pode ajustar o intervalo a qualquer momento, arrastando as alças da barra.

4.2. Valor Inicial da Barra (Modelo Padrão)

Esta variável funciona em conjunto com Tipo de Exibição: Modelo Padrão. Ela define o número de pontos de dados que virão pré-selecionados na barra de zoom quando o gráfico carregar pela primeira vez. 

5. Dados

5.1. Query

Esta variável contém a consulta SQL completa que busca os dados brutos no banco de dados. É a fonte de informação para o seu gráfico. Você deve escrever uma consulta SQL que retorne pelo menos duas colunas:

• Uma coluna com os rótulos/categorias que você quer exibir no eixo X (exemplo: meses, nomes de vendedores, produtos).

• Uma ou mais colunas com os valores numéricos que determinarão o tamanho das barras (exemplo: total de vendas, quantidade de produtos).

5.2. Coluna

Esta variável atua como um mapeamento. Ela informa ao gráfico qual das colunas, retornadas pela sua query, deve ser usada como o eixo X (o eixo horizontal, das categorias). Você deve preencher este campo com o nome exato (ou o alias) da coluna da sua query que contém os rótulos.

5.3. Séries

Esta variável define quais dados numéricos serão desenhados no gráfico. Mapeia as colunas de valor da sua query para o eixo Y do gráfico. Configure um array JSON onde cada objeto é uma série e contém:

serieColumn: O nome da coluna da query com o valor numérico.

titulo: O nome da série que aparece na legenda.

color: A cor da série em formato HEX (exemplo: "#3B82F6").

order: Define a ordem de exibição das séries. Em gráficos empilhados, dita o empilhamento.

marker: coloque true na série principal para destacar valores (o prefixo é aplicado no label).

5.4. Opções de Visualização

Esta é a variável que transforma um gráfico estático em uma ferramenta de análise interativa. Ela cria um menu dropdown no topo do gráfico, permitindo que o usuário alterne a forma como os dados são agrupados. Configure um array JSON onde cada objeto representa uma opção do menu e contém:

nome: O texto da opção do dropdown (exemplo: “Vendas por Mês”).

query: A consulta SQL para aquela visão.

axisColumn: A coluna da query que será o eixo X (a dimensão).

idColumn: A coluna da query com o ID a ser passado para o drill-down.

drillVariable: A variável que receberá o valor do idColumn (exemplo: :VAR_MES_ID).

6. Drill

6.1. Opções de Driil 

Esta é a variável mais importante para a interatividade. Ela cria o menu de opções que aparece quando o usuário clica em uma barra do gráfico. Cada opção nesse menu permite aprofundar a análise dos dados por uma nova dimensão.

Configure um array de objetos JSON, onde cada objeto é uma opção de drill e deve conter:

label: O texto que o usuário verá no menu (exemplo: “Detalhar por Status”).

drillQuery: A consulta SQL que será executada para gerar o próximo nível do gráfico.

drillSeries: JSON que configura as séries para a visão de drill. Usa a mesma configuração do JSON do tópico 5.3. Séries.

Exemplo:

[
   {
      "serieColumn":"VENDAS",
      "titulo":"Vendas",
      "color":"#3b82f6",
      "marker":true
   },
   {
      "serieColumn":"META",
      "titulo":"Meta",
      "color":"#a8a29e",
      "marker":false
   }
]

drillAxisColumn: A coluna da drillQuery que será o novo eixo X.

drillIdColumn: A coluna de ID da drillQuery para o próximo nível de drill.

drillVariable: A variável que receberá o ID deste nível de drill.

6.2. Variável para Drill

É o nome de uma variável (exemplo: :VAR_MES_SELECIONADO) que receberá o valor da variável ID da Coluna quando o usuário clicar em uma barra.

Como funciona: Se o usuário clica na barra “Janeiro” (cujo ID_MES é 1), a variável :VAR_MES_SELECIONADO passa a valer 1. A drillQuery do próximo nível usará essa variável em sua cláusula WHERE para filtrar os dados (exemplo: WHERE MES = :VAR_MES_SELECIONADO).

6.3. ID da Coluna

Aponta para a coluna da sua query atual que contém o ID de cada barra. Exemplo: Se seu gráfico mostra vendas por mês, a axisColumn seria NOME_MES, e a idColumn poderia ser ID_MES (contendo 1, 2, 3…).

6.4. Label do Eixo

É uma variável simples que define um título descritivo para o eixo X (o eixo horizontal). Use para dar mais contexto ao usuário. Se o eixo X mostra os meses, a Label do Eixo poderia ser “Mês de Referência”.

7. Reatividade

Mantenha a reatividade manual ativada: ela atualiza automaticamente a interface sempre que variáveis, queries ou filtros mudam — sem “piscadas” ou recarregamentos completos — garantindo experiência fluida, dados sincronizados e preservando o contexto.

8. Configurações Avançadas

Se quiser explorar opções avançadas de personalização, acesse nossa documentação. Lá você encontrará instruções para configurações mais complexas para adaptar o componente exatamente às suas necessidades.