Using QuickChart in your apps

@tsuji_koichi has shared several useful posts about how to use QuickChart (https://quickchart.io) to augment AppSheet’s native chart functions:

I had some difficulty figuring out how to implement these tips. Judging from the comments, it seems like most people have been able to understand the posts fairly easily but I thought I’d explain it in my own way in the hope that that might help some creators out there who, like me, had some difficulty following the instructions.

First, I made a little app to illustrate how it works, which I put on my portfolio page:

https://www.appsheet.com/portfolio/230844

The app is “Pie Chart Demo”. Be aware that I may decided to take it down after a few months. I generally limit my portfolio page to my main app.

In my own attempt to use QuickChart, I found the following page to be particularly useful:

https://quickchart.io/sandbox/#{ %20%20type%3A%20'pie'%2C %20%20data%3A%20{ %20%20%20%20datasets%3A%20[ %20%20%20%20%20%20{ %20%20%20%20%20%20%20%20data%3A%20[84%2C%2028%2C%2057%2C%2019%2C%2097]%2C %20%20%20%20%20%20%20%20backgroundColor%3A%20[ %20%20%20%20%20%20%20%20%20%20'rgb(255%2C%2099%2C%20132)'%2C %20%20%20%20%20%20%20%20%20%20'rgb(255%2C%20159%2C%2064)'%2C %20%20%20%20%20%20%20%20%20%20'rgb(255%2C%20205%2C%2086)'%2C %20%20%20%20%20%20%20%20%20%20'rgb(75%2C%20192%2C%20192)'%2C %20%20%20%20%20%20%20%20%20%20'rgb(54%2C%20162%2C%20235)'%2C %20%20%20%20%20%20%20%20]%2C %20%20%20%20%20%20%20%20label%3A%20'Dataset%201'%2C %20%20%20%20%20%20}%2C %20%20%20%20]%2C %20%20%20%20labels%3A%20['Red'%2C%20'Orange'%2C%20'Yellow'%2C%20'Green'%2C%20'Blue']%2C %20%20}%2C }

This “sandbox” page helped me understand that, with QuickChart, you make a URL that contains the data that is used to make the chart. I played with the sandbox until I understood how the URL worked.

Then in my demo app, I used CONCATENATE() to build URLs with data from different columns. The CONCATENATE() expression is in an IMAGE type virtual column. I think it works pretty well, and adds some functionality that is currently missing from AppSheet.

14 Likes

I copied your app to my public portfolio, in case you want to take it off of yours.

https://www.appsheet.com/portfolio/546920

5 Likes

Thanks! I’ll do that eventually!

1 Like

@Steve has shown us how to avoid a common type of error that can occur when using URL based services such as this one:

2 Likes

Hey all,

As the creator of the open-source QuickChart project, I wanted to drop in and show you a new no-code tool we’ve built for making charts:

https://quickchart.io/chart-maker/

This tool allows you to configure a chart visually and then save it as a template.

You can use this tool to customize the look & feel of your chart without having to edit code. Once you click “Save as API template”, the site will provide a custom URL that looks like this:

https://quickchart.io/chart/render/9a560ba4-ab71-4d1e-89ea-ce4741e9d232

Going to this URL directly will simply load your chart as an image. But the real benefit is that you can use this URL to override the title, data, and labels of the chart much more simply, by using the title, labels, and dataX query parameters.

Here is an example of overriding the chart’s title, labels, and data series, but keeps the same look & feel from the chart builder:

https://quickchart.io/chart/render/9a560ba4-ab71-4d1e-89ea-ce4741e9d232?title=Updated chart&data1=50,60,80&labels=Jan,Feb,Mar

A little bit easier than messing with a big blob of JSON/Javascript! I’ve written up more details on no-code chart APIs here Automate chart creation with Chart Maker

Hope this helps and please let me know what you think!

Ian

20 Likes

That’s really great @ianw !

I bet a lot of other people would like to know about this as well, you might post this as its own thread, in the tips and tricks section.

5 Likes

That’s awesome @ianw ! it would really stand out more in its own post like Dillon said, it more than deserves it.

2 Likes

Cool, Ian. Massively great jobs you did.
Wondering if we do/will have option to select the type of the chart optionally? I just had a quick look at chart generators, but it seems no option available for now, but just for line chart for the moment?

2 Likes

Yup, it supports a handful of chart types! There’s a “chart type” option under each data series.

It doesn’t support all of them yet, but most popular types are available:

Thanks for the feedback everyone. I’ll create a separate topic when I have a moment.

6 Likes

Hi @ianw

I apologize for overlooking this simple option.

yes, indeed.

I just quickly tried a simple chart.

The original URL without any custom query params is rendering image nicely. But upon adding &data1=1,10,20 kinda of params, image break up, not rendered.

Wondering what I m doing wrong.

1 Like

Hi @ianw

Appsheet team should have been working to introduce a new feture, I frame, to the appsheet app. Depending on how we would be able to utilize this new iframe feature though, it would be exciting we could potentially add interactive QuickChart rather than static image chart into Appsheet on demand.

It s going to be great.

@TDhers
@Arthur_Rallu

5 Likes

Wow! iframe would really expand what one can do in AppSheet! I’m not sure if it would be difficult to implement for AppSheet but it’s an intriguing idea!

2 Likes

iframe is not a difficult to deal with even for those who does not know the coding (like me!).
Just simply add URL in general.

2 Likes

Oh man… @ianw this is amazing! You’ve made utilizing these charts SOO easy in AppSheet.

  1. Create your chart using your easy chart builder
  2. Take the URL, and change the particular datas at the end

Boom! You’ve got a chart!

Thanks for making your already amazing service that much better!

7 Likes

Hey @tsuji_koichi, could you please send me the custom URL you’re trying to use? I’ll look into it.

1 Like

I m adding my comments here in this thread, to apologize for my fault.
Indeed, the new QuickChart chart generator is working well and perfect.

In general, Appsheet Chart view is going to generate Chart out of TABLE.

But QuickChart is gengerating chart PER ROW, if I could simply explain what is the difference.

yes, Appsheet can generate chart view per row, but need a bit of tricks to achieve it.

The support from QuickChart , after absense of Google Image / Chart service, is definitely adding fuel to Appsheet, and once again thank Ian for your contribution and support.

7 Likes

Have you tried to do same with GRAFANA?

2 Likes

yeah my dear @ianw , This’s really great and Amazing Job
it’s really useful . Thanks

2 Likes