Aprenda a criar gráficos para web com Chart.js • HTML5/JS

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

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

50% 1

Construir gráficos em um mundo cross-device é uma tarefa muitas vezes complexa e cansativa. E foi pensando nisso, que surgiu o framework Chart.js, que atualmente é considerado uma das bibliotecas mais performáticas para criação de WebGraphics baseados em canvas e de manipulação via javascript.
Aprenda nesta aula, a construir gráficos para web de maneira simples e flexível. Além da fácil implementação, o chart é um framework open source, responsivo e que fornece 8 tipos de gráficos diferentes e personalizáveis.
// INSCREVA-SE NO CANAL
goo.gl/Li0elq
// REDES SOCIAIS
1. Twitter: / leonardoferr_
2. Facebook: / ferreirastudios
3. Tecmundo: www.tecmundo.c...
// LINKS DO VÍDEO
ChartJs Docs - www.chartjs.org...
CDN ChartJs - cdnjs.com/libr...
ChartJs GitHub - github.com/cha...
GitHub Chartjs - github.com/cha...
// INSTALAÇÃO BOWER E NPM
npm install chart.js --save
bower install chart.js --save

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

19 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

Alem de passar muito bem o assunto a qualidade do vídeo e áudio é perfeita, está tudo de parabéns! Excelente trabalho!

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

Obrigado amigo, vc é um amigo

@leonardoferreira.design 3 года назад

Eu que agradeço

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

Caceta velho, que fácil! Muito mais fácil que lendo a documentação que você recomenda, pois eu comecei por lá. Excelente explicação!

@LuizHenrique-cq4lm 6 лет назад

Coisa rara sou eu comentando em vídeos, mas você merece cara, muito bom, parabéns... LIKE...

@VictorHolanda 6 лет назад

Excelente, salvei e favoritei. Exatamente o que eu buscava pra levar meu projeto pessoal a outro nível, se eu conseguir fazer o que estou planejando irei colocar o resultado aqui. 😉 Valeu 👍.

@ohervis 7 лет назад

Shooooow, ontem mesmo um pouco antes de sair do trabalho estava dando uma olhada no chartJS, e pensei em estudar ele na segunda, e agora você posta um vídeo. shooooow, Parabéns pelo trabalho.

@BrExodusZoneDayzServers 6 лет назад

Cara meus parabéns pelos seus vídeos!! Eu tenho o costume de estudar por conta desenvolvimento e seus vídeos tem sido perfeitos! Obrigado pela partilha do conhecimento! Abraço.

@wanderson34456 5 лет назад

Direto ao ponto e com clareza! Parabéns!

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

muito bom! não tem porque não usar o chart.js.... obrigado pela aula !!!

@LuizHenrique-do7dj 7 лет назад

Muito bom! Conteúdo sem enrolação.

@pedromihael8968 5 лет назад

QUE VIDEO LINDO, MEU AMIGO!!!11!!1!onze!!!

@WedersonWinchester 5 лет назад

Nossa!!!! Que fantástico!!! Excelente didática!!!!

@constantinobsa6655 7 лет назад

Video muito bom e super legal!!! Estava precisando dessas informações. Quero que você faça mais vídeos sobre essa API. Valeu e muito sucesso!

@eusouthiagooliveira 7 лет назад

Muito bom muito didático, e prático parabéns!

@andersonvasconcelos1516 7 лет назад

show...o bagulho já é responsivo! legal msm

@curyrodrigo 7 лет назад

Show de bola!... esse vai pro favoritos pq em breve vou usar !

@lucasfads 7 лет назад

Já tinha ouvido falar nesse Chart.js. Bem bacana msm, e como vc mostrou, é super fácil de usar. Show de bola.

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

Muito bom seu vídeo, rápido e objetivo, com uma ótima didática. Valeu!!!

@lucas-fanti 5 лет назад

Cara. Deus te abençoe. Sensacional....

@Gilnalua Год назад

Cara muito obrigado, video muito objetivo e explicativo

@unkn0wnrge189 5 лет назад

parabens! Sua aula é focada, por isso tem 1000 likes pra 6 deslikes = 0,006%.

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

Show de bola rapaz !!! Otimo vídeo e excelente didática!!!

@lius2340 7 лет назад

Sempre acompanho seu canal que a cada momento surge vídeos muito bons! Obrigado por compartilhar seu conhecimento e me ajudou muito, pois tenho um projeto que vou precisar de um gráfico e já sei qual vou usar. kkkkkk Obrigado pelos vídeos! Abraço!

@paulorobertogoncalvesjunio7209 10 месяцев назад

Vai ajudar muito no gráfico que quero montar junto ao Google Sheets.. Obrigado!

@israelcesarlimamota5491 7 лет назад

Obrigado por compartilhar seus conhecimentos!

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

Muito legal, super didatico e objetivo

@chris88443173 5 лет назад

Muito Top! Justo o que estava precisando! VLW!

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

Nossa! Muito obrigada pelo vídeo!! Me ajudou muito! Teria como mostrar em um próximo video como fazer gráfico em barras empilhadas?

@ThiagoFranchin 7 лет назад

Muito bom, valeu mesmo!!! Mais um vídeo TOP !!!

@IsmaelCarvalho 7 лет назад

Faz uma vídeo aula utilizando o chart.js com banco de dados, que a maior dificuldade de todos.

@leonardoferreira.design 7 лет назад

@Ismael, você quer puxar os dados da tabela do banco? Como eu falei no vídeo, basta fazer o return da tabela dentro de "data" ou você já seta o caminho real do .json que seu banco retorna.

@juniorgeba25 7 лет назад

Muito bom parabéns, mais seria bem legal se mostrasse em vídeo, muito top sua explicação!!

@JoseSilva-wu2wy 5 лет назад

Bom vídeo. Sou iniciante e não conhecia este framework. Ajudou muito! Vlw!

@LuizFelipe-zf1xe 7 лет назад

Ferreira, faz um vídeo ensinando como fazer um jQuery slider com dots, paginator etc... Ótimo vídeo!! =)

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

Salvou demais!! Muito obrigada!! :DD

@rogersrangel8826 6 лет назад

MUITO BOM CARA, MEU CHART FICOU SEXY AGORA.

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

Pro trick : you can watch series on flixzone. I've been using them for watching all kinds of movies lately.

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

@Merrick Gustavo Yup, been watching on Flixzone for months myself =)

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

Muito Boa Apresentação e muito explicativa! Gostaria de um exemplo onde manipulo os data de forma reativa , a partir de cliques em botoes ou de bancos de dados.

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

Muito bom parabéns pelo conteúdo!!!

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

Show de bola, obrigado!

@mysodor 7 лет назад

Cara, te amoooooooo!

@ronancruzbastos6049 7 лет назад

top de mais esses videos queria se pudesse que falasse um pouco sobre breakpoints como criar pontos de quebra na css para navs responsivas abco

@davidsonmichael1987 7 лет назад

Muito Bom , me ajudou muito

@WalxineyGalvao 5 лет назад

Top cara valeu mesmo.

@brianferreira15 5 лет назад

AMAAAAAAAAAAAAAAZING

@marcosgoncalves2005 7 лет назад

Cara muito bom! Valeu!

@GabrielHirakawa 5 лет назад

muito bom

@edfdj 5 лет назад

Manoooo obrigado !!! Ajudou de mais +1 inscrito e +1 Like !

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

valueu mano !

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

Cara, mto bom.... me ajudou muito, mas tenho um problema que não consegui resolver... Se um dos valores for "0" e eu quiser que o gráfico ignore (e deixe em branco esse campo) e continue desenhando no próximo valor (positivo ou negativo), como faço?

@ivaldo300 7 лет назад

Você sabe explicar como fazer a mixagem de gráficos? Lá no site do chart js tem mas eu não consigo, colocar os graficos diferentes ao mesmo tempo

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

Boa noite irmão, cara ótimo vídeo, porém sou leigo nesse assunto e preciso colocar um gráfico no meu site, como faço pra adaptar ele lá ??

@giovanialves2626 6 лет назад

Amigão , posta um de chart.js + mysql por favoooor !!

@BraytinerHeggendorn 7 лет назад

Top! Vlw!

@ariolv4865 7 лет назад

gostei muito!! ;D

@zemario04 7 лет назад

top!!!

@robsonlirayou 7 лет назад

Olá ! o Chartjs é realmente muito bom, o diferencial é que ele é bem simples não tem muitos detalhes como outros frameworks, e tem um bom visual, agora uma coisa que senti falta uma vez que ele tem o Doughnut é gauge, ele não tem gauge ( termômetros ou manômetros) embora pelo que eu entendi pode-se criar(fabricar) seu próprio gráfico será que isso é possível? eu andei pesquisando e não achei.

@mayconvsg Год назад

Cara, e como eu poderia adicionar uma outra escala do lado direito desse gráfico e fazer, por exemplo, um gráfico de barras abaixo dessas linhas correspondendo a escala que fica ao lado direito desse gráfico? Ou seja, fazer as barras seguirem a escala da direita e as linhas seguirem a escala da esquerda (ou vice-versa)?

@davidsonmichael1987 7 лет назад

Como faço pra colocar VALORES PERCENTUAIS %% nos grafícos ??

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

Olá Leonardo, parabéns! pela excelente apresentação desse conteúdo, que é muito da hora e com uma variedade enorme de aplicações. Tõ interessado em aplicá-lo num webbrowser de microcontroladores usados em IoT (internet das coisas), tipo ESP8266, ESP-01, ESP32, etc. Pretendo usar o charts.js junto com sqlite para montar um dashboard embarcado! Nesta demonstração entendi que vc colocou um link (url) ao chart.js, é possível baixar este arquivo para uso em rede local, sem internet? Obrigado!

@andersonmorony 7 лет назад

Valeu!!!!!!!!!

@feliperibeiro4152 5 лет назад

Boa noite, da pra plotar analises de redes/grafos com isso e salvar como arquivos executáveis, criar botões?

@dev-fabriciobr Год назад

Muito bom o vídeo.. mas como faço para formatar os valores do data no formato decimal R$ 0,00 ?

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

Olá excelente explicação, estou com uma dúvida e nao sei se é possivel ser feito, eu implementei no meu sistema financeiro e preciso que as informações do eixo Y fiquem sempre sempre visiveis dentro do gráfico acima da barra vertical, e não do lado esquerdo como padrão, nesse caso caso eu ocultaria as tooltips, seria possivel essa alteração? Obrigado.

@mrskinner8893 5 лет назад

Eu tenho uma duvida, se tem como mesclar php com java no mesmo arquivo.php

@notridan 7 лет назад

Ótimo vídeo! Como eu configuro a vírgula como separador de milhar ??

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

OLá, parabéns pelo vídeo! Aprendi muito! Tenho uma dúvida: como eu faço para no lugar de data : [ 5, 10, 5, 14, 20, 15, 6, 14, 8, 12, 15, 5, 10 ], eu chamar um servlet que trará essa lista pronta? Obrigado

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

Maravilha... como faz para trazer dados de uma consulta do BD para o datasets? Uso phpMyAdmin.

@carcleo 5 лет назад

Gotaria de saber como fazer para o caso de quando cada dataset tem o seu proprio labels. Tipo: var ctx = $("#myChart"); var scatterChart = new Chart(ctx, { type: 'line', data: { datasets: [{ label: 'Gcéu 1', data: [{ x: new Date (2019,02,01), y: 20 }, { x: new Date (2019,02,02), y: 10 }, { x: new Date (2019,02,05), y: 5 }] },{ label: 'Gcéu 2', data: [{ x: new Date (2019,02,02), y: 15 }, { x: new Date (2019,02,03), y: 10 }, { x: new Date (2019,02,10), y: 2 }] }] }, options: { scales: { xAxes: [{ type: 'linear', position: 'bottom' }] } } }); Como fazer nesse caso? Pois o gráfico não sai.

@jamallwallace845 5 лет назад

Obrigado pelo vídeo. Estou tentando buscar informações em uma planilha do google sheets para criar o gráfico. Mas mesmo lendo a documentação não estou conseguindo montar a URL + a consulta para filtrar os dados e jogar para o gráfico. Alguém por favor pode me dar uma dica de como fazer isto? Valeu!!!

@josesoaresSoares 5 лет назад

Parceiro tem alguma configuracao para nao deixar os labels se sobreporem? agradecimentos

@MMartinsMr 6 лет назад

Olá, sou principiante em programação e estou criando um pequeno sistema para praticar minha aprendizagem. Eu criei um dashboard com alguns gráficos utilizando o Chart.js, porém em um dos gráficos que aponta por exemplo compromissos a pagar nos próximos 12 meses, os meses estão em inglês. Eu não posso criar os meses de forma estática, pois quem define os próximos doze meses é o sistema. No entanto, um amigo me deu uma dica dizendo que eu devo utilizar o "moment.js", um plugin que faz a tradução para outro idioma. Confesso que fiz o download, instalei e fiz a referência mas não consegui até agora fazer funcionar. Talvez eu não estou fazendo os procedimentos corretos. Você poderia me dizer o que e como fazer? Parabéns pelo vídeo, muito bom. Saudações.

@Naicson11 6 лет назад

Eu to com um problema que o gráfico ta ocupando toda minha tela, ta responsivo, mesmo eu definindo width e height ele abre em todo o espaço da tela, alguém sabe como mudo o tamanho?

@joaodeybsondonascimentocav650 22 дня назад

poderia fornecer o código desse video?

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

Soundtrack name, plzz?

@deyvischarles4080 7 лет назад

Ferreira Studios Como adicionar o sinal de cifrão ($) antes dos valores? Para gerar esse resultado: R$ 9.000,00

@caiqu27061993 6 лет назад

pode baixar a biblioteca chart.js para usar grafico offiline ?

@LucasLopes-hd1ms 5 лет назад

Eai, pode?

@gugox 5 лет назад

Pode! Online é uma das opções. Javascript é para ser processado no navegador gente(offline).

@marcoantonioaraujopereira4169 5 лет назад

E possível fazer come esse só que em tempo real?

@jorgesantanna3518 5 лет назад

Como consigo colocar dois gráficos lado a lado?

@leonardomou 7 лет назад

Tem como criar um link em cada nó??

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

para ler json?

@alefemoreira7145 5 лет назад

Não funcionou comigo :(

@ich_lauriano 6 лет назад

cara o meu não deu certo de jeito nenhum, eu acho que deve ser por que deu erros em instalar o chart.js no meu fedora ..

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

Separar dados do Excel de uma maneira simples? Tem como?

@josesoaressoares6584 5 лет назад

Nao consegui aqui dever ser o smartscreen

@villastube 6 лет назад

Cara nao sei porque mas nada aparece aqui. Nem a grade inicial

@giltobarcella 6 лет назад

Conseguiu resolver? Comigo a mesma coisa!

@marcosdossantos3230 6 лет назад

Nossa aqi funcionou tudo certinho, menos essa animação, o que devo saber, alguém me ajudaaaa pls

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

55555

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

Ola amigo, estou adorando seus vídeos, e gostaria de saber para incluir em bootstrap esses graficos e se é possivel buscar a base de dados do google. E se seria possivel montar bootstrap visual. minha intenção erá desenvolver algo assim: covid.saude.gov.br/