SVG Animation - Bouncing/Blinking Stephen Few 'Red Dot' 07-29-2019 05:04 AM

[Greg_Deckler]

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,"")

eyJrIjoiMGQ3NjU5NDQtYjhmMC00MjFlLTg1MzEtYzg5MjQ5MGY3NjBjIiwidCI6IjRhMDQyNzQzLTM3M2EtNDNkMi04MjdiLTAwM2Y0YzdiYTFlNSIsImMiOjN9

[pavankch24]

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.

[pavankch24]

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.

[Anonymous]

@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? 

[Anonymous]

Can the blink concept be implied to a KPI card? 

[Anonymous]

@Greg_Deckler 

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&colon;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. 

[Anonymous]

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.

[Anonymous]

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&colon;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.

[betsyvimal]

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]

@betsyvimal

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 __return

Now, 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.

[betsyvimal]

I adjusted the x and y coordinates to get what I wanted but somehow I am not able to get the circle in the middle of the line.Is there a way to fill the matrix column with a  line? I can only get it cetner alligned and cannot increase the length of he line to fit the column.

LineDot =
VAR __NA = "White"
VAR __lineColor = "Grey"
VAR __lineThickness = 2
VAR __radius = 9
VAR __opacity = 3
VAR __rand = RAND()
VAR __header = "data&colon;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='20' cy='20' r='" & __radius & "' fill='" & __NA & "' fill-opacity='" & __opacity & "' stroke='" & __lineColor & "' stroke-width='" & __lineThickness & "'></circle>"
VAR __shapeTextLine = "<line x1='0' y1='20' x2='1000' y2='20' stroke='Blue' stroke-width='1' />"
RETURN IF([Status_Code]="7",__header & __shapeTextLine & __shapeblinkCircle & __footer,"")

[Greg_Deckler]

One small change should do it:

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='20' cy='20' r='" & __radius & "' fill='" & __NA & "' fill-opacity='" & __opacity & "' stroke='" & __lineColor & "' stroke-width='" & __lineThickness & "'></circle>"
VAR __shapeTextLine = "<line x1='0' y1='20' x2='100%' y2='20' stroke='Blue' stroke-width='1' />" 
RETURN IF([Status_Code]="7",__header & __shapeTextLine & __shapeblinkCircle & __footer,"")

[betsyvimal]

Hi Greg, I tried this solution and I can get the circle in the middle with some tweaking but the line is still a concern. I cannot get it to extend and fill the column of the Matrix - Is there a way I can achieve this or I can get it done through other ways?

Below is how it looks like now. 

Also this code dint work for me, the image was not displayed.   

VAR __header = "data&colon;image/svg+xml;utf8,"

I had to change it to VAR __header = "data&colon;image/svg+xml;utf8,"

[Greg_Deckler]

You have to replace the &colon; with an actual colon but when you paste that in code on this site, it converts the colon to &colon; for some reason.

Regardless, in your line definition, just change x2='100' to x2='100%'

[curiouspbix0]

Hi Greg,

How did you disable the SVG code on tool tip ?

[Greg_Deckler]

I don't think I did. If you are asking how I could potentially do such a thing, first thing that comes to mind is custom tooltip page. Otherwise, would have to think about it and experiment with it.

[curiouspbix0]

ok Greg, custom tooltip was the first thing I found not working on this animation.

[betsyvimal]

Hi Greg - I did change it to 100% as per your suggestion earlier. IT still give me the same image as per my previous screen shot. The line doesnt fill the colum. I tried changing the allignement of the values using Field formatiing but still couldnt get it to fill the column.

[betsyvimal]

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&colon;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,"")

[betsyvimal]

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.