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:
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…
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 
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 
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.
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={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:
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.
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.
I’m pretty sure that you can share the value from the Construct URL column directly.
But…
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:
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:
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={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}]}]}}”
The thing is, it won’t always be exactly the same, because…
Which the template column on its own won’t do.
So then you don’t need to worry about stuff like this…
Did you have a look at that example that I linked to above? That example is very similar to your current use case.
Anyway…
c=, and stick that in a template column:{
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}]
}]
}
}
c Query Parameter.
yuck! 
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…
@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.
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
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?
UPDATE:
I realized I could simply annotate with a box:
I might have an idea going forward. Do you expect your axes to always be from 0 to 10?
