Power Bi : Creating Dynamic SVG Visuals for a Dashboard

Рет қаралды 41,046

Күн бұрын

In this video I will show you how I retrieved a set of SVG images from the web and customized them for use as Power Bi visuals.
Give it a thumbs up if you find it useful. And the biggest thanks would be supporting the channel as a subscriber. Thank you!
SVG Icons Pulled From:
www.flaticon.com/
*UPDATE*
PBIX file:
drive.google.com/drive/folder...
0:00 Start
0:40 Dashboard Intro
2:53 The Objective
4:52 Preview Final Result
5:49 Gathering SVG Images
7:33 Working with SVG
12:18 SVG Fill Effect
14:57 SVG Continued
22:25 Importing SVG to Power Bi
41:42 Closing Remarks
************************
Equipment Used
************************
Camera: amzn.to/3lNAi2L
Microphone: amzn.to/2YUu34j
Mouse and Keyboard: amzn.to/3jbR3TM
Monitor Screen: amzn.to/3vkQcF6

Пікірлер: 76

@sricharang9537 3 жыл бұрын

Great Stuff ! The flow is very detail.

@joaorataoo 3 жыл бұрын

Very good stuff and extremely well explained. Great work!!! Keep going. Thanks.

@allanp5 Жыл бұрын

Thanks, that was really helpful. I wouldn't have thought of using SVG images for that.

@Inina12 Жыл бұрын

THIS WAS AMAZING!! The exact step-by-step I needed

@DapperDash Жыл бұрын

I am glad it helped!

@garyb3455 Жыл бұрын

Awesome! You're giving me more hope that I could do more in Power BI. Cheers!

@maryampour8914 Жыл бұрын

Wow! This is incredible 🤩

@eleftheriosioannidis2144 2 жыл бұрын

Genius! Great tutorial well explained. Thank you

@PedroAnacletoOficial 2 жыл бұрын

this is mesmerizing, thank you so much! you are so bright.

@ThepExcel 3 жыл бұрын

Wonderful! Thx a lot

@yawowusu8543 Ай бұрын

Awesome tutorials, gave me lots of ideas. Thanks a million

@miguelojeda2390 2 жыл бұрын

Greaaat explanation !!! thank you very much, keep posting

@danielmudie605 3 жыл бұрын

Wow, that's awesome! There's so much potential with manipulating SVG images! You could include all of the geometric data in the model and combine it with the Play Axis custom visual to show animations all within Power BI! Nice work 👍

@DapperDash 3 жыл бұрын

Hey, if you ever end up creating any animations using SVG, let me know. I would be interested in seeing different ways that people utilize it within Power Bi. Appreciate the comment.

@schoolictservices2502 Жыл бұрын

Thanks, great video very clearly presented and concise

@kirankumarav5217 3 жыл бұрын

Wow learnt a new thing today😃 this will help me surely great content 👍

@RamonCortes Жыл бұрын

Simple and AWESOME!

@jtpeace229 3 жыл бұрын

Your channel content is a game changer👍 I made my dashboard show employee profile pic by watching your other video. Gonna implement this gender svg icon today. Thank you!

@DapperDash 3 жыл бұрын

Thanks for the support. In exchange for my content I need you to tell me what exercise I can do to increase my bench max. I am at 215 and the goal is 225lbs by the end of the month. lol

@jtpeace229 3 жыл бұрын

@@DapperDash Sure thing! I'm no expert, but here is my 2 cents. 1. Frequency is the key to increase your bench. Try to get 3~4 bench sessions per week. 2. Incorporate bench press variations such as close grip bench press, Spoto press, pause bench press, and Larsen press. 3. Train your stabilizing muscles by doing dumbbell bench press. Your weekly workout schedule will look something like this: Bench session 1: dumbbell bench press Bench session 2: Close grip bench press & body weight or weighted dips Bench session 3: Larsen press & Your normal bench press Bench session 4: Pause bench press or Spoto press For each exercise, do 4~5 sets. Pick a weight that you can only do 6~10 reps. Not too heavy, and not too light. Do the above bench sessions for 2 weeks (8 sessions total), then test your 1 rep max. Let me know if you have any questions!

@DapperDash 3 жыл бұрын

@@jtpeace229 just to give you an update. Hit 225 today. Thanks for the help

@vaivelorum3335 2 жыл бұрын

Impressive!

@kunalr_ai 3 жыл бұрын

Thanks

@lauxlaux859 2 жыл бұрын

Thank you for making this video

@DapperDash 2 жыл бұрын

Thanks Rachel. Sorry if the video was difficult to see, it was my first video on the channel. Future ones should be more clear.

@lauxlaux859 2 жыл бұрын

@@DapperDash it was great! I understand wanting to improve but don't beat yourself up!

@ashishpawar1627 2 жыл бұрын

You are the true master 🏆🏆🙌🙌🙌🙌

@DapperDash 2 жыл бұрын

I appreciate the kind words Ashish

@ramakrishnaravula1819 3 жыл бұрын

Thank you for this vedio

@SocialMedia-io1tz 2 жыл бұрын

Awesome

@KMF7955 2 жыл бұрын

Really good walk-through. SVG's have so much potential. I wonder can you use this to show a bullet like chart in a table?

@SANJIVRAI6693 3 жыл бұрын

Just updating the tooltip with % values will look even better and replace the code that shows when you hover on the images

@Data_Policy_Analytics Жыл бұрын

Thanks for the great video! how would you work with slightly more complex SVG images within Power BI that have multiple paths that are broken up in the code (e.g. d=)? Appreciate any insights!

@RichArd-ee2qj Жыл бұрын

Hey Dapper Dash. Great vid. Haven't tried it yet but will. Comment / Question: when you were coding in Notepad ++ you cautioned against using the double quote ( " ). In PBI you created a measure with the code and updated the color using a hexidecimal color code. Did you use double quotes to update the color code? Looks like you did but the image quality on my screen made it hard to tell. Thx

@ultimatejk496 9 ай бұрын

This is an incredible Tutorial. But I have a question, What should I do if I need the filling up of Mask from top to bottom,(like emptying the Cup)? please help me

@bestbes2 Жыл бұрын

Hi Man thanks for the tutorial, i have a qeustion it works in a new Pbix file but if i copy the code to my existing dashboard it ony works static. Where i refer to a measure in the icon code it doesnt work. If i make a new dashboard with the exact same code and data it does work. For the old dashboard i make a new page without any filters or anything

@ruchaysohawan4465 3 жыл бұрын

Thank you for this, very well explained. Could this have been achieved using the Infographic Designer in Power BI?

@DapperDash 3 жыл бұрын

It is very possible. I have only used infographic designer a few times. I'm not 100% sure of all its capabilities. Definitely worth looking into. Thanks for the suggestion.

@jhdatascience Жыл бұрын

Yes it could have and easier for non-technical users. Still good te learn how we can do it ourselves as infographic also has it's l limitations. Thanks for sharing!

@ashleyow3298 2 жыл бұрын

do we need to use the table visual to display the SVG visual or can we use HTML Viewer visuals from the AppSource ?

@DapperDash 2 жыл бұрын

Ashley, I tested it out using "HTML Content" from the AppSource and it worked perfectly! It actually lets you adjust the size of the SVG.

@renatobf Жыл бұрын

How can you do with Circular SVG? Ex: Circular Progresso Bar...

@DapperDash Жыл бұрын

It should work exactly the same way. As a matter of fact, the male and female svg images shown are actually made up of two different parts. One is the body and the other is a circular svg that makes up the head. If you look closely at the svg code, you can see it is just a circle.

@carloszaldivar9371 2 жыл бұрын

Great! you’re a magician in the world of metrics. Could you help me? I have the icon but don’t change the percents. What is the problem?

@DapperDash 2 жыл бұрын

Hey Carlos. Can you provide me with your DAX code. I can see if i can help you out. My email is on the channel page, you can email me.

@carloszaldivar9371 2 жыл бұрын

@@DapperDash I didn’t find your email on your channel, I’ll appreciate if you let me know here. Thank you so much!

@DapperDash 2 жыл бұрын

@@carloszaldivar9371 dapperdash.bi@gmail.com

@MPioker 3 жыл бұрын

very good! could make model available for download?

@DapperDash 3 жыл бұрын

send me an email and I will send you the pbix file along with the data set

@DapperDash 3 жыл бұрын

@@valrhonafrance Thanks. I included a link in the description to a google drive where you can retrieve the pbix and excel file.

@elbezz 2 жыл бұрын

Thank you! could you please increase the font size a bit, it's very hard to see!

@DapperDash 2 жыл бұрын

Yes, definitely. In other videos I have done, I made sure to zoom in. I did realize that it was difficult to follow using the full screen. If there was a particular section of code you needed, let me know.

@elbezz 2 жыл бұрын

@@DapperDash Thank you very much indeed!

@dalto9139 3 жыл бұрын

Hello good afternoon! I followed all the steps, but when playing the filter, it does not execute the path. It is as if the formula does not run. Leaving the icon 100% filled. How can I solve?

@yami_anahi 3 жыл бұрын

Could you fix it? I have the same problem.

@DapperDash 3 жыл бұрын

can you post the code to your svg image? I can take a look and see why it may not be running.

@wiambenmoussa6916 3 жыл бұрын

@@DapperDash I'm facing the same problem too

@DapperDash 3 жыл бұрын

@@wiambenmoussa6916 can you post the code to your SVG measure and I can take a look

@wiambenmoussa6916 3 жыл бұрын

@@DapperDash Male icone = //Define the % to be colored in: VAR percentageArea = DIVIDE('Effect'[TotalHommes],'Effect'[TotalFemmes]+'Effect'[TotalHommes]) //Define the colors: VAR fillColor="#00477A" VAR backgroundColor="#cccccc" VAR Icon= "data:image/svg+xml;utf8, " Return Icon Thank you in advance :D

@ngocnguyen4616 Жыл бұрын

Hi, I edit the SVG file with Notepad ++. However , in Notepad ++, it not show the code in different lines as yours ( Everything just in one line) How to solve it?

@DapperDash Жыл бұрын

Hey Ngoc, if you are working in a simple .txt file, you won't have the formatting that I have. Make sure you are opening the SVG file in Notepad++. Something that should also work is changing the language of the Notepad++ file to HTML or even XML. There is a "Language" menu at the top of Notepad++.

@mangeshmehendale4139 3 жыл бұрын

I was wondering if you have any sense of whats going on. My SVG images just dont render in Power BI. I downloaded a bunch of them and converted them into SVG compliant images by appending the usual syntax. When I push them out to a matrix or table, I keep getting the broken image icon. I am certain that I am not doing anything wrong based upon the following evidence. 1. image data renders properly using HTML viewer. 2. I have downloaded 4 SVG images of which 1 renders in the matrix - the remaining 3 dont. Each of the 4 have identical syntax to enhance the image data to SVG. Out of frustration I used the very same icon you are using from flaticon (male) , scooped up the image data, appended the SVG prefix and suffix and pushed it to a matrix. Nothing. The bizarre part is that 1 of the first 4 icons actually renders as an SVG image while the remaining 3 do not. Also, the same code used on the male icon image data on this video (downloaded from flaticon too) doesnt render as an SVG image. Have you encountered this issue earlier? Would you have any sense what I am doing wrong????

@DapperDash 3 жыл бұрын

Mangesh, I am not sure what is going on with your images. One difference between your data and mine is that my images are saved into a Dax Measure, while it sounds like yours are saved in a table as a column variable. I have not tried to work with svg inside of a table. If you are saving yours in a table, it may be better to use the image URL as opposed to the svg code in order to get the image to render. I don't believe that you would have the dynamic flexibility to alter the svg image in a table, as you would in a DAX Measure. Hopefully that makes sense.

@fashihahahmad9255 2 жыл бұрын

hi, my problem also like yours. how did you fix this?

@ahmedmouafki2574 2 жыл бұрын

thank you Sir i need your help to deal matrix in Power Bi How i can contact you thank again

@DapperDash 2 жыл бұрын

Ahmed, I apologize for the very delayed response. Hopefully you were able to figure out your problem. My email is on the channel page. You can email me with any questions, I would love to help.