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

[Robert_Petitto]

Tutorial:

Quickcharts Raw Code

  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

https://res.cloudinary.com/glide/image/fetch/c_pad,w_500,h_300/@

[Darren_Murphy]

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

[Robert_Petitto]

Ya…figure it out for me!

[Darren_Murphy]

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.

[Darren_Murphy]

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

Started off with a URL that looked like:

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:

Then defined the Construct URL column as follows:

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…

But it’s what the customer wanted

[Lucas_Pires]

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!

[Robert_Petitto]

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

[Lucas_Pires]

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

[ThinhDinh]

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

[Robert_Petitto]

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

[Pedroydzito]

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

[Robert_Petitto]

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

[Pedroydzito]

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

[Lucas_Pires]

That’s really good!!

[Robert_Petitto]

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

[Joseph_Leblanc]

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

[Pedroydzito]

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

[Joseph_Leblanc]

@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 ?

[ThinhDinh]

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.

[Lucas_Pires]

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