Cloudinary bubble chart

Agreed…I haven’t paid a thing with Cloudinary since using it. I should do a deep dive tutorial with Cloudinary one day. Might need to have some guest appearances from @Darren_Murphy and @ThinhDinh who have both done some neat things with multiple layered images.


Do you have an unknown number of “bubbles” on your chart?

Hi ThinDinh - so the App needs to be able to deal with an unknown number. If it makes a big difference, it would be possible to simplify and restrict to a maximum number.

Here is the Glide chart that I want to replace. Right now it shows pairs of values. Each value is a score out of 10. It would be so much better if it was a bubble chart (Quadrant analysis).


Right now the chart gets busy if there are lots of themes, so the user has a choice button to select a minimum threshold value. In this way they can filter the chart and only show the themes with values above the minimum threshold… works quite well but I could also limit the number to say 5. I just don’t know what the values will be… or how many themes.

1 Like

My preference for this is using Experimental Code (XC) to build something into a webview component. Do you want to use XC for this?


Yes I would be fine with that. I watched Bob’s video on using it to pull data to generate a map view based on a search term. Looks like some template magic and URL creation is mainly what is needed. But what is the API resource? I have never worked with XC.

Hi Darren - I happened across this thread There is any table generator like QuickChart? - #16 by Eric_Ruiz_Molero

This looks to be the perfect solution to creating a Quadrant analysis and reinforces your original proposal (of course). Except that the thread might be using Pages as opposed to an App.

Is there any chance you could create a quick demo for a basic Quadrant chart showing how to put text onto a fixed image please?

Is quadrant a major drive in your chart? I have a demo almost ready for a bubble chart, but not having quadrants.

I could, but it wouldn’t be quick. Doing this with Cloudinary would be possible, but Quickchart would be my first choice, and would be way, way easier to do.

Any particular reason why you’ve discounted Quickchart?

Hi Thin,

Looks fab. Thank you for sharing the progress!

I’m afraid yes for my case; the quadrants are important. I see you have a close proxy by going negative in the axis but I really need values 0 - 10 for both axis. I could live without the quadrants so long as the axis are 0 - 10 and a legend would be needed.

In my case, the x-axis would be labelled ‘Likelihood’ and the y-axis ‘Impact’. But perhaps those labels could be added manually above and the below the chart with standard Glide text components.

Ah I did it! Happy to say it was quite straighforward using Quickchart.

Here it the link (thanks Jeff) to the bubble charts on Quickchart:

It just takes a bit of juggling using the Template component (and you need to remove the ‘&’ Symbol in Series names…

1 Like

Do you still want my solution? An advantage over the URL approach is you can hover on the points and see a tooltip, I think that’s about it for this.


I do, haha :stuck_out_tongue:

Actually, I’m just curious to see which options you need to use to get the interactive charts. I’m sure I could figure it out, but if you have a generic example handy I wouldn’t complain :wink:

Yes, still interested too! Especially if you can fix the axis from 0 -10 and have divide the chart into quadrants.

Not a quadrant for now, haha.

Actually I believe it won’t be that much different from what Simon did, just that Quickchart generates a static image, while JS generates URI that is somewhat interactive.

Small issue! The chart works well and I thought I would add a button beneath to allow the user to copy the constructed URL to clipboard. The user could then use it in their browser or in reports.


Why does the constructed URL work fine in the App (generates the Quickchart image) but not when I try to paste it into Safari?

Strangely, it works fine in Chrome on my Laptop but not on Safari on my Laptop. Am I missing a comma or have too many brackets or something?!{type:‘bubble’,data:{datasets:[{label:‘MICHAEL BUBLIE’,data:[{x:5,y:4,r:16}]}]}}

Interesting, the link I posted in the post above now doesn’t work when it’s opened back in Chrome.

If I grab the link from Chrome tab that was taken from the App’s ‘copy button’ it looks like this:{type:'bubble',data:{datasets:[{label:'MICHAEL%20BUBLIE',data:[{x:5,y:4,r:16}]}]}}

Lol - doesn’t work either! How can the same link copy pasted into a browser keep changing?!

You need to use block quotes if you are pasting anything resembling code or or html/markdown into the forum. Others it will try to interpret it.

Use the backwards single quote button to the left of the 1 key on the keyboard. (```). Use one of you are blockquoting a single line. Use four of them on one line, the code below it, and four more on the line after that if you want to blockquote multiple lines.

There is also an option to highlight and click the block quote button in the for text editor.

Also remember you can always preview your post before posting it.


I changed the image component so that when tapped it is copied to clip board. This seems to work. Glide recognizes it was an image address and give me a working link.{type:'bubble',data:{datasets:[{label:'MICHAEL%20BUBLIE',data:[{x:5,y:4,r:16}]}]}}

It seems to be I can’t pretend the constructed URL is a URL that can be used from a button component.

I don’t have answer why it would be different between chrome and safari. But it may be due to the url encoding. Urls can’t have special characters or spaces, so the Construct URL column will actually encode the url by replacing those special characters with with 3 digit representations of the special characters. The last two links you posted worked fine for me with chrome/Android. The one you posted before that didn’t work because it wasn’t url encoded.

You could try using a template column to copy that constructed url, and then try to share from the template column. Not sure if that will work or not.