Cloudinary bubble chart

Long shot:

Anyone know how to create a Cloudinary chart that can bring to life a quadrant analysis, something like this:

Or this:

image

Basically it’s an X, Y scatter plot for a series of data. Each bubble with a different color. To be honest the size of the bubble could be fixed, but I would need a legend to identify the bubbles.

The data is always X & Y pairs. Each axis from 0 - 10 in value. Fewer than 10 bubbles in the chart.

I haven’t worked with cloudinary, but quickchart does bubble charts. It’s just a matter of building a url that’s used as an image.

https://quickchart.io/documentation/#bubble-chart

1 Like

+1 for this. Or if you’re feeling fancy you can browse Chart.js and make it responsive.

1 Like

I still need to learn chartJS. You display it in a webview correct?

Yes that’s true, what we talked about related to the Gantt chart last time was also webview.

I have so many charts, I need to give this a try…

2 Likes

Hey @ThinhDinh Just had a crazy thought… could you solve this using your brilliant ‘short titles on Map pins’ concept?

For example, could we replace the chart with a Map view and place pins according to X,Y coordinates complete with a small title beneath each Pin as the legend?

Is there a cute way to introduce the lines that would make the Map appear like a Quadrant analysis? For example by choosing a place on earth that has a natural grid pattern?! Or perhaps using CSS code? The size of the pins would not be important and if you could have a title beneath each one then even the color would not be so important…

Any creative thoughts?!

@Simon_Hill xould something this this post help ?

Yes, that looks to be perfect. Very impressive video! I guess you need to have a Cloudinary account though and I was looking for something free :wink:

Cloudinary has a very generous free tier. I have 3 separate Cloudinary accounts, and I’ve done some crazy stuff with all 3 of them. And I’ve never paid a cent.

3 Likes

I need to take the plunge! Thanks Darren.

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.

2 Likes

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).

image

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?

2 Likes

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.