Neste tutorial você aprenderá a criar uma medida com código HTML e CSS para adicionar uma borda animada e formatada condicionalmente em qualquer imagem no seu dashboard do Power BI. Vou mostrar passo a passo de forma detalhada e fácil de entender para que você possa aplicar essa técnica incrível nos seus próprios projetos. Fique ligado e comece a criar dashboards ainda mais incríveis com essa medida personalizada! Tenho certeza de que vocês vão adorar o conteúdo. Então, não percam tempo e confiram agora mesmo! 👍 Um abraço a todos! ----------------------------------------------------------------------- Link do Curso Dashboards no Power Bi : dadoscriativos.com/dashscriativos/ ----------------------------------------------------------------------- Vídeos Recomendados: ►Aprenda a técnica avançada para criar rótulos de dados dinâmicos e impactantes ruclips.net/video/qMsRmwuCTQw/видео.html ► Como inserir SETA DE VARIAÇÃO em gráfico NATIVO do Power Bi ruclips.net/video/MuqS6Pw5rx4/видео.html ► Novo Card com GAUGE - Como você NUNCA VIU ruclips.net/video/90ZKJa13a0k/видео.html ► Aprenda a quebrar linhas nos rótulos de dados com DAX ruclips.net/video/K62mfhR8hF0/видео.html ► Explore o poder do DAX: Converta visual nativo de Matriz em um Calendário Interativo! ruclips.net/video/KalwfL6NypI/видео.html ► Mude para sempre a forma de criar cartões no Power BI ruclips.net/video/gtMp3qRvzgk/видео.html ► Como criar um Layout PROFISSIONAL para o seu Dashboard no Power BI com figma ruclips.net/video/4ySrz0QcXO4/видео.html -------------------------------------------------------------------------- Jefferson Alves - Dados Criativos ► Inscreva-se no canal: ruclips.net/user/JeffersonAlvesDadosCriativos ► Ative as notificações (clica no sininho)! ► Curta o vídeo! ----------------------------------------------------------------------- Redes Sociais ► Instagram: instagram.com/dadoscriativos_/ ► Linkedin: www.linkedin.com/in/jeffersonallvesneves/ ► Facebook: facebook.com/Jefferson-Alves-Dados-Criativos-105869708409651 ----------------------------------------------------------------------- Baixe os Arquivos ► Grupo Telegram: t.me/dadoscriativos ----------------------------------------------------------------------- #powerbi #dadoscriativos #datavisualization #dataviz #storytelling #design #microsoftpowerbi #pbi #dashboard #dashboards #dashboarddesign #dashboarddesign #dataanalytics #analytics #businessinteligence #bi #dax #powerquery #microsoft #figma #html #css #svg #kpi #performance #ux #ui #uidesign #figma #deneb
Fala Jefferson, se o conteúdo grátis já tem um valor fora do normal, imagina seu curso. Em breve serei seu aluno, obrigado por compartilhar. Deus abençoe e sucesso 🙂🙏
Obrigado Elcio, é sempre muito gratificante receber este tipo de comentário, isso mostra que tem sido útil o conteúdo que venho compartilhando com vocês.
Jefferson, você é sensacional. Estou desenvolvendo um dashboard para a empresa que trabalho, e teremos uma visão por representante de vendas, e eu achei essa solução sua maravilhosamente sensacional. Valeu, ganhou um inscrito!
Consegui reproduzir o efeito 🎉 Sensacional essa aula, pena que é apenas pra uma seleção, se puder dar uma dica pra utilizar em várias fotos selecionadas, agradeço 👏👏👏
@@rodrigodesousa7160 funciona sim. Se para vc nao estiver funcionando, vc precisa ir nas configurações de admin, e autorizar a exibição de visuais nao certificados.
Maravilha, meu amigo! Excelentes tutoriais, ainda mais pra mim, que estou ingressando no PBI. E o Velocímetro ali, vai ter tutorial tb? Rsrsrsrs... Obrigado!
Opa Ângelo, muito obrigado pelo feedback e por acompanhar o canal. O velocímetro como é algo bem mais avançado no momento tenho aula somente no meu treinamento explicando o passo a passo, porém, vou buscar gravar uma aula para o canal.
Laura obrigado pela inscrição e acompanhar o canal. No momento o Velocímetro é um conteúdo exclusivo somente para os alunos do meu treinamento. Mas vou pensar em algo para trazer para o Canal.
Estimado Jefferson, veo todos tus tutoriales y aprendido muchas cosas, una pregunta donde puedo conseguir el Odometro que muestras en varios tutoriales. Me podrias enseñas ??
Fala Fernando tudo bem ? Obrigado pelo feedback, fico feliz que tenha gostado meu amigo. Disponibilizei o pbix com a medida somente para os alunos do treinamento. Para quem não é aluno, foi o motivo de eu fazer passo a passo explicando cada linha do código, para que possam acompanhar e replicar.
Jefferson, aprendi muito com o vídeo. Parabéns pela didática e conteúdo. Apenas fiquei com uma dúvida: é possível controlar a animação de modo que a mesma dure, por exemplo, 5 voltas ao invés de deixá-la contínua? Desde já, muito grato pela atenção.
Fico feliz que o conteúdo tenha lhe ajudado. Muito obrigado pelo comentário. Excelente pergunta meu amigo, é possível sim. Na propriedade animation você retira o "INFINITE" e acrescenta a quantidade de loop que você deseja com o "TERATION-COUNT", como abaixo: animation: girar 1.5s linear; animation-iteration-count: 3;
Fala Alex, muito obrigado pelo feedback meu amigo, fico feliz que tenha gostado. Esse Velocímetro infelizmente não tem na loja da Microsoft, é um visual customizado que ensino a criá-lo do zero no meu treinamento.
Professor, excelente aula!! Tenho uma dúvida pertinente em relação ao PowerBI que procurei até em outros locais gringos mas não encontro nada relacionado a isso e é um problema de análise "simples": Os comparativos de datas são sempre realizados em períodos iguais, mas por exemplo, tenho um faturamento fechado de 4 anos: 2014, 2015, 2016 e 2017. Cada ano tem um faturamento associado, como realizo a análise de faturamento entre os anos de forma distintos e não somente em relação ao ano anterior, por exemplo: - Comparar 2015 e 2014 é "simples" (um ano anterior), mas eu quero comparar 2014 com 2016 ou 2017, ou comparar 2015 com 2017 é assim por diante, fazer comparativo abertos entre os anos, se o dado começou em 2014 como cresceu em relação a 2015, ou como 2014 cresceu em relação a 2017. Pode tirar dúvida?
Esse calendário somente no meu treinamento. Mas no canal, tem aula ensinando a fazer um calendário similar a este, segue o link ruclips.net/video/KalwfL6NypI/видео.html
quero criar uma sistema bonus de ranking para prestadores , ou seja cada pedido fechado soma 10 pontos , assim todos vão concorre conforme seu seguimento de mercado , assim todos pode ver suas colocações regional e nacional , estas pontuação zera todo ano. tem como vc fazer
Fala Jefferson! tudo bem? Primeiro, agradecer e parabenizar pelo conteúdo! Você é fera demais! Se puder ajudar, tb não consegui concluir a borda animada, aqui não está girando. "
Neste tutorial você aprenderá a criar uma medida com código HTML e CSS para adicionar uma borda animada e formatada condicionalmente em qualquer imagem no seu dashboard do Power BI.
Vou mostrar passo a passo de forma detalhada e fácil de entender para que você possa aplicar essa técnica incrível nos seus próprios projetos. Fique ligado e comece a criar dashboards ainda mais incríveis com essa medida personalizada!
Tenho certeza de que vocês vão adorar o conteúdo. Então, não percam tempo e confiram agora mesmo! 👍
Um abraço a todos!
-----------------------------------------------------------------------
Link do Curso Dashboards no Power Bi : dadoscriativos.com/dashscriativos/
-----------------------------------------------------------------------
Vídeos Recomendados:
►Aprenda a técnica avançada para criar rótulos de dados dinâmicos e impactantes
ruclips.net/video/qMsRmwuCTQw/видео.html
► Como inserir SETA DE VARIAÇÃO em gráfico NATIVO do Power Bi
ruclips.net/video/MuqS6Pw5rx4/видео.html
► Novo Card com GAUGE - Como você NUNCA VIU
ruclips.net/video/90ZKJa13a0k/видео.html
► Aprenda a quebrar linhas nos rótulos de dados com DAX
ruclips.net/video/K62mfhR8hF0/видео.html
► Explore o poder do DAX: Converta visual nativo de Matriz em um Calendário Interativo!
ruclips.net/video/KalwfL6NypI/видео.html
► Mude para sempre a forma de criar cartões no Power BI
ruclips.net/video/gtMp3qRvzgk/видео.html
► Como criar um Layout PROFISSIONAL para o seu Dashboard no Power BI com figma
ruclips.net/video/4ySrz0QcXO4/видео.html
--------------------------------------------------------------------------
Jefferson Alves - Dados Criativos
► Inscreva-se no canal: ruclips.net/user/JeffersonAlvesDadosCriativos
► Ative as notificações (clica no sininho)!
► Curta o vídeo!
-----------------------------------------------------------------------
Redes Sociais
► Instagram: instagram.com/dadoscriativos_/
► Linkedin: www.linkedin.com/in/jeffersonallvesneves/
► Facebook: facebook.com/Jefferson-Alves-Dados-Criativos-105869708409651
-----------------------------------------------------------------------
Baixe os Arquivos
► Grupo Telegram: t.me/dadoscriativos
-----------------------------------------------------------------------
#powerbi #dadoscriativos #datavisualization #dataviz #storytelling #design #microsoftpowerbi #pbi #dashboard #dashboards #dashboarddesign #dashboarddesign #dataanalytics #analytics #businessinteligence #bi #dax #powerquery #microsoft #figma #html #css #svg #kpi #performance #ux #ui #uidesign #figma #deneb
Fala Jefferson, se o conteúdo grátis já tem um valor fora do normal, imagina seu curso. Em breve serei seu aluno, obrigado por compartilhar. Deus abençoe e sucesso 🙂🙏
Aula perfeita, seus vídeos são incríveis em breve farei seu curso.. parabéns pela aula sempre acompanhando
Há tempos que sou seu fã! Show!
Obrigado Elcio, é sempre muito gratificante receber este tipo de comentário, isso mostra que tem sido útil o conteúdo que venho compartilhando com vocês.
Deu certo aqui, muito massa, parabéns Jefferson pela aula.
@@giuseppealexandredebrito1092 parabéns meu amigo.
Simplesmente o melhor do youtube em designer de gráfico. Parabéns!!!
Profissional incrível. Em nenhuma imersão eles ensinam isso. Parabéns. Topzeira amigo
Jefferson, você é sensacional. Estou desenvolvendo um dashboard para a empresa que trabalho, e teremos uma visão por representante de vendas, e eu achei essa solução sua maravilhosamente sensacional. Valeu, ganhou um inscrito!
Parabéns, outro nível!
Jefferson, vc é monstro demais. top top
Leuciane, muito obrigado pelo feedback, fico feliz que tenha gostado da aula.
Adoro suas aulas! Parabéns.
Valeu Edina, obrigado pela participação constante no canal.
Trabalho incrível Jefferson. Obrigado por compartilhar.
Valeu Emerson. É sempre um prazer compartilhar conhecimento com a comunidade.
Já estou utilizando!!!!! Obrigada, Jefferson!!!!
Que Top Gio, fico feliz de ter contribuído.
Você é diferenciado Jefferson. Obrigado 🫂
Está aula deveria ter 10 milhões de likes
Teu conteúdo é muito top, sou teu fã!!! em breve vou comprar o seu curso. Adoro essas animações.
Muito bom Jefferson!
Parabéns, vou aderir o seu curso, muito bom!
Como sempre maravilhoso seu vídeo!
Obrigado Edina pelo feedback e apoio de sempre.
Muito bom. Parabéns pelo conteúdo.
Fantástico sua aula como sempre.
Muito legal, parabéns pelo conteúdo
Consegui reproduzir o efeito 🎉
Sensacional essa aula, pena que é apenas pra uma seleção, se puder dar uma dica pra utilizar em várias fotos selecionadas, agradeço 👏👏👏
Parabéns Rodrigo por ter conseguido. Ja anotei a sua dica para gravar um vídeo sobre
@@JeffersonAlvesDadosCriativos este visual não funciona no link de publicação
@@rodrigodesousa7160 funciona sim. Se para vc nao estiver funcionando, vc precisa ir nas configurações de admin, e autorizar a exibição de visuais nao certificados.
@@JeffersonAlvesDadosCriativos show deu certo 👏 Obrigado
Maravilha, meu amigo! Excelentes tutoriais, ainda mais pra mim, que estou ingressando no PBI. E o Velocímetro ali, vai ter tutorial tb? Rsrsrsrs... Obrigado!
Opa Ângelo, muito obrigado pelo feedback e por acompanhar o canal.
O velocímetro como é algo bem mais avançado no momento tenho aula somente no meu treinamento explicando o passo a passo, porém, vou buscar gravar uma aula para o canal.
Comecei a te seguir. Seus conteúdos são muito bons. Favor explica como faz o gauge tipo velocímetro!
Laura obrigado pela inscrição e acompanhar o canal. No momento o Velocímetro é um conteúdo exclusivo somente para os alunos do meu treinamento. Mas vou pensar em algo para trazer para o Canal.
Justo, se puder trazer algo próximo, apenas a ideia , sem o nível de detalhes já seria fantastico!
@@AlexSandroFreits com certeza vou providenciar algo a respeito
Muito bom, parabéns!
Obrigado Vitor pelo feedback.
Amei esse velocímetro da direita muito Top. Você postou um vídeo dele?
Olá Fabi, muito obrigado pelo feedback. Este é um dos visuais customizados que ensino no meu treinamento.
Estimado Jefferson, veo todos tus tutoriales y aprendido muchas cosas, una pregunta donde puedo conseguir el Odometro que muestras en varios tutoriales. Me podrias enseñas ??
Opa Jefferson, excelente conteúdo, meus parabéns!! Você disponibilizou o arquivo da medida em algum lugar?
Fala Fernando tudo bem ? Obrigado pelo feedback, fico feliz que tenha gostado meu amigo. Disponibilizei o pbix com a medida somente para os alunos do treinamento.
Para quem não é aluno, foi o motivo de eu fazer passo a passo explicando cada linha do código, para que possam acompanhar e replicar.
Top de mais!!
Obrigado pelo feedback positivo e participação Alexandre
Jefferson, aprendi muito com o vídeo. Parabéns pela didática e conteúdo.
Apenas fiquei com uma dúvida: é possível controlar a animação de modo que a mesma dure, por exemplo, 5 voltas ao invés de deixá-la contínua?
Desde já, muito grato pela atenção.
Fico feliz que o conteúdo tenha lhe ajudado. Muito obrigado pelo comentário.
Excelente pergunta meu amigo, é possível sim.
Na propriedade animation você retira o "INFINITE" e acrescenta a quantidade de loop que você deseja com o "TERATION-COUNT", como abaixo:
animation: girar 1.5s linear;
animation-iteration-count: 3;
Esse calendário do lado direto foi feito com gráfico de matriz e formatado em HTML pra ficar bem organizado sim?
Abraços, suas aulas são top demais.
Obrigado pelo feedback Edson, fico feliz que tenha gostado do conteúdo.
Foi utilizado o Visual de Matriz Nativo para criação do calendário.
Cara a aula foi muito boa, sensacional! Se não for muito incômodo, poderia me dizer qual é o visual desse velocímetro?
Fala Alex, muito obrigado pelo feedback meu amigo, fico feliz que tenha gostado.
Esse Velocímetro infelizmente não tem na loja da Microsoft, é um visual customizado que ensino a criá-lo do zero no meu treinamento.
Boa noite Jefferson, você disponibiliza a sua base de dados, para que as pessoas pratiquem ?
Tem algum vídeo no sue canal ensinando fazer gráfico de velocímetro?
Hobbit não tem, é um conteúdo exclusivo somente para os alunos do meu treinamento.
Fantástico
Valeu Ale pelo feedback e apoio de sempre man.
Professor, excelente aula!!
Tenho uma dúvida pertinente em relação ao PowerBI que procurei até em outros locais gringos mas não encontro nada relacionado a isso e é um problema de análise "simples":
Os comparativos de datas são sempre realizados em períodos iguais, mas por exemplo, tenho um faturamento fechado de 4 anos: 2014, 2015, 2016 e 2017.
Cada ano tem um faturamento associado, como realizo a análise de faturamento entre os anos de forma distintos e não somente em relação ao ano anterior, por exemplo:
- Comparar 2015 e 2014 é "simples" (um ano anterior), mas eu quero comparar 2014 com 2016 ou 2017, ou comparar 2015 com 2017 é assim por diante, fazer comparativo abertos entre os anos, se o dado começou em 2014 como cresceu em relação a 2015, ou como 2014 cresceu em relação a 2017. Pode tirar dúvida?
Esse velocímetro e show, vc ensina como fazer no seu curso?
No meu caso na empresa e travado hospedar imagens em sites, tenho OneDrive e SharePoint apenas, qual sua sugestão? Obrigado
Fala Jeferson! Existe alguma maneira, no BI, de replicar a função Index do excel? Que buscar informações com referência em linhas e colunas
Como faz pra deixar o numero piscando assim como se fosse um alerta? tem video falando sobre?
@@GustavoSouza-fn2rz no canal não, somente no meu treinamento.
@@JeffersonAlvesDadosCriativos Show Jeferson, o curso certo? ta tendo black do curso?
Boa proferssor, mais tenho porem tentei aqui o fundo nao remove, sempre aparece um cor branca consegue me ajudar ?
Tem vídeo de como vc fez esse calendário aí?
Esse calendário somente no meu treinamento.
Mas no canal, tem aula ensinando a fazer um calendário similar a este, segue o link
ruclips.net/video/KalwfL6NypI/видео.html
Tenho uma dica de conteúdo. Um gráfico em HTML ou outra forma expondo porcetagem e quantidade de ocorrências (ferimentos) por parte do corpo humano.
Salve mestre o/
Salve Philipe, opa foi rápido hein Mano.
@@JeffersonAlvesDadosCriativos Eu tô sempre por aqui! Só não tenho o hábito de comentar 🤭
@@philipedesouzasantos1201 😂😂😂😂,
quero criar uma sistema bonus de ranking para prestadores , ou seja cada pedido fechado soma 10 pontos , assim todos vão concorre conforme seu seguimento de mercado , assim todos pode ver suas colocações regional e nacional , estas pontuação zera todo ano.
tem como vc fazer
Hey Jeff, I want to subscribe to Dados Criativos but I don't speak Portuguese. Is there subtitles in English? And thank you for this video!
Hello Data Nerd,
I've just added English subtitles to this video.
foda
Muito obrigado pelo feedback @Favalone
Bom dia pessoal, alguém tem o código pronto?
@@giuseppealexandredebrito1092 show amigo, fico feliz que tenha funcionado
Alguem conseguiu. Aqui nao deu certo.
Fala man, blza ? Varias pessoas conseguiram. Verifica direitinho qual o erro que esta sendo apresentado, assim fica mais fácil ajudar.
Fala Jefferson! tudo bem? Primeiro, agradecer e parabenizar pelo conteúdo! Você é fera demais! Se puder ajudar, tb não consegui concluir a borda animada, aqui não está girando.
"
.card{
position: relative;
width: 100vw;
height: 100vw;
background: #102626;
display: flex;
justify-content: center;
align-items: center
}
.loader {
position: absolute;
width: 95%;
height: 95%;
background: #000;
border-radius: 50%
animation: girar 1.5s infinite linear
}
.borda_progresso {
position: absolute;
width: 50%;
height: 100%;
background: linear-gradient( #00fff9, transparent );
border-top-left-radius: 100vw;
border-bottom-left-radius: 100vw;
}
.fundo_img {
position: absolute;
inset: 5vw;
background: #102626;
border-radius: 50%
}
.foto {
position: absolute;
width: 80%;
height: 80%;
border-radius: 50%;
object-fit: cover;
}
@keyframes girar {
from { transform: roate(0) }
to { transform: roate(360deg) }
}
É preciso habilitar algo no power bi?
Muito bom!!! Parabéns!
Muitíssimo obrigado pelo feedback Tiago