Community ChampionSVG Animation - Bouncing/Blinking Stephen Few 'Red Dot'
OK, this was not rendering for me in Edge when I "Published to Web" but it does work in Desktop so you may have to download the PBIX to see it. Essentially steals from Anonymous's Quick Measure but uses SVG to animate the red dot. Fun.
And yes, I realize that the <blink> tag was the most despised tag ever in the history of HTML...
Bounce
Bounce =
VAR __color = "Red"
VAR __lineColor = "Black"
VAR __lineThickness = 1
VAR __radius = 9
VAR __opacity = 1
VAR __rand = RAND()
VAR __header = "data:image/svg+xml;utf8," &
"<svg
xmlns:dc='http://purl.org/dc/elements/1.1/'
xmlns:cc='http://creativecommons.org/ns#'
xmlns:svg='http://www.w3.org/2000/svg'
xmlns='http://www.w3.org/2000/svg'
width='100%' height='100%'>"
VAR __footer = "</svg>"
VAR __shapeTextCircle = "<circle cx='10' cy='30' r='" & __radius & "' fill='" & __color & "' fill-opacity='" & __opacity & "' stroke='" & __lineColor & "' stroke-width='" & __lineThickness & "'> " & "<animate attributeName='cy' from='30' to='9' dur='.5s' begin='0s' repeatCount='indefinite'/></circle>"
RETURN IF([Flag],__header & __shapeTextCircle & __footer,"")
Blink
Blink =
VAR __color = "Red"
VAR __lineColor = "Black"
VAR __lineThickness = 1
VAR __radius = 9
VAR __opacity = 1
VAR __rand = RAND()
VAR __header = "data:image/svg+xml;utf8," &
"<svg
xmlns:dc='http://purl.org/dc/elements/1.1/'
xmlns:cc='http://creativecommons.org/ns#'
xmlns:svg='http://www.w3.org/2000/svg'
xmlns='http://www.w3.org/2000/svg'
width='100%' height='100%'>"
VAR __footer = "</svg>"
VAR __shapeTextCircle = "<circle cx='10' cy='20' r='" & __radius & "' fill='" & __color & "' fill-opacity='" & __opacity & "' stroke='" & __lineColor & "' stroke-width='" & __lineThickness & "'> " & "<animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/></circle>"
RETURN IF([Flag],__header & __shapeTextCircle & __footer,"")
EDIT: Because I feel that with the power of SVG that all Power BI reports must henceforth be gaudy and ridiculous, I have added Spinner, Square, Swipe and Twirl effects.
Spinner
Spinner =
VAR __color = "Red"
VAR __lineColor = "Black"
VAR __lineThickness = 1
VAR __radius = 9
VAR __opacity = 1
VAR __rand = RAND()
VAR __header = "data:image/svg+xml;utf8," &
"<svg
xmlns:dc='http://purl.org/dc/elements/1.1/'
xmlns:cc='http://creativecommons.org/ns#'
xmlns:svg='http://www.w3.org/2000/svg'
xmlns='http://www.w3.org/2000/svg'
width='100' height='100'>"
VAR __footer = "</svg>"
VAR __shapeText = " <rect stroke='Black' width='50' height='50' x='25' y='25' fill='Red'>
<animateTransform
attributeName='transform'
attributeType='XML'
type='rotate'
from='0 50 50'
to='360 50 50'
dur='2s'
begin='0s'
repeatCount='indefinite'
/></rect>"
RETURN IF([Flag],__header & __shapeText & __footer,"")
Square
What? It moves in a square, sheesh...
Square =
VAR __color = "Red"
VAR __lineColor = "Black"
VAR __lineThickness = 1
VAR __radius = 9
VAR __opacity = 1
VAR __rand = RAND()
VAR __header = "data:image/svg+xml;utf8," &
"<svg
xmlns:dc='http://purl.org/dc/elements/1.1/'
xmlns:cc='http://creativecommons.org/ns#'
xmlns:svg='http://www.w3.org/2000/svg'
xmlns='http://www.w3.org/2000/svg'
width='100%' height='100%'>"
VAR __footer = "</svg>"
VAR __shapeTextCircle = "<circle cx='10' cy='30' r='" & __radius & "' fill='" & __color & "' fill-opacity='" & __opacity & "' stroke='" & __lineColor & "' stroke-width='" & __lineThickness & "'> " & " <animateMotion
dur='1s'
begin='1s'
fill='freeze'
path='M0,0 L0 10, L10 10, L10 0, L0 0'
repeatCount='indefinite' />
</circle>"
RETURN IF([Flag],__header & __shapeTextCircle & __footer,"")
Swipe
Swipe =
VAR __color = "Red"
VAR __lineColor = "Black"
VAR __lineThickness = 1
VAR __radius = 9
VAR __opacity = 1
VAR __rand = RAND()
VAR __header = "data:image/svg+xml;utf8," &
"<svg
xmlns:dc='http://purl.org/dc/elements/1.1/'
xmlns:cc='http://creativecommons.org/ns#'
xmlns:svg='http://www.w3.org/2000/svg'
xmlns='http://www.w3.org/2000/svg'
width='100%' height='100%'>"
VAR __footer = "</svg>"
VAR __shapeTextCircle = "<circle cx='10' cy='30' r='" & __radius & "' fill='" & __color & "' fill-opacity='" & __opacity & "' stroke='" & __lineColor & "' stroke-width='" & __lineThickness & "'> " & " <animateMotion
dur='1s'
begin='5s'
fill='freeze'
path='M0,0c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3 c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7
c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5
c1.9-2.1,3.7-5.5,6.5-6.5'
repeatCount='indefinite' />
</circle>"
RETURN IF([Flag],__header & __shapeTextCircle & __footer,"")
Twirl
Because spinning a circle about its' center does not make for great animation...
Twirl =
VAR __color = "Red"
VAR __lineColor = "Black"
VAR __lineThickness = 1
VAR __radius = 9
VAR __opacity = 1
VAR __rand = RAND()
VAR __header = "data:image/svg+xml;utf8," &
"<svg
xmlns:dc='http://purl.org/dc/elements/1.1/'
xmlns:cc='http://creativecommons.org/ns#'
xmlns:svg='http://www.w3.org/2000/svg'
xmlns='http://www.w3.org/2000/svg'
width='100%' height='100%'>"
VAR __footer = "</svg>"
VAR __shapeTextCircle = "<circle cx='20' cy='30' r='" & __radius & "' fill='" & __color & "' fill-opacity='" & __opacity & "' stroke='" & __lineColor & "' stroke-width='" & __lineThickness & "'> " & "
<animateTransform
attributeName='transform'
attributeType='XML'
type='rotate'
from='0 25 25'
to='360 25 25'
dur='1s'
begin='0s'
repeatCount='indefinite'/>
</circle>"
RETURN IF([Flag],__header & __shapeTextCircle & __footer,"")
20 Replies
Perfect. The blick is exactly what I was looking for.
Thank you Greg. This was helpful. I ll let you know if it satisfies my report requirements.
Hi Greg, is it possible to add two images in one?
I am using circles filled with colors for representing the status of a specific process. But since there are a lot of rows and columns and colors involved I am trying to make it easy for the users to track a row.
I am trying to have a line in front and end of the circle so that it will look like a connected statuses using a line (attached an image) . I am assuming its possible but not sure how to write the code for a line similar to how you ve given me one for circle. Is there a place where I can look at to get how these images can be coded?
- Greg_Deckler
Yes it is, it is actually just multiple elements of a single image. For example, the below will get you a line with a white circle centered on it. See if this is more what you are thinking of:
LineDot = VAR __indicator = SUM([Column1]) VAR __radius = 9 VAR __opacity = 1 VAR __lineColor = "Black" VAR __color = "White" VAR __header = "data:image/svg+xml;utf8," & "<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='50' height='20'>" VAR __footer = "</svg>" VAR __shapeTextCircle = "<circle cx='25' cy='10' r='" & __radius & "' fill='" & __color & "' fill-opacity='" & __opacity & "' stroke='Grey' stroke-width='1' />" VAR __shapeTextLine = "<line x1='0' y1='10' x2='50' y2='10' stroke='Black' stroke-width='4' />" VAR __shapeText = __shapeTextLine & __shapeTextCircle VAR __return = __header & __shapeText & __footer RETURN __returnNow, we could extend the line and put another circle on the line as well but I was thinking that you would have multiple status indicators in your table columns or no? Also, if you want the blinking, I could put that in there as well so that just the circle blinks and not the line.
Thank you Greg
I ll attach one sample (snapshot) on how the status will look. A particular process will have one circle representing a status. IT could be a green circle for complete, blue for in progress etc.
The line will just connect the status of different processes together
I used your code below to add a circle in front and end of the circle, but it looks like the attached (line and Circle)
Status_Code is a column on one of the tables I ve.
LineDot =
VAR __NA = "White"
VAR __lineColor = "Grey"
VAR __lineThickness = 2
VAR __radius = 9
VAR __opacity = 3
VAR __rand = RAND()
VAR __header = "data:image/svg+xml;utf8," &
"<svg
xmlns:dc='http://purl.org/dc/elements/1.1/'
xmlns:cc='http://creativecommons.org/ns#'
xmlns:svg='http://www.w3.org/2000/svg'
xmlns='http://www.w3.org/2000/svg'
width='100%' height='100%'>"
VAR __footer = "</svg>"
VAR __shapeblinkCircle = "<circle cx='10' cy='20' r='" & __radius & "' fill='" & __NA & "' fill-opacity='" & __opacity & "' stroke='" & __lineColor & "' stroke-width='" & __lineThickness & "'></circle>"
VAR __shapeTextLine = "<line x1='0' y1='10' x2='50' y2='10' stroke='Black' stroke-width='2' />"
RETURN IF([Status_Code]="7",__header & __shapeTextLine & __shapeblinkCircle & __shapeTextLine & __footer,"")
Hi Greg_Deckler
Thank you for the code.
I tried to implement this,but I am getting simple IMAGE PATH(code pasted below) in the output.
Can you explain this below SVG path
VAR __header = "data:image/svg+xml;utf8," &
"<svg
xmlns:dc='http://purl.org/dc/elements/1.1/'
xmlns:cc='http://creativecommons.org/ns#'
xmlns:svg='http://www.w3.org/2000/svg'
xmlns='http://www.w3.org/2000/svg'
width='100%' height='100%'>"If they are some external paths I wont be able to use those to get the image because of network restriction.Can you suggest something.
Thank you in advance.
Hi,
could you please explain below code or guide how to proceed.I want to create blinking pop up.As I am getting XML code (below code)in output table when I use it in Test file.
VAR __header = "data:image/svg+xml;utf8," &
"<svg
xmlns:dc='http://purl.org/dc/elements/1.1/'
xmlns:cc='http://creativecommons.org/ns#'
xmlns:svg='http://www.w3.org/2000/svg'
xmlns='http://www.w3.org/2000/svg'
width='100%' height='100%'>"Thanks in advance.
- Greg_Deckler
Not 100% I completely understand the question. A proper SVG must include the header as you have posted, the actual SVG graphic markup and the footer "</svg>" to close the markup. If you do not include all three elements, it is not a proper SVG. In terms of the network restrictions, that's an interesting issue that I have not experimented with. Sounds like overly restrictive security.
Hi Greg_Deckler ,
My first issue of displaying Image has been resolved.I was missing out the Image Category property of measure.
For second scenario where Network restriction is there,how will I embed the image in </SVG> tag
code where we put the Image URL to access it.
Also I want to show it as a blinking pop up in ellipse shape.Any suggestion how this can be achieved.
Thanks in advance.
Greg_Deckler this looks really cool. I am trying to figure out a way to show a slowly blinking circle on a report to draw attention of users. I Tried to use the blink code measure as Text (using conditional formatting) for a blank button visual. I also tried to use it on its own in a table, in a card but I dont get to see that effect. Is it somehow possible to make use of it in above visuals?
Hi Greg,
The blink formula I have implemented without any errors and also changed the Data Category as "Image URL", but when taking the measure onto table visual it's showing as broken as below:
Any suggestions..
Thanks in advance.
Hi Greg,
The blink formula I have implemented without any errors and also changed the Data Category as "Image URL", but when taking the measure onto table visual it's showing as broken as below:
Any suggestions..
Thanks in advance.
