Number Sensitive Colors
Is it possible to tie colors to certain values? So if sales is below forecast, it's red, green if it's above, etc.
Best Answer
-
There are a number of ways to tie values in your data to colors on a visualization. Here are some examples:
Sumo Card Conditional Formatting
Sumo cards have conditional formatting built in. To access it, hover over the field name of the field to which you want to apply conditional formatting and you'll see three dots become visible (in the table header not in the left nav). Click on the three dots and you will get a menu. From the menu, click on Conditional Formatting and a new menu will pop up which will allow you to enter your criteria and select the colors.
Gauge Card
Gauge cards are a great way to visualize number ranges with colors. Simply use the range options under the chart properties to set up the ranges and colors you want to see.
Table Card Conditional Formatting
You can also use HTML styles in a table card to change the way cells values are displayed.
The following Beast Mode examples will help you create conditional formatting on a standard (non-Sumo) table.
The formatting is accomplished by creating an HTML string which contains a DIV element where the background color changes based on user defined conditions. The three colors are "Domo" colors as well so it wil keep a consistent user experience.
Green Background (#bbe491):
CONCAT('<div style="background-color:#bbe491; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', 'Green Conditional Format', '</a></div>')
Yellow Background (#fccf84):
CONCAT('<div style="background-color:#fccf84; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', 'Yellow Conditional Format', '</a></div>')
Red Background (#fcbcb7):
CONCAT('<div style="background-color:#fcbcb7; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', 'Red Conditional Format', '</a></div>')
Note: The <a> element with a reference to # prevents the user from drilling on that column as it would create a filter for the full HTML string.
Working Example:
CASE
WHEN `CHANGE` > 0 THEN CONCAT('<div style="background-color:#bbe491; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', `CHANGE`, '</a></div>')
WHEN IFNULL(`CHANGE`, 0) = 0 THEN CONCAT('<div style="background-color:#fccf84; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', `CHANGE`, '</a></div>')
WHEN `CHANGE` < 0 THEN CONCAT('<div style="background-color:#fcbcb7; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', `CHANGE`, '</a></div>')
END
Note: Keep in mind that the value this Beast Mode returns is a STRING, any aggregations must be done w/in Beast Mode as aggregations will be disabled when building cards.
I hope these examples can help you get started!
2
Answers
-
There are a number of ways to tie values in your data to colors on a visualization. Here are some examples:
Sumo Card Conditional Formatting
Sumo cards have conditional formatting built in. To access it, hover over the field name of the field to which you want to apply conditional formatting and you'll see three dots become visible (in the table header not in the left nav). Click on the three dots and you will get a menu. From the menu, click on Conditional Formatting and a new menu will pop up which will allow you to enter your criteria and select the colors.
Gauge Card
Gauge cards are a great way to visualize number ranges with colors. Simply use the range options under the chart properties to set up the ranges and colors you want to see.
Table Card Conditional Formatting
You can also use HTML styles in a table card to change the way cells values are displayed.
The following Beast Mode examples will help you create conditional formatting on a standard (non-Sumo) table.
The formatting is accomplished by creating an HTML string which contains a DIV element where the background color changes based on user defined conditions. The three colors are "Domo" colors as well so it wil keep a consistent user experience.
Green Background (#bbe491):
CONCAT('<div style="background-color:#bbe491; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', 'Green Conditional Format', '</a></div>')
Yellow Background (#fccf84):
CONCAT('<div style="background-color:#fccf84; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', 'Yellow Conditional Format', '</a></div>')
Red Background (#fcbcb7):
CONCAT('<div style="background-color:#fcbcb7; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', 'Red Conditional Format', '</a></div>')
Note: The <a> element with a reference to # prevents the user from drilling on that column as it would create a filter for the full HTML string.
Working Example:
CASE
WHEN `CHANGE` > 0 THEN CONCAT('<div style="background-color:#bbe491; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', `CHANGE`, '</a></div>')
WHEN IFNULL(`CHANGE`, 0) = 0 THEN CONCAT('<div style="background-color:#fccf84; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', `CHANGE`, '</a></div>')
WHEN `CHANGE` < 0 THEN CONCAT('<div style="background-color:#fcbcb7; width: 100%; height:100%; margin:-20px; padding:20px"><a href="#">', `CHANGE`, '</a></div>')
END
Note: Keep in mind that the value this Beast Mode returns is a STRING, any aggregations must be done w/in Beast Mode as aggregations will be disabled when building cards.
I hope these examples can help you get started!
2 -
Would you be able to write comething similar to this in order to change the background color on a graph? I would love to be able to turn everything below my line green. It seems like there would be a way to do this by using pieces of this logic, but I can't figure it out in my trials.
0
Categories
- All Categories
- 1.7K Product Ideas
- 1.7K Ideas Exchange
- 1.5K Connect
- 1.2K Connectors
- 294 Workbench
- 6 Cloud Amplifier
- 8 Federated
- 2.8K Transform
- 97 SQL DataFlows
- 607 Datasets
- 2.1K Magic ETL
- 3.8K Visualize
- 2.4K Charting
- 707 Beast Mode
- 49 App Studio
- 39 Variables
- 667 Automate
- 170 Apps
- 446 APIs & Domo Developer
- 44 Workflows
- 7 DomoAI
- 33 Predict
- 13 Jupyter Workspaces
- 20 R & Python Tiles
- 391 Distribute
- 111 Domo Everywhere
- 274 Scheduled Reports
- 6 Software Integrations
- 115 Manage
- 112 Governance & Security
- Domo Community Gallery
- 31 Product Releases
- 9 Domo University
- 5.3K Community Forums
- 40 Getting Started
- 30 Community Member Introductions
- 103 Community Announcements
- 4.8K Archive