Target LOADING Effect on the NEW Card Visual in Power BI

the new card visual got its first upgrade which is reference labels and that is a big one because now we can add in Easy Way reference points to the main values that you show on a card visual but with a few tricks we can also use that feature to add data bars like this one over here or this one over here now let me show you how it's done now let's dive in straight away and let's see how we can use the new reference labels feature for the new card visual now to follow along you need to be on the November 23 version and you need to go to option settings preview options and turn the new card visual on and then you're ready to go all right so what we're going to focus on is how can we use that new reference label feature to add a data bar to the new card visual like this over here or we can make it look like this now let's go over it step by step if you want to get an overview of the new card visual first then check out this video first all right now let's get started first of all we have to create a new card visual so we go over here to the Home tab and then to the charts and there we're going to use the new card visual all right now for this example we're going to have a look at the sales of the current quarter and see how it compares to the forecasted value now I already have a measure sales current quarter now let me open it up and there we just have the sales actuals with a filter on the current year and current quarter that's it okay now I'm going to take that measure and drag it onto the visual and it shows 0.0 million why is that because I'm using a custom formatting string that already shows my values in millions and if I go to the formatting options and then over here the call out value there the display unit is set to Auto and instead of Auto which chooses to again show it a Millions I'm going to put this To None all right and now it shows correctly 61.4 m ion all right just how I set it up in the formatting straight now that we have this I want to add extra detail to this and show also how it compares to forecasted value now the thing is though if we have a closer look here at the options well here there's no option that lets me add extra information behind it so instead of using here the call out value I'm going to turn this one off all right and we're going to use reference labels instead the new feature that wasn't there before the November 23 version so let's open this up and let's see what we can do over here now first of all we can see we can choose the series now all our sales current quarter but over here we just have one main series current quarter so let's select it then we can add a label so let's click on add data and over here we can choose a measure now the measure needs to show what I want to have as the main value first okay so that is the same sales current quarter all right and here we have again the same problem it shows 0.0 million so let's fix that first now what you have to watch out for is what label is selected even though at the moment we just have one well here we want to have the sales Curr quarter then here we have the title which is that first part basically just the measure name of what you use for that label now that I don't want to show all right and then we can go to the value let's open that up and over here we can play around with how big should that value show right so instead of 14 I want to show it well in font s side size 28 and maybe you want to have it balls B and you can play around with that now another thing that you see over here is display units now I don't want to leave it on auto because I'm using a custom formatting string I'm going to put this To None all right now if you want to know all of the details about custom formatting strings then just check out this video over there all right so we have the correct value showing for the sales of the current qu in a way that we wanted to show with the right units but it shows there at this bottom section below a vinyl line with a different background color and that I want to change now to do that we have to go back over here then go here to the Divine and background and turn it off but it's grayed out why is it grayed out because it depends on what is currently selected here for the label if I switch to all then well we can turn the background off but we cannot turn the divider off H annoying well that again depends on the selected series if I switch this one to all you see uh then we can also turn the divider line off all right so always watch out what is selected which series is selected for the label and which series is selected over there at the top all right so only then you can turn these features off now why did we go through all of this effort if the result that we got to now looks almost the same as what we had before with the call out value op now that's because because with reference labels we have three different parts now let me go there again let's open the reference labels let's select a series and here you see we have three different parts we have the title the value and the detail now in this case we don't want to have a part before the number so title has done enough then here we have the value itself that's one we want to show but now we also have over here the detail part and that we're going to use to add something extra behind it for example the vage difference to the forecast okay now we can do that but we need a measure so let's add a measure so I go over here add a new measure all right now let's call this measure sales versus forecast and we're going to have different parts so let's use variables and the first one I'm going to call just value the value the main value that I want to show which is going to be the actual sales versus the forecast so I can use the divide function and say that I want to have that actual sales and divide that by the forecast sales okay now that will give us the value but to control how it gets formatted we use a format function and then there at the end we can use a formatting string so let's say we want to show the percentages all right then we would have zero% now with one decimal always then 0.0 like I have over here okay now this we're going to combine with some text so pretext all right and there want to say that this is a comparison of actuals to the forecast now often you use a data icon so I can use Windows key Dot and then over here go to the symbols that I use a lot and then over here look for Delta icon which I recently used over there perfect now I want to have the difference to the forecast in percentages so maybe something like this all right and then another variable for the spaces that we going to add now that will need a little bit of extra attention in second now over here we can also use the quotation marks just a space in between all right and then the final variable for the label itself now I want to start off with a space okay so let's start with that one then I want to combine that with the pretext all right and then I want to have another space okay so I refer to that variable and that needs to be follow by the value all right and then the value and this is basically the whole label that we want to return so because we use variables in the end you need a return statement and I want to return the label perfect okay so now that we have this measure let's go and use it there for the detail part of the reference label so I'm going to open the formatting options again go to the reference labels detail and make sure that here for the label the sales qu selected all right then go to detail and then we can say add data and choose the measure that we just wrote okay now that looks good we have now that extra part showing behind it and the nice thing is we can completely control the formatting of it so we can make it for example a little bit smaller or bigger and make it look exactly the way we want it to look like and we can determine for example also the font color again with another measure but we save that for later all right now I'm just thinking I'm seeing the wrong values let me just double check that value for the measure again so I'm going to go back now over here I don't want to have the sales actuals but the sales for the current quarter and the forecast for the well current quarter okay perfect now another thing that I want to do is add a little bit of extra space in between the text the pre-text and the values now therefore I'm going to go and add some Extra Spaces here H now you see that the exra spaces get removed now to prevent that from happening we need a space like character that doesn't get removed which we can get from at character.com so I'm going to go to that website copy it from here and then go back and then here where we have the spaces I'm just going to paste what I just copied all right now maybe we also want to use a r function if we want to repeat that space character multiple times let's say five times all right let's see how that looks like okay now you see this does work and we do have some extra space now between the preex the value and and the main value at the beginning now if you want to reduce the space that we have vertically between that label and our reference label then we need to go back to formatting options now I believe we have to go to call out and then from here spacing and that vertical spacing we can decrease all the way for example to zero and you see now we have less space there all right now the value for the reference label I want to have in Bol so let's open here the reference label section and then go here to value and make it both Perfect all right so now the moment that you have been waiting for how to add the data bar like this one over here okay now for that again we are going to use a new measure so I'm going to go over here add a new measure all right now let's call this measure data bars or data bar for the sales versus forecast okay now this measure is going to return the datab bar okay now for that we have quite a few components so again variables let's start with the very first one the total number of icons that we want to show and each icon is going to be a building block for the bar that we building and that bar can be blocks circles Stars whatever you want okay so we're going to have a total number of icons number of icons total okay now let's put it to them and then the next one then we're going to have a certain number of icons that we want to faill all right so let's call this one number of icons fail let's put it to three all right and then we have the number of icons again so number of icons are going to be empty so 10 minus 3 is 7 so I can refer back to the previous variable so the total number of icons minus the number of icons that we are going to fill up okay so then the next part now we want to have a variable for the icon itself so we going to have icon fill all right that's going to be one icon and then we're going to have a different icon icon empty which is going to be again another icon okay now instead of X and Y we can also look for the actual icons that we're going to use a bit later so window Sky Dot and then search over here for the icon that you want to have so so for example here these circles I could use or I used before also these little squares or triangles whatever you like now um you can also Google so for example over here Circle unicar go there and just copy that uni character all right so once you have found your icons just copy them over to your measure and then here the last variable that's going to be the variable that's going to return the actual data bar so let's call it data bar and here we can again use that wrapped function now first of all we want to repeat the icon fill and how many times Well we want to have whatever that variable is going to return icons fill all right so for now that is filled out as free okay and we want to combine that with another part where we can use that other icon icon empty and that one we want to repeat as many times as we say in the number of icons empty variable okay now once you have this then we can return the very last variable okay the data bar variable all right so now that we have this measure the hard part is behind us and we can use it as a reference label on our new card visual now let's see how this works let's go to the formatting options and then open the reference labels section now here we want to add labels and it's going to be determined by that new measure that we just wrote so the data bar sales versus forecast okay all right now that looks already pretty good we have now three circles that are filled up and the empty circle seven of them behind them and some weird hyphens there at the end well that is just placeholders for the detail section which is currently blank right so we have to go over here and then select the new label data bar and then go over here turn the detail section off okay now not too bad right so we have here these fil up circles and it's basically just text that shows so we can go into to Value we can make them bigger or smaller and we can play around with the font color as well so we can make them blue for example all right so now that we have this how can we bind it to our data how can we make it change dynamically instead of hardcoding here that three circles should be filled up and the other ones shouldn't well one thing that you might point out is well over here you have 74% so how many circles should be filled up well here you could come up with your own rule right so you could for example say when at 74 we fill up seven or eight circles depending on how you want to do the rounding and if you need to be more exact well then you can simply show more circles all right so for Simplicity I stick you to 10 circles okay so it's not super exact it just gives you an indication right now that is important let's now go back to the measure and bind it to the data so I'm going to go over here datab bar sales versus forecast that's the measure now the value that needs to be dynamic here is the number of icons that need to be filled up and as a consequence also the number of icons that need to be empty now instead of hardcoding that three let's get rid of it and let's calculate how many it should be based on the percentage of the forecast value all right so let's add another variable that returns that value so percent of forecast okay and this we can calculate again with the divide function so divide and then here we have the current quarter actual sales so the actual sales of the current quarter so current quarter actual sales divide that by the current quar forecast that sales okay and then that value let's say it's now 74.3% so that we can then multiply by the number of icons total okay so that variable over there so what will happen if it is 74% like it is at the moment seven icons would be filled up if it goes over the 75% then we could round it to 80 that's kind of the default now if you want to have a little bit more control then you can also use your round function right to control that a little bit more round up round down now another thing that you have to pay attention to is what happens actually then if we have actual sales that above the forecast right because then we would get more icons that need to be filled up as the total number of icons and that would not make sense so we need to wrap this inside of a Min function and take the minimum of that value and 100% or just a one okay good so that's it now let's see what it returns at the moment and there you go as predicted we have seven icons that nicely get build up what if you want these circles to be bigger or smaller that you can control on the formatting option now these are reference labels and just the values of these reference labels and you see if I make that Fone a little bit smaller or bigger you see it takes more or less space all right now the smallest that we can make them is eight that will be super small however that could allow you to for example add more of these icons right so now I could go for maybe 20 and let's see what happens then you would be a little bit more exact you would have smaller blocks however and not that b anymore it just depends also a little bit on how much space you can give the visualization okay now let's say we want to have the 10 from before and then I want to have the font size a little bit bigger again so I'm going to make it 14 and another thing that we can play around with is the icon itself right so for now we just chose the circles but if we go back over here we can also go for different icons let's play around with this let's for examp example go for rectangles or squares now I just copy them over now there you go and let's see how this looks like now that looks also pretty good now not only the icon you can play around with you can actually also go to the formatting options and play a little bit with the font type now instead of s GOI UI I could also go here for you see the Suns unigard now you see that would already make it smaller and then over here also play around with for example B and cursive you see that also has an interesting effect okay now I'm just going to change it back once more and now I'm going to choose icon that kind of looks similar however it doesn't have any space around it and we have that for the failed one and let me also copy over the nonfilled one all right and let's see how that looks and you see that is also kind of interesting all right so that's the whole trick how to build a data bar for the new card visual using the new reference label feature all right now let me give you one more example now instead of having one bar it sometimes also makes sense to have more than one bar for example if you want to compare the current quarter with the previous quarter right and then have two bars and add some extra detail what the percentage difference is now let's see how we can do that now I'm going to go back to the card visual go over here to the formatting options and first of all let's get rid of the data bar that's already there and maybe for now let's also get rid of that extra detail label that we have for that first reference label so select label sales current quarter detail label I'm going to turn off now here under the measures I already set up two measures with the data bars for the current quarter and for the previous quarter now over here you see that the logic is almost the same the only difference is here percentage to the forecast is now Max sales quarterly so I look at what basically that maximum Point needs to be that's going to be used for the sizing of the the bars okay now here you can use a Max X iterate over the year quarters and then calculate the sales actuals and pick the maximum one all right and once we have that Max sales quarterly then we can divide the current quarter sales by that number and multiply it by the number of icons total to come up with a value for how many ions we want to fill up okay now everything else that follows is the same now for previous quarter there I've done exactly the same so no difference but then for the previous quarter and now we can use these two as reference labels for the new card visual so I go here to options now here reference labels is the place to go and here we can add those new measures as labels so current quarter and we have the previous quarter all right now that doesn't look so good they have the same size however if I would make it bigger you see ah then there clearly is a difference now here we just need to play around with the formatting again so what I'm going to do is go to value and make the value a little bit smaller for those two now make sure that the right label is selected so current quarter and previous quarter value and I'm going to set it to maybe even smaller than that let's go for eight or maybe a little bit bigger done just like this okay and for the other one we do exactly the same we can also turn the detail off and then we do the same for current quarter so down as font size and then here detail going to turn off now if you want you can also go for a different color so maybe here you want to go for blue again and then for the other one for the previous quarter sales maybe also blue but a little bit lighter okay now I'm going to resize it so that it nicely fits into the space that I allocate here for that new C indidual now we're not done yet we can still make use of the extra detail part right so we can have again another measure so here you see we have label sales current quarter and previous quarter where we can add any logic we like so over here we can say all right we start with a a little bit of extra space and then if the sales for the current quarter is larger than the previous quarter one then we want to have an error up otherwise down and this needs to be followed by the sales quarter of quarter percentage and to control the formatting we wrap it inside of a format function now this we can then use for the detail part of the correct label so that's going to be data bar sales current quarter then we go to detail turn it on and then we get these two hyphens now that is just the placeholder when it's blank now we can add the data and that's needs to be the label for the sales current quarter and you see minus 5% now it's a little bit big so I'm going to make it a bit smaller so over here let's play around with the size done that kind of works and then for the previous quarter we do exactly the same also there I have a measure set up so I'm going to choose that label go over here to detail turn it on and then here choose that other measure that I have which is called sales label sales previous quarter all right there it is also this one we can make a little bit smaller you see you have kind of full control over every single element which is kind of nice and this is just the value that gets returned from the previous quad nothing special now then there a another step we can apply conditional formatting to it for example here when it's below zero it needs to show in red now again make sure that the right label is selected all right then go to the details section there I want to have conditional formatting applied to let's say the font and click you on the FX button now we could write a measure or just use a rule where we want to say something like if it is bigger than or equal to zero and smaller than the maximum then I want it to show in green okay so just pick a green color and then another rule where we want to have kind of the opposite if it's below zero then it needs to show in red and it shows in green which means I made a mistake let's go back and you need to of course make sure that it's based on the right measure right so over here it's sales C quarter it should be based on the sales quarter quarter percentage okay now now it shows correctly in right all right that's it now we have two reference labels that we converted to data bars and that also show extra information using that detail section and conditional formatting to make it extra nice all right now I hope that you like this little trick and have fun experimenting with all of the different icons I'm curious what you come up with if you have any questions let me know in the comment section below I want to thank you for watching and if you want to build reports together with me then check out my upcoming training over here if can wa then I have these videos over here so that you can keep on going I hope to see you in the next video

Channel: How to Power BI

Views: 40,707

Keywords: powerbi, howtopowerbi, datatraining.io, data training, power bi, new card, reference labels, reference label, data bar, dax, design, visualisation, kpi card, percent of total, comparison, power bi training, powerbi tutorial, conditional formatting

Id: KgkOY4-sUUQ

Length: 25min 12sec (1512 seconds)

Published: Thu Dec 07 2023