Table as image URL

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:

Screen Shot 2021-09-21 at 3.45.57 PM

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
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:
    Screen Shot 2021-09-21 at 11.24.11 PM
  • 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_-10 etc 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 :wink:

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👍

4 Likes

This looks exactly like what I needed.
Thank you!

1 Like