[Front-End] JavaScript - Criando gráficos com Google Charts

[@carlosnani]

Com certeza vai me ajudar em um projeto que preciso entregar. Obrigado.

[@MatheusCastiglioni]

Magina Carlos.

[@felipes.damasceno2022]

MACHO, OBRIGADO D+. OTIMO VÍDEO, DEU PARA ENTENDER DIREITINHO CADA PARTE DO CÓDIGO. AJUDOU PRA CARAMBA.

[@MatheusCastiglioni]

Valeu Felipe

[@danielilha6791]

Excelente explicação! Obrigado!

[@MatheusCastiglioni]

obrigado Daniel

[@sergiosilva1140]

Você é extremamente didático. O seu nivel de detalhamento é muito bom, afinal de contas, muitos, como eu, ainda não tem o domínio do Javascript. Parabéns mais uma vez.

[@MatheusCastiglioni]

obrigado Sérgio

[@cristianomuroni8268]

sua aula é bem explicativa faça mais man

[@MatheusCastiglioni]

Obrigado Cristiano, farei sim

[@weslenvasconcelos5437]

helpou de mais

[@MatheusCastiglioni]

Show de bola Weslen

[@JaisonJFranklin]

Perfeito, camarada! Tentar adaptar isso no meu app em electron. 👍

[@MatheusCastiglioni]

Obrigado Jaison.

[@ReTheBossGame]

Parabéns pelo video muito bom e direto. Seria possível usar informações de um Banco de dados?

[@MatheusCastiglioni]

Valeu Renato, seria possível sim, sem problemas. Nesse caso tu precisaria requisitar os dados de uma API e passar os dados para a criação/configuração dos gráficos.

[@Ericsson1181]

Incrivelmente Simples! Excelente explicação , Muuuuuuuto obrigado mesmo...

[@MatheusCastiglioni]

Obrigado Ericsson

[@Pablofb1014]

Muito bom Matheus, explicação simples e prática. Parabéns!

[@MatheusCastiglioni]

Obrigado Pablo, que bom que gostou.

[@bekdigital]

Como muda as cores ?

[@MatheusCastiglioni]

Fala Bek, dá uma olhadinha aqui: developers.google.com/chart/interactive/docs/gallery/barchart#coloring-bars, tu pode passar um terceiro parâmetro refereniando a cor em si.

[@marcosmelo1108]

Matheus, muito foda o seu vídeo, explicação. Parabéns de verdade!!!

[@MatheusCastiglioni]

Obrigado Marcos, fico muito feliz que tenha gostado

[@pedrinho5810]

Como que eu faço para mudar a cor de fundo do gráfico?

[@MatheusCastiglioni]

Fala Pedrinho, dá uma olhadinha aqui: developers.google.com/chart/interactive/docs/gallery/barchart#coloring-bars, tu pode passar um terceiro parâmetro refereniando a cor em si.

[@joycerodrigues5389]

É possível o usuário inserir a entrada de dados do gráfico?

[@MatheusCastiglioni]

Fala Joyce, é possível sim, vai precisar de um pouco de JavaScript e algumas manipulações

[@TheFullPlay]

Cara como eu faria no data pra trazer dados de um arquivo csv externo?

[@MatheusCastiglioni]

Fala meu querido, nesse caso tu vai precisar fazer o seguinte: 1. Ter um endpoint na sua API (back-end) para realizar uma requisição GET 2. A API deve ler o conteúdo do CSV e transformar em JSON 3. A API deve retornar uma estrutura para tu popular o data dos gráficos. 4. Uma vez que o front-end tem a resposta da API, passe ela para o data (se necessitar adaptar algo, faça também)

[@felipes.damasceno2022]

Só uma dúdiva: Como que se pega os dados de uma planilha google?

[@MatheusCastiglioni]

Fala Felipe, nesse caso o ideal seria você ter uma API integrada com o Google Sheets e expor um endpoint para ser consumido no lado do cliente.

[@felipes.damasceno2022]

@@MatheusCastiglioni Obrigado por responder mas poderia detalhar como eu faria isso?

[@MatheusCastiglioni]

@@felipes.damasceno2022 Seria algo assim: developers.google.com/sheets/api/quickstart/nodejs. Existe uma API do Sheets.

[@patrick7as]

muito boa a aula!

[@MatheusCastiglioni]

Obrigado Patrick

[@Alth33r]

parabéns! ficou muito bom o vídeo

[@MatheusCastiglioni]

Obrigado Thiago

[@ErickFrancoRodrigues]

Aprendi mais com você do que em um semestre na faculdade, Sabe como deixar esse tipo de gráfico automático? Tipo, quando cadastro algo ele já puxa automaticamente os valores e já me entrega no gráfico?em tempo real

[@MatheusCastiglioni]

Fala Devops, nesse caso tu precisa de um back-end para realizar a requisição e obter os dados de forma dinâmica para informá-los durante a criação dos gráficos.

[@IagoBotelho]

da pra fazer sim, eu fiz no meu tcc, com php

[@gabrielteodoro7150]

valeu lindeza

[@MatheusCastiglioni]

Magina

[@nokiu22]

Não entendi a parte da briotéca...

[@MatheusCastiglioni]

Fala Nokiu, e eu não entendi a dúvida kkkk

[@nokiu22]

@@MatheusCastiglioni kkkkkkkkkkkk Parabéns pelo vídeo! As suas aulas são tops de mais

[@LaercioLopesLL]

Muito bom, estava vendo um tutorial com as adições de linhas e colunas de formas muito mais complicadas, acredito que o método arrayToDataTable seja o melhor. Muito Obrigado!

[@MatheusCastiglioni]

Obrigado Laércio.

[@_carlaque]

parabéns!!! muito bom o vídeo vlw🤙🏼

[@MatheusCastiglioni]

Obrigado Carla

[@srvictorbatista]

Ow, Matheus... Seu conteudo é excelente, mas o audio. Se puder, regrave este video com um microfone melhor (com som mais auto e claro), por favor.

[@MatheusCastiglioni]

Fala Victor, vou adicionar aqui na lista de ideias.

[@andredataviz]

Ganhou mais um inscrito.

[@MatheusCastiglioni]

Obrigado André \o/

[@AndersonMarquesss]

Muito bom.

[@MatheusCastiglioni]

Obrigado Anderson

[@TalesCembraneliDantas]

Muito bom cara, como q eu mudo os dados em runtime?

[@MatheusCastiglioni]

Obrigado, isso pode ser feito de N maneiras, vai depender de como está a arquitetura do projeto, no caso do React por exemplo, você poderia atualizar o estado dos componentes após buscá-los de uma API.

[@TalesCembraneliDantas]

@@MatheusCastiglioni Vish cara, estou usando PHP e Jquery, mas já dei uma estudada na documentaçã e dei um jeito aqui, mas valeu pelo video, estava procurando um chart pro meu projeto e escolhi usar o do google por causa do teu video, queria justamente algo com CDN pra não ficar muitos arquivos no meu servidor e esse veio a calhar, valeu.

[@TalesCembraneliDantas]

@@MatheusCastiglioni , só como curiosidade, o meu drawChart ficou assim: function drawChart(dat) { var data = google.visualization.arrayToDataTable(dat); var options = { title: '', legend: 'none', hAxis: {title: 'Km', titleTextStyle: {color: '#333'}}, vAxis: {minValue: 0} }; var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); chart.draw(data, options); } e chamo ele assim: google.setOnLoadCallback(function() { drawChart(dados); }); e só crio o array dados e atualizo, só achei um pouco lento pra atualizar.

[@MatheusCastiglioni]

@@TalesCembraneliDantas Talvez esteja lento pois precisa de um tanto de processamento para atualizá-los.

[@CarlJohnsonBR]

Quero chegar nesse nível um dia, onde programa 9999 linhas e única coisa que procura no Google é o nome do anime kkkk

[@MatheusCastiglioni]

Haan? kkkk

[@limaand2009]

data se for passar um json?

[@MatheusCastiglioni]

Não entendi Anderson

[@amarovr]

Ola, muito bom sua aula, uma duvida, existe alguma API do google charts onde eu utiliza 2 linhas, mas no ponto onde elas se cruzam eu possa colocar uma regra? É para grafico de PONTO DE EQUILIBRIO (Break-even Point)

[@MatheusCastiglioni]

Não entendi, teria algum exemplo para me mostrar?

[@ilanofrota]

Muito bom Matheus, realmente bem simples. Agora, só tenho um problema que talvez você ou outras pessoas aqui já tenham resolvido, é quanto à responsividade. Eu fiz uma aplicação usando o Google Chart mas quando levo pro celular fica cortando e às vezes, até mesmo no desktop. Vocês encontraram alguma opção para isso?

[@MatheusCastiglioni]

Nesse caso pode ser que a lib da Google Chart não lide bem com responsividade, nesse caso poderiamos tentar usar outra como a Chart.js por exemplo.

[@emoiniciantefreestep]

ola adorei o video bem intuitivo, mas tenho uma duvida no grafico de coluna do seu exemplo como eu mudo a cor da coluna dele?

[@MatheusCastiglioni]

Tem como você passar um terceiro parâmetro no array do arrayToDataTable, ele é a cor de preenchimento.

[@pamelacristinavicentin4304]

E o cabelo?!

[@MatheusCastiglioni]

Está crescendo kkk