cancel
Showing results for 
Search instead for 
Did you mean: 

SVG Animation - Bouncing/Blinking Stephen Few 'Red Dot'

Super User
1589 Views
Highlighted
Super User
Super User

SVG 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 @theBIbutler'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&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 __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&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 __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&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 __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&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 __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&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 __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&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 __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,"")

 

 

 

 

 


Did I answer your question? Mark my post as a solution!

Proud to be a Datanaut!


betsyvimal Frequent Visitor
Frequent Visitor

Re: Bouncing/Blinking Stephen Few 'Red Dot'

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.

betsyvimal Frequent Visitor
Frequent Visitor

Re: SVG Animation - Bouncing/Blinking Stephen Few 'Red Dot'

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? 

 

 

Super User
Super User

Re: SVG Animation - Bouncing/Blinking Stephen Few 'Red Dot'

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


Did I answer your question? Mark my post as a solution!

Proud to be a Datanaut!


betsyvimal Frequent Visitor
Frequent Visitor

Re: SVG Animation - Bouncing/Blinking Stephen Few 'Red Dot'

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 Frequent Visitor
Frequent Visitor

Re: SVG Animation - Bouncing/Blinking Stephen Few 'Red Dot'

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.

 

Capture.PNG

 

 

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

Super User
Super User

Re: SVG Animation - Bouncing/Blinking Stephen Few 'Red Dot'

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&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='100%' y2='20' stroke='Blue' stroke-width='1' />" 
RETURN IF([Status_Code]="7",__header & __shapeTextLine & __shapeblinkCircle & __footer,"")

Did I answer your question? Mark my post as a solution!

Proud to be a Datanaut!


betsyvimal Frequent Visitor
Frequent Visitor

Re: SVG Animation - Bouncing/Blinking Stephen Few 'Red Dot'

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. 

 

 

Capture.PNG

 

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

Super User
Super User

Re: SVG Animation - Bouncing/Blinking Stephen Few 'Red Dot'

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%'

 

 


Did I answer your question? Mark my post as a solution!

Proud to be a Datanaut!


betsyvimal Frequent Visitor
Frequent Visitor

Re: SVG Animation - Bouncing/Blinking Stephen Few 'Red Dot'

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.