😍 Quickchart.io: the Cloudinary of Charts —on the fly charts!

Hi,
Great work.
I’m struggling with the Quickchart.io and the RadialGauge. I want to add the % after the data like your screenshot but I cannot have both at the same time. Could you help me with that ?
Second question do you think it is possible to add the % after the data and a subtext under it. I looked at all options but the subtext is not working.

Any advices ? This is my code below
{
type: ‘radialGauge’,
data: { datasets: [{ data: [59], backgroundColor: ‘rgb(66, 133, 244))’ }] },
options: {
centerArea: {
fontSize: 70 ,
fontColor: ‘rgb(219, 68, 55)’,
fontWeight: ‘bold’,
text: ‘%’,
subText: ‘test’
},
},
}

Thank you

Hey man!
Thanks for the compliment. To put “%” together with the percentage number you need to put the same number as the DATA because when you replace the Glide with template, the text will be right.

{
type: ‘radialGauge’,
data: { datasets: [{ data: [59], backgroundColor: ‘rgb(66, 133, 244))’ }] },
options: {
centerArea: {
fontSize: 70 ,
fontColor: ‘rgb(219, 68, 55)’,
fontWeight: ‘bold’,
text: ‘59%’,
subText: ‘test’
},
},
}

3 Likes

Thank you so much. It works. So easy but not logical for me :slight_smile:
Any chance you know or found the way to add text under the data% inside the radialgauge ?

Nothing really fancy here, but I have a form submission screen that has just numbers (10 of them), a Quickchart integration is due. (Thanks to Robert for introducing Quickchart and @Darren_Murphy for the Construct URL trick)

This is an inline list where I dynamically change the main color to achieve a difference between “negative” items and “positive” items.

8 Likes

@Robert_Petitto @Darren_Murphy would be nice to have a topic explaning how to use the paths in Construc URL column for quickchart for instance :relaxed: and also where/how I get those paths in its docs.

2 Likes

I explain it in my 2nd gamification video:

3 Likes

Yes! I’ve seen it. But I think this would be nice too to complement it!

2 Likes

Usually I go into their library, choose a chart that is closest to what I want, edit their sandbox to the thing I need, then copy that sandbox code as the “c” path to the Construct URL column.

4 Likes

You are awesome Robert!! Thanks!!! (do not misunderstand ejejeje) :grinning_face_with_smiling_eyes:

1 Like

I think one of quickchart’s advantages has not received enough attention:

It allows you to save rows if you develop the data structure horizontally (in columns) in comparison to glide’s built-in charts, which require a new row for each data point.
(given that your users are fine with a predefined number of data points).

To concatenate values and labels, use template columns in glide tables or this formula in google sheets:
=ARRAYFORMULA(IF(ISBLANK(A2:A),"", TRANSPOSE(QUERY(TRANSPOSE(ARRAYFORMULA(IF(B2:H<>"","’"&B2:H&"’,",))),9^9))))
where rowIDs are in column A, and values or labels are in B to any letter of columns)

I just started replacing built.in charts with quickchart this week.
Am I missing something?

1 Like

Hi Pedro… could you share the CSS of three components? … thanks a lot !!!

Exactly! However, if your data is already in rows, just use join text columns to create the data set parameters.

Hi All

Newbie to all things no code!

Generating VCard QR code using the google charts api to generate a vcard qr code from a template column and though the image displays on my layout screen in chrome browser, it does not generate either on safari in the layout view, or on my phone when published to my iphone?

My template column:

Appreciate any advice.
Regards

So it only appears in the builder and not the real app? I assume you’re using an image component to display it?

Can we have a link to test?

Hi
Yes using image filed to display.

https://mint-health-4562.glideapp.io/

I have created a test image on the home page - you will see qr code displaying in layout view but per this screenshot, does not render in app on iphone. (i have tested on android phone and interstingly it does render there??)

Thank you for looking!

It would probably be better to build that url so it uses quickcharts instead of google charts.

I was about to say that it was maybe a permission issue where a user has to be signed into a google account, or more specifically, YOUR google account to be able to view the image, but that may not be the case here because it worked for me. Instead, I wonder if it’s an issue with the iphone or safari being able to render whatever image type is being generated.

1 Like

Can I just say how much I love Quickchart?!

Screen Shot 2021-10-30 at 3.29.48 PM

11 Likes

Wow

Anyone knows what is the rate limit of Quickchart for free version? can’t seem to find it on their site.

I came across the link in this post a while back. I’m not sure how accurate it is, but it was the only thing I could find regarding rate limits.

2 Likes