topic Re: SVG Animation - Bouncing/Blinking Stephen Few 'Red Dot' in Quick Measures Gallery

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

Greg_Deckler — Tue, 18 Sep 2018 15:38:35 GMT

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

eyJrIjoiMGQ3NjU5NDQtYjhmMC00MjFlLTg1MzEtYzg5MjQ5MGY3NjBjIiwidCI6IjRhMDQyNzQzLTM3M2EtNDNkMi04MjdiLTAwM2Y0YzdiYTFlNSIsImMiOjN9

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

betsyvimal — Mon, 17 Sep 2018 14:53:47 GMT

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.

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

betsyvimal — Mon, 24 Sep 2018 13:34:18 GMT

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?

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

Greg_Deckler — Mon, 24 Sep 2018 14:36:13 GMT

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.

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

betsyvimal — Mon, 24 Sep 2018 15:22:30 GMT

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

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

betsyvimal — Mon, 24 Sep 2018 16:03:21 GMT

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

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

Greg_Deckler — Tue, 25 Sep 2018 20:10:47 GMT

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

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

betsyvimal — Tue, 25 Sep 2018 15:28:05 GMT

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

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

Greg_Deckler — Tue, 25 Sep 2018 20:11:53 GMT

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

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

betsyvimal — Tue, 25 Sep 2018 20:50:16 GMT

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.

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

Anonymous — Mon, 29 Jul 2019 12:04:52 GMT

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.

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

Anonymous — Thu, 22 Aug 2019 12:15:28 GMT

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.

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

Greg_Deckler — Fri, 23 Aug 2019 03:56:42 GMT

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.

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

Anonymous — Fri, 23 Aug 2019 07:10:39 GMT

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.

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

Anonymous — Tue, 31 Dec 2019 14:11:50 GMT

Can the blink concept be implied to a KPI card?

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

curiouspbix0 — Sun, 17 May 2020 02:09:40 GMT

Hi Greg,

How did you disable the SVG code on tool tip ?

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

Greg_Deckler — Sun, 17 May 2020 02:24:20 GMT

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.

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

curiouspbix0 — Sun, 17 May 2020 02:26:49 GMT

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

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

Anonymous — Wed, 31 Mar 2021 20:30:09 GMT

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?

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

pavankch24 — Mon, 07 Oct 2024 16:53:31 GMT

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.