Gráficos dinâmicos com dados do banco de dados usando chartJs || wix code

ela gente beleza com vocês é mais um vídeo dessa vez trazendo o um conteúdo bem bacana aqui dou iscold certo que eu vou estar mostrando pra vocês a gente vai estar vendo juntinho aqui como que a gente faz para criar depois desse caminhão como é que a gente faz para criar como é que a gente faz pra criar gráficos dinâmicos tirando o conteúdo nosso banco de dados certo então vamos dar uma olhada aqui no funcionamento desse gráfico só para você entender o que eu fiz certo tem um gráfico aqui de médias anuais e alunos do

8º ano certo de 0 a 9 porque não há valores superiores a 9 2017 quando 2016 automaticamente ele vai me seguindo muito bacana isso né 2017 2015 é muito bacana esse gráfico ficou certo quando ele me mostra um papo eu tenho aqui um de buggy que quando clico a média do ano 98 certo então eu tenho de buggy e eu tenho como filtrar por ano fazer a modificação desse gráfico por ano vamos ver como é que foi feito esse código que é isso aqui certo esse elemento aqui do código ele é [Música] um html daquele

que a gente vem aqui em adicionar morna é mais e aqui em html e frame certo é esse elemento permite que quando a gente clica nele a gente coloca 1111 html aqui dentro não está abrindo aqui o vs coube a gente está podendo ver esse código que está aqui dentro no ubs code para ficar mais claro certo mas vamos continuar falando dos elementos questões em tela isso aqui é um líder isso aqui o html ou outro nome de gráfico barra que o que é que me permitiu fazer isso eu não estou usando um plugin do

ix não português tem um plugin que chama ninja charles certo que ele fica aqui na lojinha do ix no ginga jorge é isso que não é esse cara que eu estou usando eu estou usando um plugin em java script que chama chart ponto js o chat ponto js é esse aqui certo ele fica nesse site aqui se você entrar aqui você vai ver toda a documentação do chat js certa o que permite a gente fazia aquela interação isso aqui é um em um chat que é mas a gente teve que fazer uma implementação toda especial

a week certo eu clicar aqui em file o file e já deixar isso aqui prontinho pra gente está trabalhando vou deixar aqui abertinho e beleza voltar pro meu editor a primeira coisa de tudo que a gente vai ver é o código que a gente fez aqui pra que isso funcionar certo de cara vamos dar uma olhada aqui no meu pé você vê que assim que a página é carregada eu chamo uma função chamada filtrar por anos é depois de ter importado módulo do ix data não se esqueça também que a gente vai trabalhar com banco

de dados tem que importar o módulo ix data eu tinha uma função filtrar por ano eo paço como parâmetro pra ela informa the stream certo é importante porque eu escolhi trabalhar assim o base em forma de stream o ano 2017 certo então a minha função filtrar por ano a que ela vem daqui até aqui isso aqui é o lançamento de erro dela certo que nem está fazendo nada nessa situação e essa aqui é a minha lógica pra tá fazendo ali aquele aquele gráfico e eu já vou explicando para você como é que é do outro

lado lá na parte do html e códigos em que está aqui dentro esse cara aqui certo que são essas linhas aqui certo vamos dar uma olhada aqui primeiro a primeira coisa o its data que é o que quer dizer eu leio o meu banco de dados boletim vamos dar uma olhada no banco de dados do boletim ele tem somente 43 campo tá vendo a turma a média e o ano turma média antonio mamede anos só três campos vamos voltar lá pra continuar vendo eu digo que pra ele ler boletins quanto ano foi igual ao parâmetro

passando aqui logo aqui ele está lendo o ano 2017 pra gente já tomar como base então ele executa essa kerry certo essa seleção ea gente tem esse compromisso aqui essa promessa certo o retorno do eu consigo apanhar nessa variável chamada resultado nós [Música] o efeito é enfim eu consigo apanhar que nessa variável o o o resultado lá do banco de dados certo e é porque tem um caminhão aqui anuncia no mercado passando pela minha casa e fui mal barulheira aqui me perdoe mas vão voltar lá então aqui eu pego o resultado da minha leitura do

banco de dados quando o ano certo foi igual a 2017 só exemplificando mas se eu chamar essa função de outra maneira isso vai ter outra outro peso certo eu declaro 2 alex vazios aqui eu só inicia e eles querem valores e rótulos e você logo vão estar vendo pra que serve e eu iniciei um laço de repetição aqui passando por todos os campos é por todos os campos onde ele achou 2017 certo que o meu resultado só vai resultar linha de 2007 então em todas as linhas de 2017 primeiro preenche um array com os meus

valores de média e depois eu preencho um outro ao rei com as turmas certo então esses dois harris são complementares e guardando os valores e outro guardando as turmas entendeu isso então toda vez que ele achou 2017 o boletim ele vai lá isso aqui no hotel rieger no final desse laço de repetição aqui a gente tem é 2 a 1 aí eu pego a qui crie um array novo e de claro que cada posição desse rei recebe os outros arranjos que eu queria ali isso aqui e o uso para dar nome eu poderia ter automatizado

na chamada função mas eu deixei isso aqui está no meio eu uso para dar nome a esse rótulo que aparece aqui o médios anuais tá vendo médias anuais então eu criei um rei com três posições diante a gente tem um consolo ponto logo aqui que eu vou tirar para não confundir a gente chama um método que você não sei se você está familiarizado se você conhece eu não conhecia passei a conhecer achei muito interessante eu faça uma seleção no meu elemento html que o gráfico barra certo eu faço uma seleção no gráfico baixo e eu

chamo um método chamado post mensagem quer dizer postar mensagens e como parâmetro de se postar a mensagem o poste sr contendo 3 a reyes está me acompanhando aí então acabei de postar uma mensagem mas eu postou uma mensagem pra quem certo uma mensagem pra quem aí a gente vai lá no nosso ver esse código e vai dar uma olhada o nosso código html aqui deixou o corpo da copiando ele vamos lá no veículo onde deixou salvar ele aqui como html ele poderá colorindo a gente ver melhor deixar é recente título mesmo de html ponto html

terra é o nosso elemento da minha pronta ele bota a cozinha fica mais fácil a gente vê deixou trazer aqui é o centro vai ficar fácil leitura vou fechar isso aqui pronto beleza cabeçalho html com um certo isso aqui é o meu link ao a minha pele de chats que é o meu chat ponto js certinho lá do site que a gente viu pra gente fazer isso funcionar a gente tem que brincar ap do chat ponte js que está feito aqui eu tô só explicando mas é para que depois quando você for usar esse esse

arquivo enfim você saiba que o que está no lugar aí aqui a gente pode ver através do javascript que assim embora e é carregado ele chama uma função tava vendo ele chama uma função chamada reali certo essa função ela tá aqui em baixo e ela também mandou uma mensagem de volta aquele nosso arquivo também estão trocando informações então esse cara aqui assim que carrega uma o cara de lá assim que carrega uma mensagem pra cá e se as que assim que carrega também mandou uma mensagem pra lá vamos ver o que lá mandou pra cá

certo esse cara aqui carregando ele cria o elemento do gráfico é o nosso gráfico está aqui esse aqui é o nosso gráfico com as opções dele certo você vê que ele está marcando brasil canadá tal porque eu peguei um modelo já pronto mas isso poderia ter em branco certo e assim a gente mandou a mensagem pra cá pra gente não se perder e a gente ficar aqui nesse bloco de código aqui que chama o mês a isso quer dizer que é sobre a mensagem para ele receber uma mensagem ele sempre vai executá esse bloco de

código a quinta vez que a gente executa o método post mensagem naquele código esse cara que executa o homem é certo esse cara recebe a mensagem outro envia a mensagem é mais fácil a gente pensasse em uma mensagem por mensagem enfim de lá e eu aqui recebe aqui certo e se daqui envia por aqui a gente vai ver depois com onde é que por lá é executar o recebimento da mensagem o que ele diz ao i é 20 ponto dado a quem que é ver em que ponto da até 20 ponto data é esse cara

que esse dados que a gente criou lá que tem é que dentre que tem três alunos dentro dele esse cara aqui é 20 ponto da telium ao rei com 3 a 1 o registro dele certo esse cara é o nosso ambiente ponto dada disse data quer dizer se é aquele cara lá se ele existe e se ele for um rei se ele existir se ele for high o que a gente faz e diz que mais chardy data data 7 data os dados deles são populadas pelo meu rei 'nada 01 certo no índice zero no índice

0 aí como ele é um ao rei com o tower dentro o arranque está dentro dele também no índice zero certo então aqui a gente está usando uma matriz um alguém multidimensional como você preferir mas aqui eu tô indicando o rei eu arrolei dados e aqui eu tô indicando o índice do a recta dentro dele que é uma lei também certo eu entender está tranqüilo qualquer coisa comenta aí que a gente conversa mais sobre isso está tranqüilo enfim ele pega isso aqui siewert ponto da aqui que a gente passou pra ele e alimenta isso aqui

que estava vazia certo isso aqui está vazio é alimentado por aquilo lá ele então passa a ter essas informações aqui esses dados no método aqui que fazem essas barreiras ficarem grande certo lá também não é 20 ponto dado ele recebe o no índice 1 do rei ele sempre na casa dela porque os arranjos internos só tem o índice meio mas só o rei que tem os três da risa que tem na verdade 10 11 e 12 então eu também preencho a minha mais chardy ponto data com playbooks que aqui ó vou me entender isso há

mais chade data libos eu preenchi isso aqui com aquilo lá nem se lembre que coloquei eu coloquei o nome das turmas certo eu coloquei o nome desta mas então ele preencheu lei book pra mim certinho me acompanhar até aí depois eu faço uma revisão resolvida porque você pode estar perdendo que é a primeira vez mas vamos chegar lá no pinga olha só depois eu eu digo que mais chart e data das sete lei bull recebe o 2.0 que no caso é eo que eu te falei que eu mando só para mudar esse nome aqui se

você olha agora dá pra entender mais chat data 7 ponto lembrou a data certo também funcionaria mas eu tô passando por lá certo se ele recebe uma mensagem essa mensagem ele consegue trabalhar e depois eles têm uma função interna chamada mais chatinha pib desde que ele atualiza os dados dele então a gente carrega ele manda uma mensagem pra gente com um objecto de som e esse objeto dê certo quando a gente recebe uma mensagem que executa o trabalho também como se fosse um objeto e ea gente coloca o seguinte sempre ponto dada ponto time foi

igual à rede então bateu aqui porque ele realmente me manda um type head se foi do arraial que eu faço eu mandar uma mensagem de volta pra ele havendo mensagem de envio de dados por ele certo eu envio dados pra ele de novo enfim um carregamento e os bois fazem é pra que a gente não erre durante esse carregamento de páginas faltando dados lá a gente deixa ele é isso aqui carrega primeiro a ir lá carrega e pra gente se certificar de que está tudo certo a gente manda uma mensagem pra cá e depois recebe

de volta certo então toda vez que a nossa página foi carregada isso aqui é executado certinho então não tem erro a gente já tá com nossos dados aí sincronizados tranquilo então nada mais é feito a página vai ficar parada esperando a gente fazer alguma coisa certa e qual evento que a gente tem aqui que a gente pode estar dando uma olhada agora esse evento aqui o evento da gente mexi no nosso slider e ele responder atualizando um gráfico certo isso tá aqui ó eu coloquei no slider o o evento the end quando ele mudar ele

vai também chamar a função de filtrar por ano e ele vai passar em forma de stream esse ano aqui que é o valor do meu slider então o nosso valor do meu slider para a função filtrar por ano aaaah repetição do que ele faz aqui quando ele carrega então o que ele vai fazer para executar esse bloquinho todo aqui de novo certo ele vai executar esse bloquinho todo de novo aí ele vai conseguir nova mente entrando aqui nesse blog onde o opositor na hora top visual studio onde ele recebe a mensagem ele vai ver que

os dados que a gente tá mandando é diferente porque a gente vai informando ano diferente certo e quando que ele vai executar esse tipo aqui de de atividade isso aqui tá é uma função do próprio é chat pontos js pra quando a gente clica no numa panela um gráfico né pra quando a gente clique no gráfico você vê que quando eu venho que viu olha ele acaba retornando um evento eu consigo pegar dada olha o que ele faz quando eu clico essa função como eu disse é nativa do do chat ponto jsm envia pelo post

mensagens dessa vez type clique valor de lei book e lei boé e valor são valores que ele pega referentes ao elemento que eu cliquei m passa lá então quando eu recebo aqui eu verifico que é igual a click eu simplesmente do valor aquele meu texto ali é pra que ele possa mostrar o que de fato eu tô pegando aqui e montando nessa stream certo correto e até isso aqui assim ficar escondido quando inicia que ele só aparece quando a gente chama certo bacana né é bacana então praticamente a nossa lógica acabou viu como foi simples

então como é que você vai fazer se você quiser ter enfrentando esse gráfico aí você vai você vai verificar primeiramente é a na 'sua' sua tabela é você vai ver aqui os bancos de dados o que você quer colocar em um gráfico que o que você precisa estar informando que representa criando como eu aqui uma lógica para percorrer os seus resultados criar um contendo valores que vão ser mostrados nas barras e um rei contendo os rótulos que vão ser mostrados aqui também que eles têm a mesma quantidade porque é um rótulo para cada valor então

quando você chamar esse bloco senac e passar essa variável você também vai poder escolher e se esse esse título que aparece lá em cima mas isso não cria dinamicamente você só vai ter que mudar mesmo estes valores aqui mudar efe valores se você não quiser você não precisa está mudando nada aqui você só vai pegar todo esse código aqui copiar e colar dentro do seu elemento html certo você só precisa tá fazendo o controle de como você vai estar mandando esse a heidi rasekh certos observar aqui é uma lei 3 dentro dele e se ao

rei aqui vai ter um índice uma média no índice dois outros médios certo você olhar que boletim ele no índice 1 e vai ter uma nota 10 1 e c2 outra dessa totalizando 4 e outro a lei vai te turma e no índice e vai ter quinto ano no outro vai ter 6º ano escrito entendeu precisa criar isso dois informar aqui certo precisa acertar o nome daquele campo se você quiser mostrar alguma coisa desse tipo e aqui você poderia estar usando um seila um putt text um drop down onde a criatividade levar então acho que

está bem tranquilo ano por ano mas você poderia filtrar por outra coisa poderia filtrar por produto por cidade sei lá o rg o cpf então existem muitas possibilidades não só está mostrando a vocês aqui como é fácil também está mudando e se esse esse modelo a gente pode vir aqui ó nossa luta abril enfim nossa se você vem aqui não espero firework se acabar esse processo dele ele vem aqui em taipe e mudar por exemplo prático e deixou copiando e colando aqui dentro ele vai mudar pra gráfico pizza certo aqui pra gente não serve muito

legal aqui tem um modelo aqui o tape e é online vamos dar uma olhada em laine também pra gente ver a gente vai estar vendo isso eu vou estar terminando o vídeo certo pra você ver quantas possibilidades você tem aí pra tá trabalhando com o teu site do ix e também está fazendo coisas que são bem legais gráficos são sempre graves aqui ó certo está preenchido mas poderia não preencher uma linha que passando certo mas mesmo assim bem bacana né por aí também certo eu vou ficando por aqui estou vendo que assim não há limite

porque a gente hoje pode tá fazendo com o nosso site do ix tv como é bacana que a gente poder está oferecendo isso nosso usuário final certo é uma interação bem bonita bem macia que os permite qualquer dúvida entre em contato o contato da na descrição do vídeo eu vou ter um prazer visão de conversar com você certo até a próxima e fica na paz