Does anyone know how I can get something similar to quickchart.io but for HTML tables?
I would like to display it in a card view.
I tried GraphViz but its not the best design I have seen…
Are you looking for something that returns an HTML table as an image?
Yes
Are the number of rows and columns fixed, or dynamic?
If fixed, it would be quite easy to do this with Cloudinary. You’d basically have the table outline as a template image, and then dynamically overlay the values. I’ve done something very similar to this recently, see following example:
The 4 red squares in that are an inline list using a tiles layout. The image is just a blank image, and the text is dynamically added using cloudinary.
If the number of rows and/or columns is dynamic, it would still be possible - but quite a bit more of a challenge (and maybe not worth the effort).
3 Likes
They are fixed. This is great!
Thank you.
Cool.
If you decide to use this method and need any help, just let me know.
Thank you.
I think I do need help.
I signed up to Cloudinary.
Do I need to install SDK? How?
Now what? I’m lost
Oh… yeah if you’ve never used Cloudinary before then there is a bit of an intial learning curve. I found it quite overwhelming at first.
Do you have a mockup of what the table should look like?
Maybe I can give you a kick start.
(No SDK required)
Not really, I still need to play around with it to see what I need exactly.
I just need to figure out where is the HTML part and how I send the data.
Okay, so here is how I would approach it:
- Firstly, make an image of a blank table with the correct number of rows and columns, with no data except maybe the column headers, then upload that image to your Cloudinary image library.
- Cloudinary will generate a URL for that, which will be something like:
https://res.cloudinary.com/<your-cloudinary-key>/image/upload/table.png
- I just quickly created one (using HTML Table Styler ▦ CSS Generator | 𝗗𝗜𝗩𝗧𝗔𝗕𝗟𝗘.𝗖𝗢𝗠), and it looks like this:
- The next thing to do is to start adding the text layers. This is a bit fiddly, and you essentially need to add a separate layer for every cell, but it only needs to be done once.
- After adding a first row of data to that table, I have a URL that looks like this:
https://res.cloudinary.com/<your-cloudinary-key>/image/upload/
l_text:arial_20:Jan%201,g_west,x_40,y_-10/
l_text:arial_20:11%3A45am,g_west,x_160,y_-10/
l_text:arial_20:Oranges,g_west,x_280,y_-10/
l_text:arial_20:Apples,g_west,x_400,y_-10/
table.png
- And that URL returns the following image:
- Rinse, lather repeat until you’ve filled all the cells. The tricky part is positioning the text correctly (that’s what the
g_west,x_40,y_-10etc options do). - Once done, you’ll have a URL that you can use in a Glide template column, and then use replacements to dynamically fill the table rows with data.
To give you the idea, here is what the URL looks like for one of those tiles that I showed you earlier:
https://res.cloudinary.com/<key>/upload/w_300,h_200,b_rgb:A83C31/
l_text:arial_18:Productivity,co_white,g_north,y_10/
l_text:arial_16:Boxes,co_white,g_north,y_50,x_20/
l_text:arial_16:Rate,co_white,g_north,y_50,x_80/
l_text:arial_14:YTD,co_white,g_center,y_-10,x_-100/
l_text:arial_14:{ytd-boxes},co_white,g_center,y_-10,x_10/
l_text:arial_14:{ytd-prod},co_white,g_center,y_-10,x_80/
l_text:arial_14:Last%20Month,co_white,g_center,y_20,x_-100/
l_text:arial_14:{last-month-boxes},co_white,g_center,y_20,x_10/
l_text:arial_14:{last-month-prod},co_white,g_center,y_20,x_80/
l_text:arial_14:This%20Month,co_white,g_center,y_50,x_-100/
l_text:arial_14:{this-month-boxes},co_white,g_center,y_50,x_10/
l_text:arial_14:{this-month-prod},co_white,g_center,y_50,x_80/
l_text:arial_12:Last%20Updated%20{updated},co_white,g_west,y_80,x_15/
Port/blank300x300_r86auo.png
And the Glide template column looks like this:
- One thing to watch out for is reserved characters, specifically
, / : _- each of those needs special handling. Refer to this blog post. - And you’ll find the Transformation URL Reference guide here.
Hopefully that’s enough to get you started 
10 Likes
@Darren_Murphy cool post. Lots of details and shows what cloudinary can do. It would be nice though if something like this could be done natively in glide.
Great job👍
5 Likes
This looks exactly like what I needed.
Thank you!
1 Like