Scribd
Upload
36 views15 pages

New - Card - Visual - Oct - To - Nov - 2023 - Step - by - Step - Guide

Uploaded by

sanjeev091988
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
36 views15 pages

New - Card - Visual - Oct - To - Nov - 2023 - Step - by - Step - Guide

Uploaded by

sanjeev091988
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Step By Step Guide

New Card Visual With


Reference Labels
Published: October- November 2023
1:
Create Basic KPI cards

STEP 1
Add NEW Card Visual to the page
1:
Create Basic KPI cards

STPE 2

Add NS$, GM% and Net Profit % to the Data Field


1:
Create basic chart for Current year P& L values VS
Last year (LY) values

STPE 3

Go to Callout Value -> Values


Change Fonts to Segoe UI Bold and size to 18
1:
Create Basic KPI cards

STPE 4

Go to Label -> Change Fonts to Segoe UI Semi bold – Size:8

Change its Position to “ Below Value”

Go to Apply Settings to and change Series name to specific


name of the series . i.e. NS($), GM%, Net Profit %

Change Text from “Auto” to respective name such as, in


case of NS($) -> Net Sales ($)

repeat the same for other two cards


2:
Adding Images

STPE 5

Go to Image -> Select series name NS$ ->


Brows local disk for icon files and select the
appropriate image which is

Repeat the steps for other cards i.e. GM% and


Net Profit %
3:
Adding Reference labels

STPE 7

To add reference labels tot eh card we need to create some Measures as


follows

RL 0101 NS$LY = SWITCH( TRUE(),


[Δ NS $] = BLANK() , "NOT AVAILABLE" ,
[NS BM $] < 1000000000 , "$" & Round(([NS BM
$]/ 1000000),2)& "M",
[NS BM $] > 1000000000 , "$" & Round(([NS BM
$]/ 1000000000),2)& "Bn"
)

RL 0101 NS$LY Details = SWITCH( TRUE(),


[Δ NS $] = BLANK() , "" ,
[Δ NS $] >0 , " +" & Round(([Δ NS $]*100),2) &
"%" & " ",
[Δ NS $] <0 , " -" & ROUND(([Δ NS $]*100),2) &
"%" & " 🡶 "
)

STPE 8

Go to Reference Labels -> Select Series “ NS $” -> in Add Label Section insert
RL 0101 NS$LY measure to create first Reference label.
3:
Adding Reference labels

STPE 9

Go to Select Label -> choose RL 0101 NS$LY

Changing the title to custom -> Change the text to


“Last Year: “

Go to Details -> Add Data -> insert “RL 0101 NS$LY


Details” measure to it.
3:
Adding Reference labels

STPE 10 RL 0301 NP%LY =


SWITCH( TRUE(),
[NP % BM] = BLANK() , "NOT AVAILABLE" ,
Similarly Create measure to add Reference labels to [NP % BM] >0 , Round(([NP % BM] * 100),2) & "%" ,
[NP % BM] <0 , "-" & Round((ABS([NP % BM]) * 100),2) & "%"
GM% and NP% Cards and apply them exactly like )
repeating STEP 8 & STEP 9 for them. RL 0301 NP%LY Details =
SWITCH( TRUE(),
[Δ NP %] = BLANK() , "" ,
Here are the Formulas for Measures [Δ NP %] >0 , " +" & Round(([Δ NP %]*100),2) & "%" & " 🡶 ",
[Δ NP %] <0 , " " & ROUND(([Δ NP %]*100),2) & "%" & " 🡶 “
RL 0201 GM%LY = )
SWITCH( TRUE(),
[GM % BM] = BLANK() , "NOT AVAILABLE" ,
[GM % BM] >0 , Round(([GM % BM] * 100),2) & "%" ,
[GM % BM] <0 , "-" & Round((ABS([GM % BM]) * 100),2) & "%"
)

RL 0201 GM%LY Details =


SWITCH( TRUE(),
[Δ GM %] = BLANK() , "" ,
[Δ GM %] >0 , " +" & Round(([Δ GM %]*100),2) & "%" & " 🡶 ”
[Δ GM %] <0 , " " & ROUND(([Δ GM %]*100),2) & "%" & " 🡶 "
)
4:
Formatting Reference labels & Card

STPE 11

To assign dynamic colours to the details section ,


Green Background to highlight +ve values and Red to
highlight –ve Values, create one measure for details
on each card.

RL 0101 NS$LY Detail BG color


= if ( [Δ NS $] < 0 ,"#FF0000" , "#B0BF1A")

RL 0201 GM%LY Detail BG color


= if ( [Δ GM %] < 0 ,"#FF0000" , "#B0BF1A")

RL 0301 NP%LY Detail BG color


= if ( [Δ NP %] < 0 ,"#FF0000“ , "#B0BF1A")

- Go to details once again -> Change Font colour to


White ( #ffffff)

And Press button beside “Color” to assign


dynamic values to the detail’s Background

Select the measure created for the NS$ card


4:
Formatting Reference labels & Card

STPE 12

- Repeat the same for rest 2 cards

STPE 13

- Change Title Fonts to Segoe UI Semi bold – 9 px


- Change color to “#1C4A92”

- Change Value Fonts to Segoe UI – 9 px


- Change color to “#1C4A92”

- Change Details Font size to 9px as well

Repeat the same for all other cards and reference


labels
5:
Formatting for Aesthetics

STPE 14

Go to Size and Style -> Turn off the Background


first

Go to Padding -> Make all sides - 0 PX

Go to Cards -> Shape


Select the Round Rectangle and Rounded
corners to 8px

Go to Cards-> Padding
Change them 24px to sides and 16px for Top
and Bottom

Go to Cards -> Border


Change them to “#95CAF1” and make it 50%
Transparent
5:
Formatting for Aesthetics

STPE 15

Go to Reference Label again

Select Series -> “ All”

Go to Divider -> Change color to “#95CAF1” with


Transparency settings to “ 50%”

Go to Divider -> Layout -> Change Horizontal and


Vertical alignments to Centre and Middle
respectively .

Go to Spacing -> Set Customise outer padding


“ON”

Padding Before divider line -16px


Padding After divider line– 8px
5:
Formatting for Aesthetics
STPE 17
STPE 16
Go to Cards -> Accent bar -> Set color to
Once again Go to Callout values section “#1C4A92” & width to 6px

Go to Layout- > Keep Vertical alignment to “Middle” Just make minute adjustment to width
and height of the visual to make them
Change Callout size to 65 % appropriate.

And here is your visual is ready.


RESULT

You might also like