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

Поделиться
HTML-код
  • Опубликовано: 5 дек 2024

Комментарии • 98

  • @marcos_silvestri
    @marcos_silvestri 2 года назад +1

    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!

  • @LaercioLopesLL
    @LaercioLopesLL 4 года назад +1

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

  • @LuizHenrique-cq4lm
    @LuizHenrique-cq4lm 7 лет назад +1

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

  • @VictorHolanda
    @VictorHolanda 7 лет назад +1

    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 👍.

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

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

  • @mikefigueiredo4312
    @mikefigueiredo4312 3 года назад +1

    Obrigado amigo, vc é um amigo

  • @paulorobertogoncalvesjunio7209

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

  • @BrExodusZoneDayzServers
    @BrExodusZoneDayzServers 6 лет назад +3

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

    Direto ao ponto e com clareza! Parabéns!

  • @WedersonWinchester
    @WedersonWinchester 5 лет назад

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

  • @unkn0wnrge189
    @unkn0wnrge189 5 лет назад

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

  • @constantinobsa6655
    @constantinobsa6655 7 лет назад +1

    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!

  • @ohervis
    @ohervis 7 лет назад +3

    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.

  • @pedromihael8968
    @pedromihael8968 6 лет назад +1

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

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

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

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

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

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

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

  • @andersonvasconcelos1516
    @andersonvasconcelos1516 7 лет назад +2

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

  • @Gilnalua
    @Gilnalua Год назад

    Cara muito obrigado, video muito objetivo e explicativo

  • @lucasfads
    @lucasfads 7 лет назад +1

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

  • @chris88443173
    @chris88443173 5 лет назад

    Muito Top! Justo o que estava precisando! VLW!

  • @marcosgoncalves2005
    @marcosgoncalves2005 7 лет назад

    Cara muito bom! Valeu!

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

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

  • @curyrodrigo
    @curyrodrigo 7 лет назад +3

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

  • @eusouthiagooliveira
    @eusouthiagooliveira 7 лет назад +2

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

  • @waldomirofreitasbarbosa5265
    @waldomirofreitasbarbosa5265 5 лет назад

    Muito legal, super didatico e objetivo

  • @lius2340
    @lius2340 7 лет назад +1

    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!

  • @abigailgouveia8849
    @abigailgouveia8849 4 года назад

    Salvou demais!! Muito obrigada!! :DD

  • @jenniferomena1878
    @jenniferomena1878 3 года назад

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

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

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

  • @israelcesarlimamota5491
    @israelcesarlimamota5491 7 лет назад +1

    Obrigado por compartilhar seus conhecimentos!

  • @CAONST_DEV
    @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.

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

    Show de bola, obrigado!

  • @ronancruzbastos6049
    @ronancruzbastos6049 7 лет назад +1

    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

  • @ThiagoFranchin
    @ThiagoFranchin 7 лет назад +5

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

    • @IsmaelCarvalho
      @IsmaelCarvalho 7 лет назад +1

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

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

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

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

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

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

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

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

  • @rogersrangel8826
    @rogersrangel8826 6 лет назад +1

    MUITO BOM CARA, MEU CHART FICOU SEXY AGORA.

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

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

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

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

  • @pointdoscuriosos2810
    @pointdoscuriosos2810 2 месяца назад

    Muito bom mano

  • @ivaldo300
    @ivaldo300 7 лет назад +2

    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

  • @WalxineyGalvao
    @WalxineyGalvao 5 лет назад

    Top cara valeu mesmo.

  • @fernandolaino
    @fernandolaino 4 года назад +2

    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?

  • @edfdj
    @edfdj 5 лет назад

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

  • @davidsonmichael1987
    @davidsonmichael1987 7 лет назад +1

    Muito Bom , me ajudou muito

  • @mysodor
    @mysodor 7 лет назад

    Cara, te amoooooooo!

  • @danielsanches1778
    @danielsanches1778 4 года назад +1

    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á ??

  • @mayconvsg
    @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)?

  • @brianferreira15
    @brianferreira15 6 лет назад

    AMAAAAAAAAAAAAAAZING

  • @giovanialvesdev
    @giovanialvesdev 6 лет назад +1

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

  • @feliperibeiro4152
    @feliperibeiro4152 5 лет назад

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

  • @jamallwallace845
    @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!!!

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

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

  • @notridan
    @notridan 7 лет назад

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

  • @joserobertodamascena6981
    @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.

  • @dev-fabriciobr
    @dev-fabriciobr 2 года назад

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

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

    valueu mano !

  • @davidsonmichael1987
    @davidsonmichael1987 7 лет назад +1

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

  • @chicodorea
    @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!

  • @GabrielHirakawa
    @GabrielHirakawa 5 лет назад

    muito bom

  • @josesoaresSoares
    @josesoaresSoares 5 лет назад

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

  • @glauberdarochabalthazar7112
    @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

  • @Naicson11
    @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?

  • @mrskinner8893
    @mrskinner8893 6 лет назад

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

  • @carcleo
    @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.

  • @robsonlirayou
    @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.

  • @ariolv4865
    @ariolv4865 7 лет назад

    gostei muito!! ;D

  • @caiqu27061993
    @caiqu27061993 6 лет назад +2

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

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

      Eai, pode?

    • @gugox
      @gugox 5 лет назад

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

  • @NatteRoll
    @NatteRoll 4 года назад

    Soundtrack name, plzz?

  • @BraytinerHeggendorn
    @BraytinerHeggendorn 7 лет назад

    Top! Vlw!

  • @Jota_Deybson
    @Jota_Deybson 3 месяца назад

    poderia fornecer o código desse video?

  • @deyvischarles4080
    @deyvischarles4080 7 лет назад +2

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

  • @zemario04
    @zemario04 7 лет назад +1

    top!!!

  • @MMartinsMr
    @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.

  • @marcoantonioaraujopereira4169
    @marcoantonioaraujopereira4169 5 лет назад

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

  • @andersonmorony
    @andersonmorony 7 лет назад

    Valeu!!!!!!!!!

  • @leonardomou
    @leonardomou 7 лет назад

    Tem como criar um link em cada nó??

  • @jorgesantanna3518
    @jorgesantanna3518 6 лет назад

    Como consigo colocar dois gráficos lado a lado?

  • @ich_lauriano
    @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 ..

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

    para ler json?

  • @alefemoreira7145
    @alefemoreira7145 5 лет назад +2

    Não funcionou comigo :(

  • @marcosdossantos3230
    @marcosdossantos3230 6 лет назад

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

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

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

  • @josesoaressoares6584
    @josesoaressoares6584 5 лет назад

    Nao consegui aqui dever ser o smartscreen

  • @villastube
    @villastube 6 лет назад

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

    • @giltobarcella
      @giltobarcella 6 лет назад

      Conseguiu resolver? Comigo a mesma coisa!

  • @camiloguimaraes
    @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/

    • @bentoguimaraes
      @bentoguimaraes 4 года назад

      @@burn6170 Não consegui, estou apanhando até hoje.

  • @agenteclipa
    @agenteclipa 5 лет назад

    manda esse teu código, to com preguiça de assistir o vídeo todo

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

    55555