# 😍 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:** 7

<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:** [February 2, 2021, 1:42pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/121 "2021-02-02T13:42:06Z")

</div>

# Tutorial:

> **Quickcharts Raw Code**
>
> ```auto
> type: 'radialGauge',
> data: { datasets: [{ data: [_P_], borderWidth:0,backgroundColor: '#COLOR' }] },
> options: { 
> trackColor: '#eee',
> roundedCorners:true,
> centerPercentage: 85,
> centerArea: {
> fontSize: 1,
> },
> plugins: {
> backgroundImageUrl: '_$_', 
> }
> },
> }
> 
> ```

> **Quickcharts % Encoded**
>
> `https://quickchart.io/chart?bkg=transparent&c=%7B%0A%20%20type%3A%20%27radialGauge%27%2C%0A%20%20data%3A%20%7B%20datasets%3A%20%5B%7B%20data%3A%20%5B_P_%5D%2C%20borderWidth%3A0%2CbackgroundColor%3A%20%27%23COLOR%27%20%7D%5D%20%7D%2C%0A%20%20options%3A%20%7B%0A%20%20%20%20trackColor%3A%20%27%23eee%27%2C%0A%20%20%20%20roundedCorners%3Atrue%2C%0A%20%20%20%20centerPercentage%3A%2085%2C%0A%20%20%20%20centerArea%3A%20%7B%0A%20%20%20%20%20%20fontSize%3A%201%2C%0A%20%20%20%20%7D%2C%0A%20%20%20%20plugins%3A%20%7B%0A%20%20%20%20%20%20backgroundImageUrl%3A%20%27_$_%27%2C%20%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%7D`

> **Cloudinary Template**
>
> ```auto
> https://res.cloudinary.com/glide/image/fetch/c_pad,w_500,h_300/@
> 
> ```

---

<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 2, 2021, 1:51pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/122 "2021-02-02T13:51:55Z")

</div>

You’d have to expect that a Construct URL column will handle that.  
If not, then it’d be a bug, eh? 🤔

---

<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:** [February 2, 2021, 1:55pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/123 "2021-02-02T13:55:51Z")

</div>

Ya…figure it out for me!

---

<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 2, 2021, 2:02pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/124 "2021-02-02T14:02:45Z")

</div>

I used a Construct URL column the other day to do a fairly complex stacked bar chart with quickchart. I’m outside at the moment, but can post an example a little later.

---

<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 2, 2021, 2:46pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/125 "2021-02-02T14:46:30Z")

</div>

So here is the one I did using the Construct URL column…

Started off with a URL that looked like:

```auto
https://quickchart.io/chart?bkg=white&c={.........}

```

There are two query parameters in that URL:

- `bkg=white`
- `c={ JSON structure }`

So I took the whole JSON structure, and put that in a template column:

 ![Screen Shot 2021-02-02 at 10.40.54 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/c/1c9b884ba9b131fa1c55d90e242265ccbd49666f.png)

Then defined the Construct URL column as follows:

 ![Screen Shot 2021-02-02 at 10.41.52 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/0/80e24e88a489f97e9f56197951f6200ec50411c3.png)

The first query parameter was simple, so I “hard-coded” that, and the second query parameter came from the template column.

And that’s it 🙂

Resultant chart isn’t particularly impressive…

![Screen Shot 2021-02-02 at 10.43.44 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/e/0e3d1b485846970cce326edf6ca81105442eb187.png)

But it’s what the customer wanted 🙂

---

<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:** [February 2, 2021, 3:02pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/126 "2021-02-02T15:02:03Z")

</div>

That’s awesome!!

So, I can take this same method and do with it? Maybe the image still can keep stretched as Robert said… let’s try!

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/b/4b9280caafd47de751ae85bb5fb0698385cecb60.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:** [February 2, 2021, 3:04pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/127 "2021-02-02T15:04:55Z")

</div>

This will be an incredible resource. We should start a thread with Construct URL examples.

---

<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:** [February 2, 2021, 3:33pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/128 "2021-02-02T15:33:37Z")

</div>

The issue is still that quickchart see the space to fill as a rectangle and not as a square  
Can’t find their own parameter to do this, maybe that’s why @Robert_Petitto used cloudinary too

If you guys know more about Json, you can help with it

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/f/cf1589440aba265d65971ebd1f5d5f7397fd6ea0.jpeg)

---

<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:** [February 2, 2021, 3:35pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/129 "2021-02-02T15:35:38Z")

</div>

This is awesome. Straight from the sandbox to the Construct URL column, that’s what we have always wanted.

---

<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:** [February 2, 2021, 4:23pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/130 "2021-02-02T16:23:34Z")

</div>

Just heard back from Quickcharts:

> We’re working on improving the backgroundImage plugin so that you have more built-in control over sizing and positioning 🙂
> 
> That should simplify things in the future – will update when I have details!
> 
> —
> 
> Ian

---

<div class="post-metadata">

**Author:** ![Pedroydzito](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pedroydzito/32/85187_2.png) [@Pedroydzito](https://community.glideapps.com/u/Pedroydzito)\
**Post date:** [February 3, 2021, 11:46pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/131 "2021-02-03T23:46:42Z")

</div>

Thank you so much for your tip @Robert_Petitto , I just love how these images go with anything …

 ![2](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/6/067d957e1a6fb77a8e934b8d72df1e5cb196a95b.jpeg)

---

<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:** [February 3, 2021, 11:47pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/132 "2021-02-03T23:47:52Z")

</div>

Got some CSS styling in that screenshot? I like the layout!

---

<div class="post-metadata">

**Author:** ![Pedroydzito](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pedroydzito/32/85187_2.png) [@Pedroydzito](https://community.glideapps.com/u/Pedroydzito)\
**Post date:** [February 3, 2021, 11:50pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/133 "2021-02-03T23:50:56Z")

</div>

I have 3.  
One for the header and the bottom bar; one to increase the size of the title “Suas Tarefas”; and one to remove the separator from the inline list with the chart

---

<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:** [February 4, 2021, 1:44am UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/134 "2021-02-04T01:44:43Z")

</div>

That’s really good!!

---

<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:** [March 17, 2021, 12:37am UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/135 "2021-03-17T00:37:06Z")

</div>

> [@Darren\_Murphy](#):
>
> `https://quickchart.io/chart?bkg=white&c={.........}`

Just took another look at this. Works flawlessly. Nice job, Darren…another Google Sheet formula no longer needed!

---

<div class="post-metadata">

**Author:** ![Joseph\_Leblanc](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joseph_leblanc/32/16002_2.png) [@Joseph\_Leblanc](https://community.glideapps.com/u/Joseph_Leblanc)\
**Post date:** [March 20, 2021, 2:36am UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/136 "2021-03-20T02:36:54Z")

</div>

Hi,  
Great work.  
I’m struggling with the [Quickchart.io](http://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

---

<div class="post-metadata">

**Author:** ![Pedroydzito](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pedroydzito/32/85187_2.png) [@Pedroydzito](https://community.glideapps.com/u/Pedroydzito)\
**Post date:** [March 20, 2021, 4:15pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/137 "2021-03-20T16:15:02Z")

</div>

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’  
},  
},  
}

---

<div class="post-metadata">

**Author:** ![Joseph\_Leblanc](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joseph_leblanc/32/16002_2.png) [@Joseph\_Leblanc](https://community.glideapps.com/u/Joseph_Leblanc)\
**Post date:** [March 20, 2021, 7:50pm UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/138 "2021-03-20T19:50:30Z")

</div>

> [@Pedroydzito](#):
>
> {  
> 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’  
> },  
> },  
> }

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

---

<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, 2:41am UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/139 "2021-06-05T02:41:09Z")

</div>

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)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/0/00e68c56b49e68ff3ea3be1e0ee097555d48a3b9.jpeg)

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

---

<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:38am UTC](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946/140 "2021-06-05T03:38:44Z")

</div>

> [@ThinhDinh](#):
>
> Thanks to Robert for introducing Quickchart and @Darren_Murphy for the Construct URL trick)

@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 😌 and also where/how I get those paths in its docs.

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

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