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

Подписаться 10 тыс.

Просмотров 15 тыс.

50% 1

Neste vídeo mostro como criar seus primeiros gráficos utilizando a biblioteca de gráficos da Google.
Projeto feito durante o vídeo:
github.com/mah...
Apoie:
apoia.se/mahen...
Redes Sociais:
- Blog: blog.matheuscas...
- Site Pessoal: www.matheuscast...
- Facebook: / matheus.castiglioni.5
- Github: github.com/mah...
- Google Plus: plus.google.co...
- Instagram: / mahenrique94
- Linkedin: / matheus-castiglioni-7a...
- Medium: / mahenrique94
- Twitter: / mahenrique94
Referências
- Sons: / @arefeitossonoros
- Animações: / @greenscreenbrasil e / channel
- Imagens: www.freepik.com/

Опубликовано:

19 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 73

@ReTheBossGame 2 года назад

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

@MatheusCastiglioni 2 года назад

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 4 года назад

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

@MatheusCastiglioni 4 года назад

Obrigado Ericsson

@danielilha6791 3 года назад

Excelente explicação! Obrigado!

@MatheusCastiglioni 3 года назад

obrigado Daniel

@sergiosilva1140 3 года назад

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 3 года назад

obrigado Sérgio

@carlosnani 3 года назад

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

@MatheusCastiglioni 3 года назад

Magina Carlos.

@Pablofb1014 5 лет назад

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

@MatheusCastiglioni 5 лет назад

Obrigado Pablo, que bom que gostou.

@cristianomuroni8268 4 года назад

sua aula é bem explicativa faça mais man

@MatheusCastiglioni 4 года назад

Obrigado Cristiano, farei sim

@weslenvasconcelos5437 3 года назад

helpou de mais

@MatheusCastiglioni 3 года назад

Show de bola Weslen

@felipes.damasceno2022 2 года назад

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

@MatheusCastiglioni 2 года назад

Valeu Felipe

@marcosmelo1108 5 лет назад

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

@MatheusCastiglioni 5 лет назад

Obrigado Marcos, fico muito feliz que tenha gostado

@srvictorbatista 2 года назад

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 2 года назад

Fala Victor, vou adicionar aqui na lista de ideias.

@bekdigital 2 года назад

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.

@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

@nokiu22 3 года назад

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

@MatheusCastiglioni 3 года назад

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

@nokiu22 3 года назад

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

@TheFullPlay 7 месяцев назад

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

@MatheusCastiglioni 7 месяцев назад

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)

@JaisonJFranklin 2 года назад

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

@MatheusCastiglioni 2 года назад

Obrigado Jaison.

@joycerodrigues5389 3 года назад

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

@MatheusCastiglioni 3 года назад

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

@pedrinho5810 2 года назад

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.

@patrick7as 4 года назад

muito boa a aula!

@MatheusCastiglioni 4 года назад

Obrigado Patrick

@Alth33r 5 лет назад

parabéns! ficou muito bom o vídeo

@MatheusCastiglioni 5 лет назад

Obrigado Thiago

@felipes.damasceno2022 2 года назад

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

@MatheusCastiglioni 2 года назад

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 2 года назад

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

@MatheusCastiglioni 2 года назад

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

@_carlaque 5 лет назад

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

@MatheusCastiglioni 5 лет назад

Obrigado Carla

@AndersonMarquesss 5 лет назад

Muito bom.

@MatheusCastiglioni 5 лет назад

Obrigado Anderson

@LaercioLopesLL 4 года назад

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 4 года назад

Obrigado Laércio.

@jigaboooo 5 лет назад

Ganhou mais um inscrito.

@MatheusCastiglioni 5 лет назад

Obrigado André \o/

@ilanofrota 3 года назад

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 3 года назад

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.

@gabrielteodoro7150 4 года назад

valeu lindeza

@MatheusCastiglioni 4 года назад

Magina

@amarovr 4 года назад

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 4 года назад

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

@emoiniciantefreestep 5 лет назад

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 5 лет назад

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

@CarlJohnsonBR 4 года назад

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

@MatheusCastiglioni 4 года назад

Haan? kkkk

@TalesCembraneliDantas 4 года назад

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

@MatheusCastiglioni 4 года назад

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 4 года назад

@@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 4 года назад

@@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 4 года назад

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