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

[Robert_Petitto]

I explain it in my 2nd gamification video:

Gamify Glide Apps (Updated 2022-11-28 - Episode 11: Craft Items)

Gamify Glide Apps Reboot #2: Classes, Ranks and Progress Bars Create your spreadsheet, design an onboarding experience, and set up user profiles! also uses a FANTASTIC trick using Quickcharts to display a dynamic radial progress bar avatar! [Gamify Glide Apps Reboot #2: Classes, Ranks and Progress Bars] Here’s the code you need for the Quickchart template mentioned in the video: { type: 'radialGauge', data: { datasets: [{ data: [*P], borderWidth:0,backgroundColor: '*C' }] }, …

[Lucas_Pires]

@Lucas_Pires

and also where/how I get those paths in its docs.

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

[ThinhDinh]

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.

[Nicolas_Sicard]

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

[Gregory]

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?

[Gdclavijo]

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

[Robert_Petitto]

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

[mwza]

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

[ThinhDinh]

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?

[mwza]

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!

[Jeff_Hager]

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.

[Robert_Petitto]

Can I just say how much I love Quickchart?!

[Lucas_Pires]

Wow

[Biboy]

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

[Jeff_Hager]

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.

Bar charts & form entries

I haven’t, but admittedly, I haven’t had high usage. I’ve used it more for personal use. It seems pretty good at caching images though, so if the data doesn’t change often, you might be able to get away with not bumping into limits. I’m not sure how reliable this link is, but it indicates that there is a 20,000 chart limit on the free tier. http://54.90.241.242/pricing

[rayo]

Hello

I have 2 template columns that create QuickChart URLs (Radial Gauge)

Is there a way to use one of them as a background Image to the other Radial Gauge?

In other words having 2 Radial Gauge inside each other, each one showing the progress of a certain feature.

[Darren_Murphy]

I haven’t tried it, but it looks like this might work…

options: {
  plugins: {
    backgroundImageUrl: 'https://example.com/image.png'
  }
}

I’d use a Construct URL column to create the first one, and then pass that as a parameter in the template for the second chart.

https://quickchart.io/documentation/#colors-and-backgrounds

[rayo]

yes i tried that but it seems not to work…
i’l play around with it, maybe i have a missing character in the template…

[Test_Test]

@ThinhDinh

(10 of them),

Six months later
This is very cool! Such a dashboard is exactly what I need.
Is there a way to do this from within QuickChart, without using Glide layouts such as inline list?

I’ve tried this, but it’s overlapping each other…

{
  type: 'radialGauge',
  data: {
    datasets: [{
      data: [80],
      backgroundColor: getGradientFillHelper('horizontal', ['red', 'blue']),
    },
    {
      data: [53],
      backgroundColor: getGradientFillHelper('horizontal', ['red', 'blue']),
    }]
  },
  options: {
    // See https://github.com/pandameister/chartjs-chart-radial-gauge#options
    domain: [0, 100],
    trackColor: '#f0f8ff', 
    centerPercentage: 90,
    centerArea: {
      text: (val) => val + '%',
    },
  }
}

Link to Sandbox

Any ideas?

[Jeff_Hager]

If you don’t want to use an inline list, then I would probably just build a dynamic html or div table with separate images (chart urls) in each cell. Then display that html using a rich text component.

I still think using an inline list could be better in some cases, because you could then assign actions to each chart if you ever had a need.