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

I explain it in my 2nd gamification video:

4 Likes

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

2 Likes

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.

4 Likes

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

1 Like

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?

1 Like

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

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

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

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?

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!

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.

1 Like

Can I just say how much I love Quickchart?!

Screen Shot 2021-10-30 at 3.29.48 PM

11 Likes

Wow

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

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.

2 Likes

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.

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

1 Like

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…

Six months later :sloth:
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…:confused:

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

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.

1 Like