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

**URL:** <https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946>\
**Category:** Community Resources\
**Created:** [September 17, 2020, 2:11pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946 "2020-09-17T14:11:20Z")\
**Posts on this page:** 20\
**Page:** 8

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [June 5, 2021, 3:40am UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/141 "2021-06-05T03:40:52Z")

</div>

I explain it in my 2nd gamification video:

> [@gem\_stone Gamify Glide Apps (Updated 2022-11-28 - Episode 11: Craft Items)](https://community.glideapps.com/t/gamify-glide-apps-reboot-updated-2021-05-09-episode-5/24303/13):
>
> 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] ](https://www.youtube.com/watch?v=IPB6x1681Oo) Here’s the code you need for the Quickchart template mentioned in the video: { type: 'radialGauge', data: { datasets: [{ data: [\*P], borderWidth:0,backgroundColor: '\*C' }] }, …

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [June 5, 2021, 3:42am UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/142 "2021-06-05T03:42:18Z")

</div>

> [@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!

---

<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:** [June 5, 2021, 3:53am UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/143 "2021-06-05T03:53:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Nicolas\_Sicard](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nicolas_sicard/32/16101_2.png) [@Nicolas\_Sicard](https://community.glideapps.com/u/Nicolas_Sicard)\
**Post date:** [June 13, 2021, 2:15am UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/144 "2021-06-13T02:15:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Gregory](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gregory/32/21180_2.png) [@Gregory](https://community.glideapps.com/u/Gregory)\
**Post date:** [June 30, 2021, 4:34pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/145 "2021-06-30T16:34:37Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Gdclavijo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gdclavijo/32/13069_2.png) [@Gdclavijo](https://community.glideapps.com/u/Gdclavijo)\
**Post date:** [July 10, 2021, 9:04pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/146 "2021-07-10T21:04:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [July 10, 2021, 9:16pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/147 "2021-07-10T21:16:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mwza](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mwza/32/43529_2.png) [@mwza](https://community.glideapps.com/u/mwza)\
**Post date:** [August 31, 2021, 10:40am UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/148 "2021-08-31T10:40:43Z")

</div>

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:

 ![CleanShot 2021-08-31 at 12.38.52](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/7/c7587f44c727382f29955f452b1c1aa33a215554.png)

Appreciate any advice.  
Regards

---

<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:** [August 31, 2021, 11:17am UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/149 "2021-08-31T11:17:21Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![mwza](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mwza/32/43529_2.png) [@mwza](https://community.glideapps.com/u/mwza)\
**Post date:** [August 31, 2021, 11:44am UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/150 "2021-08-31T11:44:56Z")

</div>

Hi  
Yes using image filed to display.

[https://mint-health-4562.glideapp.io/](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??)

 ![IMG_DE237E36A123-1](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/f/bf3ad3c1bd10ecd17c6e4f59d1cd061d34258cea.jpeg)

Thank you for looking!

---

<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:** [August 31, 2021, 1:05pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/151 "2021-08-31T13:05:21Z")

</div>

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.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/f/bfc8c531851d530b31ee7a09a8d00c377a05b535.png)

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [October 30, 2021, 4:22am UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/152 "2021-10-30T04:22:57Z")

</div>

Can I just say how much I love Quickchart?!

 ![Screen Shot 2021-10-30 at 12.22.47 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/2/22e1b3c7d1830c69ebc93ba83c8e1fb8028aeb6c.png)

![Screen Shot 2021-10-30 at 3.29.48 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/1/11c41de16e74ff0123c2ffb696d14146247dd4cc.png)

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [October 30, 2021, 6:58pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/153 "2021-10-30T18:58:23Z")

</div>

Wow

---

<div class="post-metadata">

**Author:** ![Biboy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/biboy/32/9295_2.png) [@Biboy](https://community.glideapps.com/u/Biboy)\
**Post date:** [December 14, 2021, 2:57pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/154 "2021-12-14T14:57:47Z")

</div>

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

---

<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:** [December 14, 2021, 3:33pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/155 "2021-12-14T15:33:18Z")

</div>

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](https://community.glideapps.com/t/bar-charts-form-entries/32529/7):
>
> 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](http://54.90.241.242/pricing)

---

<div class="post-metadata">

**Author:** ![rayo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rayo/32/91372_2.png) [@rayo](https://community.glideapps.com/u/rayo)\
**Post date:** [February 14, 2022, 6:23am UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/156 "2022-02-14T06:23:52Z")

</div>

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.

---

<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 14, 2022, 6:36am UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/157 "2022-02-14T06:36:48Z")

</div>

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

```auto
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](https://quickchart.io/documentation/#colors-and-backgrounds)

---

<div class="post-metadata">

**Author:** ![rayo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rayo/32/91372_2.png) [@rayo](https://community.glideapps.com/u/rayo)\
**Post date:** [February 14, 2022, 6:54am UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/158 "2022-02-14T06:54:22Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![Test\_Test](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/test_test/32/30930_2.png) [@Test\_Test](https://community.glideapps.com/u/Test_Test)\
**Post date:** [March 1, 2022, 9:48pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/159 "2022-03-01T21:48:27Z")

</div>

> [@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…😕

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

```auto
{
  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](https://quickchart.io/sandbox/#%7B%22chart%22%3A%22%7B%5Cn%20%20type%3A%20'radialGauge'%2C%5Cn%20%20data%3A%20%7B%5Cn%20%20%20%20datasets%3A%20%5B%7B%5Cn%20%20%20%20%20%20data%3A%20%5B80%5D%2C%5Cn%20%20%20%20%20%20backgroundColor%3A%20getGradientFillHelper('horizontal'%2C%20%5B'red'%2C%20'blue'%5D)%2C%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20%7B%5Cn%20%20%20%20%20%20data%3A%20%5B53%5D%2C%5Cn%20%20%20%20%20%20backgroundColor%3A%20getGradientFillHelper('horizontal'%2C%20%5B'red'%2C%20'blue'%5D)%2C%5Cn%20%20%20%20%7D%5D%5Cn%20%20%7D%2C%5Cn%20%20options%3A%20%7B%5Cn%20%20%20%20%2F%2F%20See%20https%3A%2F%2Fgithub.com%2Fpandameister%2Fchartjs-chart-radial-gauge%23options%5Cn%20%20%20%20domain%3A%20%5B0%2C%20100%5D%2C%5Cn%20%20%20%20trackColor%3A%20'%23f0f8ff'%2C%20%5Cn%20%20%20%20centerPercentage%3A%2090%2C%5Cn%20%20%20%20centerArea%3A%20%7B%5Cn%20%20%20%20%20%20text%3A%20(val)%20%3D%3E%20val%20%2B%20'%25'%2C%5Cn%20%20%20%20%7D%2C%5Cn%20%20%7D%5Cn%7D%22%2C%22width%22%3A500%2C%22height%22%3A300%2C%22version%22%3A%222%22%2C%22backgroundColor%22%3A%22%23fff%22%7D)

Any ideas?

---

<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:** [March 1, 2022, 11:15pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/160 "2022-03-01T23:15:33Z")

</div>

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.

[Previous page](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946.md?page=7)

[Next page](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946.md?page=9)