Place the Google Sheet Chart onto Appsheet app

[Koichi_Tsuji]

For those who may add more fravour to your appsheet app with chart image.

Set up is super simple.

Basically, create the chart as usual in your google sheet and publish chart as Image. Get the public URL link to it.

Go to appsheet and create VC (Virtual Column) and push that URL and save as image type.

That s it, dead simple.

Seems we are able to publish Google sheet chart as interactive HTML site, meaning once Appsheet iframe view come and play, we are able to place interactive chart rather than static image chart. Should be a fun.

[Fabian_Weller]

Hi @tsuji_koichi yes that’s cool.
We could use it also for PDF Reports, without the need of SNAPSHOT() function.

But as I remember you will have to click on REFRESH in Google Sheets, if there was any change.
Meaning: The image does not represent the latest data.

There are integrations for Zapier and Integromat to update the Chart. But this is working only with Google Slides…

[Aleksi]

@Fabian is correct. It’s not updating dynamically.

[Koichi_Tsuji]

Yeah, seems to be image cache and its intervals.

[hru]

I am sharing a workaround to be able to get updated image google-sheet-chart in Appsheet, result is as below picture, data was updated through Appsheet and in about 5 minutes or so (after sync) the chart-image get updated:

I’ve tested using my device and also in the editor.

To see a live update of the chart, a link is being provided which will get an instant update. In browser, when click the hyperlink it will show something like this:

Test the-link-here.

This workaround is with following steps of changing the URL:

1. For the embeded image-chart: need to add to the URL of the published chart image with
   image&update=&NOW(), sample as below:

"https://docs.google.com/spreadsheets/d/e/2PACX-1vSaTE8IT7Z4bj_8FhrgSX5CpKruu-Qzln5_PLOQBHC7LateshFRJB4f_7Z-S70_wtO7hZzI0Jxc0rJX/pubchart?oid=1933246888&format=image&update="&NOW()

2. For the hyperlink, adjusting based on a Medium-post:

Step 2.1. Copy the chart and move to a new dedicated sheet
Step 2.2. Following the Medium-post, Change the "edit#" with "htmlembed/sheet?"

So the final upadated URL will be as sample below:

"https://docs.google.com/spreadsheets/d/1B3cx1d5VI-Yf4npuDyUnbNXGmpp85XSF1codvTY9IxA/htmlembed/sheet?gid=2105918318"

as shown with the above.

[Koichi_Tsuji]

Hi @Heru

Thank you for sharing the tricks.

Yes, I referer to read the same Medium post, but could not find a way to refresh instantly.
Passing additional params of &update=&NOW() at the end of url could do the magics, which I didnt know!

Thanks you for sharing again.

I will test with my sample app.

[Koichi_Tsuji]

Currently only able to place static image as chart to Appsheet. Your trick to place url link to open the chart will browser will give the richer experieces with chart, as they are “interactive” chart. Hopefully, new Appsheet iframe will be capable of handling such URL to embed interactive chart inside appsheet.

[Koichi_Tsuji]

People in other community for no-code app platform seems to be talking about the same stuffs…

Spectrum – 31 Mar 19

Updated sheet but not app · Glide

I have a glide app to show sports stats from a google sheet, including some 40+ live diagrams published as images. All these diagrams are updated weekly, and…

But their dev is promising they will do introduce some tricks to update chart “automatically”. Why not with Appsheet?

Spectrum – 31 Mar 19

Updated sheet but not app · Glide

I have a glide app to show sports stats from a google sheet, including some 40+ live diagrams published as images. All these diagrams are updated weekly, and…

Not sure what sort of tricks or mechanisum they are introducing, but kinds of “aggressive cache”? just igonre the default cache and refresh the source data real-time?

[Koichi_Tsuji]

@TDhers

Any thought, master?

[hru]

It seems they are doing “something”, at least in the formal document they have “guarantee” every hour of image chart update.

[Koichi_Tsuji]

Appsheet auto update every 30 mins.
Google Sheet published Chart URL seems to refresh cache once every 5 mins. based on that, appsheet view with google chart will be freshed every 30 min without explicitly syncing app?

I will test and see…

But all the problems could be solved all at once by Appsheet iframe?

[Koichi_Tsuji]

Testing result was almost as expected.

• Open the app.
• Change the data directly on the spreadsheet, assuming other app user update the existing rows
• At this point of time, nothing happen.
• Wait for 30 mins, leaving app opened on browser.
• Data was update by Auto Refresh of Appsheet.
• The Google Chart image was also updated.

But still not realtime update.

[hru]

tsuji_koichi:

The Google Chart image was also updated

Yes, I have tested this also with handphone, the Google chart image was also updating without refreshing the app. If we press the sync, it will update in 5 minutes, and sometime less than that.

tsuji_koichi:

But still not realtime update

I believed that the real-time update is through iframing of the “htmlembed” as above.

I wonder if someone can test the “htmlembed” work-around inside the currently being developed Appsheet iframe?

[John_Kent1]

I did this but, rather than do step one, I just used a go to website behavior action. Button click and there are the charts.

Thanks for the info.

[rajkhandelwal]

The graphs from the gsheet are displayed as per the method shown by @tsuji_koichi but it’s not updating, it just stays static, the same one when first displayed.

Not sure what I did wrong. Please help as I created the graph in one doc (gsheet) and Virtual column in another doc (gsheet) and referenced it as per @tsuji_koichi suggested.

Besides I tried @John_Kent method, it works pretty good showing the updated graphs but only issue is you need to click the action button to get things going.

I intend to have it automatic, Anyone please help!

[taufiq_qurohman]

You’re not wrong, the graph created by the spreadsheet is static and doesn’t change, for now use the ux graph supported by the appsheet and it will automatic

[Koichi_Tsuji]

Now all the stuffs are working on Google Platform, largely to say under Google Business Application Platform! Appreciate if you could have few words to new colleagues from Google to make this integartion happen! thank you, Aleksi.

[Mike_T]

I couldn’t tell by the video but I assume you had to add another data table with only 1 column. When you clicked the “+” action button you submitted a form when then resulted in the view showing the virtual column? Can you walk us through this part?

[Guy_Merlin_Dyan]

Thanks @tsuji_koichi I really appreciate your work

[baba_sawane]

https://quickchart.io/documentation/google-charts-image-server/

May be useful