Using QuickChart in your apps

[Kirk_Masden]

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

New Chart series - Half round gauge chart ; QuickChart new chart type

In addition to circle gauge chart as well as progress bar chart, which are generated using QuickChart Open Source chart library, I found now harf gauge chart was in place. [5D03A33C-322B-456D-93C0-E7F3CFE0D510] Link to QuickChart You see all the details and properties to control the looks of the chart, like color, size, boarders etc. However, if you want to create the exactly same chart in this screenshot, please copy and paste the expression below to your table and Virtual Column. “https…

Progress Bar Chart ; new static image chart type in place!

Some people may say this is not bit deal, but for me, it is big! I introduced to the community before how to create the gauge chart, but now we are able to create the progress bar chart dynamically. thanks to the effort and contribution of https://quickchart.io/ Link to QuickChart They should have introduced Progress Bar Chart, and I tested if it can be used in Appsheet. This new type of chart should be just in place, so not much rich docs are presented, but I played around …

Radial Gauge / "Meter" - Inline Dynamic Icon - How to create?

Dear community, On various occasions, we wish to have some sort of KPI so that the user can get the better experience and insight. Most of the “icon” is basically “static”, but I found a way to create KIP radial gauge type of Icon, based on the data in Appsheet column/data field. This is super easy. Borrowing code from ; - This is Javascript open-source library, and they have bunch of chart image type. Among other, I use Radial Gauge meter to place the same an icon for inline display the…

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.

[Marc_Dillon]

@Kirk_Masden

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.

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

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

[Kirk_Masden]

Thanks! I’ll do that eventually!

[Kirk_Masden]

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

Adding Pie Chart to Details View

Try: CONCATENATE(“https://quickchart.io/chart?c=", ENCODEURL("{ type: 'horizontalBar', data: { datasets: [ { label: 'Dataset 1', backgroundColor: 'rgb(255, 99, 132)', data: [52], }, { label: 'Dataset 2', backgroundColor: 'rgb(54, 162, 235)', data: [17], }, ], }, options: { scales: { xAxes: [ { stacked: true, }, ], yAxes: [ { stacked: true, }, ], }, plugins: { datalabels: { anchor: 'center', align: 'center', font: { weight: 'bold', }, }, }, }, } "))

[ianw]

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

[Marc_Dillon]

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.

[Rafael_ANEIC-PY (Rafael Almeida)]

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

[tsuji_koichi]

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?

[ianw]

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.

[tsuji_koichi]

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.

[tsuji_koichi]

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

[Kirk_Masden]

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!

[tsuji_koichi]

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.

[MultiTech_Visions]

@ianw

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.

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!

[ianw]

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

[tsuji_koichi]

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.

[Gregory_Diana]

Have you tried to do same with GRAFANA?

[Guy_Merlin_Dyangnou]

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