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

:clap: :heart_eyes:

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/@
18 Likes

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

Ya…figure it out for me!

1 Like

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.

3 Likes

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 :slightly_smiling_face:

Resultant chart isn’t particularly impressive…

Screen Shot 2021-02-02 at 10.43.44 PM

But it’s what the customer wanted :slightly_smiling_face:

10 Likes

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!

4 Likes

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

5 Likes

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

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

1 Like

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 :slight_smile:

That should simplify things in the future – will update when I have details!

Ian

8 Likes

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

7 Likes

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

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

5 Likes

That’s really good!!

2 Likes

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

2 Likes

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