# Cloudinary bubble chart

**URL:** <https://community.glideapps.com/t/cloudinary-bubble-chart/37482>\
**Category:** Ask for Help\
**Created:** [January 20, 2022, 10:02pm UTC](https://community.glideapps.com/t/cloudinary-bubble-chart/37482 "2022-01-20T22:02:40Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [February 7, 2022, 12:48pm UTC](https://community.glideapps.com/t/cloudinary-bubble-chart/37482/21 "2022-02-07T12:48:14Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/9/39c13930f4179278c7aeaf4e3b61dc2b0ec6d063.jpeg)

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

[https://quickchart.io/documentation/#bubble-chart](https://quickchart.io/documentation/#bubble-chart)

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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/9/998eed21f94588f11ba0b2ec106aaf46bd71893c.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 7, 2022, 1:25pm UTC](https://community.glideapps.com/t/cloudinary-bubble-chart/37482/22 "2022-02-07T13:25:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [February 7, 2022, 1:42pm UTC](https://community.glideapps.com/t/cloudinary-bubble-chart/37482/23 "2022-02-07T13:42:11Z")

</div>

> [@ThinhDinh](#):
>
> Do you still want my solution?

I do, haha 😛

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 😉

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [February 7, 2022, 2:01pm UTC](https://community.glideapps.com/t/cloudinary-bubble-chart/37482/24 "2022-02-07T14:01:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 7, 2022, 2:04pm UTC](https://community.glideapps.com/t/cloudinary-bubble-chart/37482/25 "2022-02-07T14:04:46Z")

</div>

Not a quadrant for now, haha.

> [@Darren\_Murphy](#):
>
> Actually, I’m just curious to see which options you need to use to get the interactive charts.

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.

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [February 7, 2022, 9:52pm UTC](https://community.glideapps.com/t/cloudinary-bubble-chart/37482/26 "2022-02-07T21:52:13Z")

</div>

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.

But…

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?!

[https://quickchart.io/chart?c=](https://quickchart.io/chart?c=){type:‘bubble’,data:{datasets:[{label:‘MICHAEL BUBLIE’,data:[{x:5,y:4,r:16}]}]}}

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [February 7, 2022, 9:56pm UTC](https://community.glideapps.com/t/cloudinary-bubble-chart/37482/27 "2022-02-07T21:56:55Z")

</div>

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:

[https://quickchart.io/chart?c={type:'bubble',data:{datasets:[{label:'MICHAEL%20BUBLIE',data:[{x:5,y:4,r:16}](https://quickchart.io/chart?c=%7Btype:%27bubble%27,data:%7Bdatasets:%5B%7Blabel:%27MICHAEL%20BUBLIE%27,data:%5B%7Bx:5,y:4,r:16%7D)]}]}}

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [February 7, 2022, 9:59pm UTC](https://community.glideapps.com/t/cloudinary-bubble-chart/37482/28 "2022-02-07T21:59:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [February 7, 2022, 10:03pm UTC](https://community.glideapps.com/t/cloudinary-bubble-chart/37482/29 "2022-02-07T22:03:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [February 7, 2022, 10:03pm UTC](https://community.glideapps.com/t/cloudinary-bubble-chart/37482/30 "2022-02-07T22:03:48Z")

</div>

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.

[https://quickchart.io/chart?c={type:'bubble',data:{datasets:[{label:'MICHAEL%20BUBLIE',data:[{x:5,y:4,r:16}](https://quickchart.io/chart?c=%7Btype:%27bubble%27,data:%7Bdatasets:%5B%7Blabel:%27MICHAEL%20BUBLIE%27,data:%5B%7Bx:5,y:4,r:16%7D)]}]}}

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

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [February 7, 2022, 10:17pm UTC](https://community.glideapps.com/t/cloudinary-bubble-chart/37482/31 "2022-02-07T22:17:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [February 8, 2022, 2:24am UTC](https://community.glideapps.com/t/cloudinary-bubble-chart/37482/32 "2022-02-08T02:24:58Z")

</div>

> [@Jeff\_Hager](#):
>
> 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.

I’m pretty sure that you can share the value from the Construct URL column directly.

But…

> [@Simon\_Hill](#):
>
> It just takes a bit of juggling using the Template component (and you need to remove the ‘&’ Symbol in Series names…
> 
> ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/9/998eed21f94588f11ba0b2ec106aaf46bd71893c.png)

It looks like he’s not using a Construct URL column?  
@Simon_Hill if you’re not, then I recommend that you do. It will be more robust because - as Jeff pointed out - the Construct URL column will automatically take care of URI-escaping for you.

Here is an example of how it’s configured:

 ![construct-url](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/2/e20554defcb6d97015d6ffa4271c1d68013b04a5.png)

It might not be clear from the above example, but the idea is that you use a template column to construct everything that goes into the “c” parameter, and then use that in the Construct URL column.

Here is a better example:

> [@heart\_eyes Quickchart.io: the Cloudinary of Charts —on the fly charts!](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/125):
>
> So here is the one I did using the Construct URL column… Started off with a URL that looked like: https://quickchart.io/chart?bkg=white&c={.........} There are two query parameters in that URL: bkg=white c={ JSON structure } So I took the whole JSON structure, and put that in a template column: Then defined the Construct URL column as follows: The first query parameter was simple, so I “hard-coded” that, …

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [February 8, 2022, 8:14am UTC](https://community.glideapps.com/t/cloudinary-bubble-chart/37482/33 "2022-02-08T08:14:48Z")

</div>

You are correct, I am not using a ‘Construct URL’ column. I was just using a series of Template columns to reconstruct the URL.

I have tried and failed to use one. If the output is exactly the same as the URL my template columns generate then I don’t understand why it would be more robust.

That said, in the screen example I also see it’s possible to define parameters. In QuickChart I see a lot of nice parameters that I would like to handle, e.g. background color, Hit radius and other cool stuff. I don’t have the competency to know how to adjust my template columns to handle those parameters. But it looks like it becomes straightforward with the Construct URL column.

If someone can show me an example using this URL then I would be grateful.

“[https://quickchart.io/chart?c=](https://quickchart.io/chart?c=){type:‘bubble’,data:{datasets:[{label:‘Data 1’,data:[{x:1,y:4,r:9},{x:2,y:4,r:6},{x:3,y:8,r:30},{x:0,y:10,r:1},{x:10,y:5,r:5}]}]}}”

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [February 8, 2022, 8:42am UTC](https://community.glideapps.com/t/cloudinary-bubble-chart/37482/34 "2022-02-08T08:42:53Z")

</div>

> [@Simon\_Hill](#):
>
> I have tried and failed to use one. If the output is exactly the same as the URL my template columns generate then I don’t understand why it would be more robust.

The thing is, it won’t always be exactly the same, because…

> [@Darren\_Murphy](#):
>
> the Construct URL column will automatically take care of URI-escaping for you.

Which the template column on its own won’t do.

So then you don’t need to worry about stuff like this…

> [@Simon\_Hill](#):
>
> It just takes a bit of juggling using the Template component (and you need to remove the ‘&’ Symbol in Series names…

> [@Simon\_Hill](#):
>
> If someone can show me an example using this URL then I would be grateful.

Did you have a look at that example that I linked to above? That example is very similar to your current use case.

Anyway…

> [@Simon\_Hill](#):
>
> If someone can show me an example using this URL then I would be grateful.
> 
> “[https://quickchart.io/chart?c=](https://quickchart.io/chart?c=){type:‘bubble’,data:{datasets:[{label:‘Data 1’,data:[{x:1,y:4,r:9},{x:2,y:4,r:6},{x:3,y:8,r:30},{x:0,y:10,r:1},{x:10,y:5,r:5}]}]}}”

- First, take everything after the `c=`, and stick that in a template column:

```auto
{
  type:'bubble',
    data: {	
      datasets:[{
      label:'Data 1',
      data:[{x:1,y:4,r:9},{x:2,y:4,r:6},{x:3,y:8,r:30},{x:0,y:10,r:1},{x:10,y:5,r:5}]
    }]
  }
}

```

- Then configure your Construct URL column as follows:  
 ![Screen Shot 2022-02-08 at 4.35.36 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/7/3778cb8b26b87a94fa9796fd3ea8a196ccf50d07.png)
- You use the template column as the replacement value for the `c` Query Parameter.
- If you want to pass additional options, you can do that as extra Query Parameters. For example, if you wanted to change the background colour you could do something like this:

 ![Screen Shot 2022-02-08 at 4.40.47 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/b/5bc326b9fd12ddde04c4628893b8a4363f5cbef1.png)

- which would result in:

 ![Screen Shot 2022-02-08 at 4.40.36 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/e/5e5bad4386eadebeafb85abbce1f6a1076464415.png)

yuck! 🤢

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [February 8, 2022, 8:45am UTC](https://community.glideapps.com/t/cloudinary-bubble-chart/37482/35 "2022-02-08T08:45:35Z")

</div>

Oh that’s great! Thanks… I needed those baby steps to see how to work with the Construct URL. Thank you so much… I will have a good go now…

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 11, 2022, 2:04pm UTC](https://community.glideapps.com/t/cloudinary-bubble-chart/37482/36 "2022-02-11T14:04:03Z")

</div>

@Simon_Hill @Darren_Murphy I have a demo ready.

I want to have a customized tooltip as well, but I didn’t have time this week.

I will send you two an invite link to the org where I store this app, since it’s XC and I can’t allow it to be duplicated.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 12, 2022, 12:06am UTC](https://community.glideapps.com/t/cloudinary-bubble-chart/37482/37 "2022-02-12T00:06:16Z")

</div>

> <https://github.com/thinhdinhlca/custom-bubble-chart/blob/main/function.js>

Here’s the original code that powers the chart.

Nothing fancy, I tested it in Quickchart’s sandbox then plugs it into Github.

The original idea to do something like this and returns URI to display in webview belongs to the great @Manu.n

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [February 12, 2022, 9:03am UTC](https://community.glideapps.com/t/cloudinary-bubble-chart/37482/38 "2022-02-12T09:03:05Z")

</div>

Thank you - that was straightforward and a nice improvement!

```
layout: {
  padding: 20
}

```

Results in:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/1/2128251969849640d392f300c85935ff5477780a.png)

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [February 12, 2022, 4:41pm UTC](https://community.glideapps.com/t/cloudinary-bubble-chart/37482/39 "2022-02-12T16:41:37Z")

</div>

Hi ThinhDinh - I notice there is a plugin for a radial gauge chart that places an image in the center. Do you know if it’s possible to do this with a bubble chart? I am thinking it would be cool to have a chart that has the upper right quadrant somehow highlighted, e.g. in light blue. [note, I’m not talking about images inside bubbles, rather a background image for the entire chart].

I tried to insert the plugin but I got an error. Not sure if it’s my syntax or if it’s just incompatible with bubble charts… any thoughts?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/2/e29ef7c4519341599a8bfd445979ed2a361926ec.png)

UPDATE:

I realized I could simply annotate with a box:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/e/0e3a5ca4f78ed3edac8044794c8d7de8162f4078.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 13, 2022, 1:03am UTC](https://community.glideapps.com/t/cloudinary-bubble-chart/37482/40 "2022-02-13T01:03:27Z")

</div>

I might have an idea going forward. Do you expect your axes to always be from 0 to 10?

[Previous page](https://community.glideapps.com/t/cloudinary-bubble-chart/37482.md?page=1)

[Next page](https://community.glideapps.com/t/cloudinary-bubble-chart/37482.md?page=3)