Linha dinâmica com eixo temporal

Visão geral

Gráficos dinâmicos de eixo temporal se atualizam continuamente à medida que novos dados chegam, criando uma visualização viva que flui com o tempo. Diferente de gráficos estáticos, eles deslocam a janela visível para focar no trecho mais recente. Essa capacidade em tempo real é essencial para monitoramento, dashboards ao vivo e qualquer cenário em que a percepção imediata das mudanças guie decisões.

Quando usar

Monitoramento e dashboards em tempo real
Dados de sensores ou métricas ao vivo
Análises sobre fluxos contínuos
Feeds permanentes (preços de ações, métricas de servidores)

Não é ideal

Análises históricas estáticas (use um eixo temporal tradicional)
Situações com atualizações pouco frequentes (um refresh manual basta)
Dados de frequência altíssima sem agregação (>1000 atualizações/seg)

Variações-chave

Janela deslizante (intervalo fixo que avança)
Linha que só cresce (histórico completo)
Buffer circular para otimizar memória
Atualizações com redução de frequência para menos redesenhos
Intervalos configuráveis (segundos, minutos etc.)

Casos de uso

Tickers de bolsa mostrando movimentos em tempo real
Monitoramento de performance de servidores e aplicações
Visualização de sensores IoT (temperatura, pressão, umidade)
Acompanhamento de tráfego de rede e uso de banda
Métricas de engajamento em redes sociais em tempo real
Controle de linhas de produção e qualidade

Dados (CSV)

x,y,series
1997-10-03,467,Fake Data
1997-10-04,474,Fake Data
...
1998-07-27,720,Fake Data

Configuração do Gráfico (JSON)

Dicas de design

Mantenha elementos visuais mínimos para não distrair do fluxo de dados
Use paleta consistente e confortável para sessões prolongadas
Garanta legibilidade do texto enquanto o gráfico se desloca
Equilibre suavidade da animação com a frequência de atualização
Adicione transições sutis que guiem o olhar aos dados novos
Mostre claramente o valor atual junto ao histórico

Dicas de desempenho

Use janelas deslizantes para manter número fixo de pontos (evita excesso)
Use notMerge: true ao adicionar dados para evitar re-renderizações completas
Limite atualizações a 1–2 por segundo para estabilidade visual
Faça agregação de dados de altíssima frequência antes de exibir
Considere WebWorkers se precisar processar dados pesados
Desative animações se notar problemas com taxas muito altas de atualização

Perguntas frequentes

Como lidar com dados de alta frequência? Agrupe em intervalos significativos (por exemplo, a cada segundo ou minuto). Dados crus em milissegundos tendem a adicionar ruído e custo de desempenho.

Devo animar o gráfico? Sim, quando atualizar a cada 1–5 segundos; transições suaves ajudam a acompanhar mudanças. Se atualizar mais de 10 vezes por segundo, desative a animação para evitar cintilação.

Qual é o tamanho de janela ideal? Exiba entre 50 e 300 pontos. Menos que isso perde contexto; pontos demais tornam a visualização ilegível. Ajuste conforme o intervalo temporal e a frequência de atualização.

Example

Guide