Extend Table Card Functionality (Graphics)

guitarhero23

It would be nice if you could input little graphs into a table such that you can see a bar graph, line graph, etc in a cell which adds a little more meaning to the data it's representing. 

 

It would be VERY cool if you could include some dynamic info based on if the cell is aggregated or not. 

 

Ex. 

 

Maybe the ability to set a value or use the largest value available to show what 100% is and fill the cell with color a % representation of the total/100% value

 

Ex. (Mockup so % bars not necessarilly accurate)

 

 

btm

Thank you for submitting this @guitarhero23. I am assigning to our product manager @Gavatar to review and comment.

Gavatar

We are working at ways to make this easier but for now there is a "beast mode" way to create a small bar chart in your table.  The key is to generate HTML "div" statements in your table with width and fills.  Here is an example table I created:

This is the beast mode I use:

CONCAT('<div style="height:170px;width:100%;">
<div style="box-shadow:5px 5px 10px gray;border-radius:0px 5px 5px 0px;font-weight:bold;background-color:#74B0D7;
border-radius:0px 5px 5px 0px;height:30px;color:#333333;padding:5px;width:',
CASE WHEN
SUM(CASE WHEN YEAR(`Ad Start Date`) = 2015 THEN `Sales` ELSE 0 END) = 0
THEN 0
ELSE ROUND(((SUM(CASE WHEN YEAR(`Ad Start Date`) = 2015 THEN `Sales` ELSE 0 END)/SUM(`Sales`))*100),0)
END,
'%;">2015 <div style="color:green;background-color:white;border-radius:10px;
text-align:center;width:60px;padding:2px;">$',
CASE WHEN
SUM(CASE WHEN YEAR(`Ad Start Date`) = 2015 THEN `Sales` ELSE 0 END) = 0
THEN 0
ELSE ROUND((SUM(CASE WHEN YEAR(`Ad Start Date`) = 2015 THEN `Sales` ELSE 0 END)/1000000)*100,1) END,
'M</div></div><br/>',
'<div style="box-shadow:5px 5px 10px gray;border-radius:0px 5px 5px 0px;font-weight:bold;background-color:#BBE491;
border-radius:0px 5px 5px 0px;height:30px;color:#333333;padding:5px;width:',
CASE WHEN
SUM(CASE WHEN YEAR(`Ad Start Date`) = 2016 THEN `Sales` ELSE 0 END) = 0
THEN 0
ELSE ROUND(((SUM(CASE WHEN YEAR(`Ad Start Date`) = 2016 THEN `Sales` ELSE 0 END)/SUM(`Sales`))*100),0)
END,
'%;">2016 <div style="color:green;background-color:white;border-radius:10px;
text-align:center;width:60px;padding:2px;">$',
CASE WHEN
SUM(CASE WHEN YEAR(`Ad Start Date`) = 2016 THEN `Sales` ELSE 0 END) = 0
THEN 0
ELSE ROUND((SUM(CASE WHEN YEAR(`Ad Start Date`) = 2016 THEN `Sales` ELSE 0 END)/1000000)*100,1) END,
'M</div></div><br/>',
'<div style="box-shadow:5px 5px 10px gray;border-radius:0px 5px 5px 0px;font-weight:bold;background-color:#FB8D35;
border-radius:0px 5px 5px 0px;height:30px;color:#333333;padding:5px;width:',
CASE WHEN
SUM(CASE WHEN YEAR(`Ad Start Date`) = 2017 THEN `Sales` ELSE 0 END) = 0
THEN 0
ELSE ROUND(((SUM(CASE WHEN YEAR(`Ad Start Date`) = 2017 THEN `Sales` ELSE 0 END)/SUM(`Sales`))*100),0)
END,
'%;">2017 <div style="color:green;background-color:white;border-radius:10px;
text-align:center;width:60px;padding:2px;">$',
CASE WHEN
SUM(CASE WHEN YEAR(`Ad Start Date`) = 2017 THEN `Sales` ELSE 0 END) = 0
THEN 0
ELSE ROUND((SUM(CASE WHEN YEAR(`Ad Start Date`) = 2017 THEN `Sales` ELSE 0 END)/1000000)*100,1) END,
'M</div></div>'
,'</div>')

 

Gavatar

Gavatar

Here is a simpler example of just the single bar:

CONCAT('<div style="background-color:#74B0D7;border-radius:10px;height:20px;
padding:2px;width:',
sum(`Sales`)/100000,
'%',
'">',
'</div>'
)

guitarhero23

Thanks Gavatar for some workarounds. That is quite the beastmode.

Gavatar

Second example is easier  

Gavatar

Hua

This is exactly what we needed!  @Gavatar, great example and what a beastmode!  Is there any workaround to generate sparklines as I asked in this post?  

 

I tried to use arrows to present the individual trend & connect them together, but without the reference of value, they don't look like a trend line.  If you can suggest some ideas/workaround, that will be much appreciated.

 

Now seeing the status as "Approved", I will look forward to the feature being released.