DOMO: How to Create Custom Gauge Card Using HTML Code
Domo has quite a few options for gauge cards, but sometimes it is needed something different to easily portray the situation in the company. So, 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.
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.
|
|
|
Now, you pretty much done. In Domo, you need to create two beast modes.
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
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.
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
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.
RSS Feed
