Arrow Trend an Color Condition Format

Maron
Maron Member
in Cards, Dashboards, Stories
domocomm.png

Hi, I'm new to Domo!


I’ve successfully applied basic color formatting in the chart properties of a bar chart, but I’m having trouble with more complex color formatting. Specifically, I want to format colors based on conditions like comparing current percentages to values from the previous year. I couldn’t find it in Analyzer and there's no relevant tutorial on YouTube.

I’m also planning to create a table view that includes trend arrows and color formatting. Any tips or resources on these topics would be greatly appreciated!

Thank you so much.




*PY - Previous Year

Best Answer

Answers

  • MarkSnodgrass
    MarkSnodgrass Coach
    Answer ✓

    This thread may be relevant to you as far as the colored directional arrow.

    https://community-forums.domo.com/main/discussion/42497/summary-number-conditional-format-colors-with-directional-arrow

    I made this video a while back about the color options in Domo. It may be helpful to you.

    https://youtu.be/F4MjItncJbU

    **Check out my Domo Tips & Tricks Videos

    **Make sure to <3 any users posts that helped you.
    **Please mark as accepted the ones who solved your issue.
  • ggenovese
    ggenovese Contributor

    You may want to look into Flex Tables as an option, but usually what I end up doing in these situations is use an HTML Table so that I can customize the Arrows, Colors, Rules, etc.

    Below is just a basic example, but you can see how the beast mode can get very complex with even simple examples:

    image.png 
    /*
    
	Growth Indicator
    
*/
    
CONCAT(
    
  '<div style="" title="% Change from Previous Row">'
    
  , CASE 
    
  WHEN 
    
  (
    
    /* 
    
        VIN Count Growth 
    
        (current value - prior value) / prior value
    
    */
    
    (
    
      /* Sum VIN Count */
    
      SUM(`VIN count`)
    
        -

    
      /* Lag VIN Count */
    
      lag(
    
          /* Sum VIN Count */
    
          SUM(`VIN count`)
    
      ) over (order by `Date`)
    
    )

    
    / 

    
    /* Lag VIN Count */
    
    lag(
    
        /* Sum VIN Count */
    
        SUM(`VIN count`)
    
    ) over (order by `Date`)
    
  ) > 0
    
  THEN CONCAT(
    
          '<span style="color:MediumSeaGreen;">'
    
          ,'<img height="10px" src="https://upload.wikimedia.org/wikipedia/commons/7/73/Basic_triangle.svg"> '
    
    	  , /*
    
            String VIN Count Growth
    
            */
    
            CONCAT(
    
                ROUND(
    
                  (
    
                      /* 
    
                        VIN Count Growth 
    
                        (current value - prior value) / prior value
    
                    */
    
                    (
    
                      /* Sum VIN Count */
    
                      SUM(`VIN count`)
    
                        -

    
                      /* Lag VIN Count */
    
                      lag(
    
                          /* Sum VIN Count */
    
                          SUM(`VIN count`)
    
                      ) over (order by `Date`)
    
                    )

    
                    / 

    
                    /* Lag VIN Count */
    
                    lag(
    
                        /* Sum VIN Count */
    
                        SUM(`VIN count`)
    
                    ) over (order by `Date`)
    
                  ) * 100
    
                , 2)
    
            , '%')   
    
          ,'</span>'
    
    	)
    
  WHEN
    
  (
    
    /* 
    
        VIN Count Growth 
    
        (current value - prior value) / prior value
    
    */
    
    (
    
      /* Sum VIN Count */
    
      SUM(`VIN count`)
    
        -

    
      /* Lag VIN Count */
    
      lag(
    
          /* Sum VIN Count */
    
          SUM(`VIN count`)
    
      ) over (order by `Date`)
    
    )

    
    / 

    
    /* Lag VIN Count */
    
    lag(
    
        /* Sum VIN Count */
    
        SUM(`VIN count`)
    
    ) over (order by `Date`)
    
  ) < 0
    
  THEN CONCAT(
    
    		'<span style="color:red;" title="">'
    
  			, '<img height="10px" src="https://upload.wikimedia.org/wikipedia/commons/e/ed/Decrease2.svg">'
    
  			, /*
    
            String VIN Count Growth
    
            */
    
            CONCAT(
    
                ROUND(
    
                  (
    
                      /* 
    
                        VIN Count Growth 
    
                        (current value - prior value) / prior value
    
                    */
    
                    (
    
                      /* Sum VIN Count */
    
                      SUM(`VIN count`)
    
                        -

    
                      /* Lag VIN Count */
    
                      lag(
    
                          /* Sum VIN Count */
    
                          SUM(`VIN count`)
    
                      ) over (order by `Date`)
    
                    )

    
                    / 

    
                    /* Lag VIN Count */
    
                    lag(
    
                        /* Sum VIN Count */
    
                        SUM(`VIN count`)
    
                    ) over (order by `Date`)
    
                  ) * 100
    
                , 2)
    
            , '%')   
    
    		, '</span>'
    
    	)
    
  ELSE '<span style="color:Gray;">-</span>'
    
  END
    
  , '</div>'
    
)

  • ArborRose
    ArborRose Coach

    Wow, there's some neat stuff going on in this post. We need @Eddie Small to get these three on a talkabout. (Sorry, I made up that word because it's late on a Friday and I can't remember what Eddie calls those neat online get-togethers.)

    ** Was this post helpful? Click Agree or Like below. **
    ** Did this solve your problem? Accept it as a solution! **

  • Maron
    Maron Member

    Thank you so much, @MarkSnodgrass and @ggenovese!

Categories