Greg_Deckler's avatar
Greg_Deckler
Icon for Community Champion rankCommunity Champion
7 years ago

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...
Other
betsyvimal's avatar
betsyvimal
Regular Visitor
7 years ago

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's avatar
    Greg_Deckler
    Icon for Community Champion rankCommunity 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: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's avatar
      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,"")

       

    • betsyvimal's avatar
      betsyvimal
      Regular Visitor
      7 years ago

      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's avatar
        Greg_Deckler
        Icon for Community Champion rankCommunity Champion
        7 years ago

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