DATTABI — Charts Gallery
A Charts Gallery é o catálogo navegável de todos os visuais do DATTABI, com um exemplo ilustrativo ao vivo de cada gráfico. Escolher o visual certo para cada pergunta é o que separa um dashboard que informa de um que confunde — e aqui você vê como cada gráfico se comporta antes de configurar o seu, em vez de descobrir depois de montar o painel.
Acesse pelo item Charts Gallery do menu — ou abra /dattabi-charts-demo.html direto.
Visuais disponíveis
| Categoria | Visual | Tipo | Uso típico |
|---|---|---|---|
| Categorical | Barras | bar | comparação de categorias |
| Barras horizontais | bar-horizontal | rótulos longos | |
| Colunas empilhadas | column (stacked) | composição por categoria | |
| Temporal | Linha | line | tendência |
| Área | area | tendência + volume | |
| Calendar heatmap | calendar-heatmap | atividade diária anual | |
| Composition | Pizza | pie | composição (max 6) |
| Donut | donut | composição + KPI central | |
| Metric | KPI | kpi | número único + trend |
| Gauge | gauge | KPI com max conhecido | |
| Correlation | Dispersão | scatter | 2 variáveis numéricas |
| Bubble | bubble | 3ª dimensão via tamanho | |
| Distribution | Histograma | histogram | distribuição 1 variável |
| Boxplot | boxplot | quartis + outliers | |
| Matrix | Heatmap | heatmap | matriz 2D + intensidade |
| Flow | Sankey | sankey | fluxo origem -> destino |
| Hierarchy | Treemap | treemap | hierarquia proporcional |
| Pipeline | Funil | funnel | conversão por estágio |
| Variance | Waterfall | waterfall | variação acumulada |
| Comparison | Radar | radar | comparação multivariada |
| Financial | Candlestick | candlestick | OHLC |
| Text | Wordcloud | wordcloud | frequência de termos |
| Network | Grafo | graph | rede de nodes (D3 force) |
| Tabular | Tabela | table | linhas com sort/page |
| Geo | Mapa OSM | map | OpenStreetMap (sem API key) |
| Google Maps | map-google | Google Maps (com API key) |
Detalhes dos visuais de mapa no guia de mapas.
Como criar um visual
- Abra um dashboard e entre no modo de edição.
- Arraste um visual da paleta lateral para o canvas.
- No painel direito, ligue as colunas do Dataset aos canais do visual:
bar/line/area: X, Y, Series.pie/donut/treemap/funnel/waterfall: Label, Value.kpi/gauge: Value (+ Label opcional).scatter/bubble: X, Y, Series.sankey/graph: Source, Target, Value.map/map-google: Lat, Lng, Value.
- Configure a agregação (
SUM,COUNT,AVG,MIN,MAX, etc). - Clique em Salvar — o dashboard re-renderiza automaticamente.
Tema e aparência
Todos os visuais seguem o tema Material Design 3 da plataforma, usando as mesmas variáveis de cor e tipografia do restante do produto. O tema claro e o escuro alternam sem rebuild: ao trocar o tema, os visuais recebem o aviso e se redesenham na hora.
Drill-down
Os visuais bar e line aceitam drillX nas ligações de colunas para navegar por uma hierarquia — duplo clique desce um nível. Veja o guia de drill-down.
Filtro cruzado
Um clique simples numa barra, fatia ou ponto emite o filtro para todos os outros visuais do dashboard. Veja o guia de filtro cruzado.
Exemplo prático — escolhendo o visual pela pergunta
- "Quais classes concentram os processos?" → compare Barras e Treemap com os exemplos ao vivo da galeria; com poucas categorias e rótulos longos, Barras horizontais costuma vencer.
- "Como o volume evolui no mês?" → Linha para a tendência; Área se o volume acumulado também importa.
- "Qual é o número de hoje?" → KPI; use Gauge quando existe um máximo conhecido para comparar.