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 Anonymous's Quick Measure but u...

Bouncing Stephen Few Red Dot.pbix430 KB

Other

Greg_Deckler

Community Champion

7 years ago

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.

betsyvimal

Regular Visitor

7 years ago

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