Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Gráfico(google charts)

Qual função para deixar o gráfico atualizando os dados em tempo real?

3 respostas

Fala Lucas, tudo bom?

Você pode utilizar 3 coisas:

  • setInterval: É a solução mais simples, basta que você digite o código setInterval( function() { console.log('Executado a cada 1 segundo') }, 1000 ) (no seu terminal mesmo) e o console.log ou qualquer código dentro da function no setTimeout será executada a cada 1 segundo

  • setTimeOut Recursivo: O setInterval é bem bacana e útil, porém em um projeto no dia a dia ele tem alguns probleminhas de performance que lidam com coisas específicas da plataforma JavaScript, uma solução mais pro para o dia a dia seria usar um setTimeout recursivo: https://javascript.info/settimeout-setinterval

  • sockets: Ter um backend com sockets que sirva os dados para você nesse formato (algo como um chat https://socket.io/get-started/chat) No curso de Node aqui a alura você também tem um exemplo de como trabalhar com sockets e disparar coisas automaticamente no front end.

    • Essa solução é bem boa mas exige um conhecimento de back-end e tem um certo custo de servidor. O sistema que atualiza as eleições em diversos sites por exemplo, utiliza o formato do setTimeout recursivo por ter um menor custo (considerando a quantidade de usuários é mais fácil escalar lidando com mais requests a cada 1 segundo ou a cada 10 segundos do que com uma máquina com infra de um chat)
solução!

Oi Lucas,

você pode usar qualquer uma dessas soluções que o Mário citou, inclusive testá-las e ver qual gosta mais.

Sobre o setInterval, ele vai ter um delayzinho de, por exemplo, 5 segundos na hora de atualizar, se isso não for um problema, ele seria a função mais indicada.

Outra coisa, se você tiver muitos gráficos em uma página, por ter muitos setIntervals, ela pode travar ao carregar, nesse caso, é mais interessante usar um setTimeOut.

E, se os dados forem muito "quentes", como na bolsa de valores e tiverem que ser atualizados imediatamente, um socket pode ser mais indicado. Sobre o socket, mostramos como usá-lo na parte 3 do curso de Google Charts.

Veja qual se encaixa melhor e, se quiser, pode falar pra gente ou mostrar como fez! Mande bala aí.

Obrigado