DOMO: How to Create Custom Gauge Card Using HTML Code

​Domo has quite a few options for gauge cards, but sometimes it is needed a different type of gauge card to easily portray the situation in the company. In the example below, we have a simple gauge card which we can easily create in Domo. 

If you want to try to create this easy to read card, please keep on reading!

Follow the steps below to create a simple gauge card in Domo. 
You will need three or more images of your gauge. You can use the one I have. ​

You will need to host these images somewhere, because you will need the links to this images. For this example, I’m using Imageshack.com.

Now, you pretty much done. In Domo, you need to create two beast modes.
​
__________________________________
Name: Summary Gauge Summary Number

/*Lilia Taran*/
--  Summary LT Gauge New Colors

CONCAT( '<span style="font-weight:bold;font-size:16px;font-family: Arial, sans-serif;color:#8fc33f;align="justify;padding-left: 0px;">',
       CASE WHEN (AVG(`Retention`)) > 0.799 THEN
      CONCAT( 'Retention - High','</span>','<br>',
'<img src="https://imagizer.imageshack.com/v2/xq70/924/NBznbe.png" width="200" height="170" align="center" style="width:270px;height:210px;padding:0px 0px;"\>','<br>')
       WHEN (AVG(`Retention`)) > 0.499  THEN CONCAT( 'Retention - Medium','</span>','<br>',
'<img src="https://imagizer.imageshack.com/v2/xq70/924/OFkehu.png" width="200" height="170" align="center" style="width:270px;height:210px;padding:2px 2px;"\>','<br>')
       WHEN (AVG(`Retention`)) < 0.49  THEN   CONCAT( 'Retention - Low','</span>','<br>',
'<img src="https://imagizer.imageshack.com/v2/xq70/923/FBAB00.png" width="200" height="170" align="center" style="width:270px;height:210px;padding:2px 2px;"\>','<br>')
       END
,  '<span style="font-weight:bold;font-size:16px;font-family: Verdana, Geneva, sans-serif;color:white;align="justify;padding-left: 8px;">', 'Retention - ',ROUND(AVG(`Retention`)*100,0) ,'%','</span>','<br>'
)

__________________________________

​Second BeastMode
__________________________________
Name: Blank
/*Lilia Taran*/
' '

__________________________________

In Domo, create a textbook type of card, here add your ‘Blank’ BM in place of Text and Count of Blank as an Optional Value.

In the summary line settings, select Summary Gauge Summary Number, remove label and save the card.
That’s it! Now you know how to create custom cards which aren’t available in Domo chart types.

If you find this content helpful.
​Say thank you by ->