Sending/Retrieving useable quickchart.io charts hyperlinks with Thunkable X and sending them with Integromat

So, you have finally got your chart created and now you want to send that beautiful chart to someone important? Just send the chart url, right? WRONG! When using quickchart.io you will notice that the chart URL is very complex and lengthy which makes sending it nearly impossible without the use of a URL shortener.

They look like this for a fancy graph. https://quickchart.io/chart?width=500&height=300&c={ type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May'], datasets: [ { label: 'Corrects', data: [ 10, 60, 70, 180, 190 ], borderWidth:1,pointBackground:'green', fill: false, borderColor:'green'}, { label: 'Incorrects', data: [ .10, 20, 30, 40, 50 ], fill: false, borderColor: 'red', pointStyle:'star', pointRadius:4, borderWidth:1 }] }, options: { title: { display: true, text: 'BEHAVIORNAMEGOESHERE', fontColor: 'Black', fontSize: 32, }, legend: { position: 'bottom', }, scales: { yAxes: [{ type: 'logarithmic', ticks: { autoSkip: false, min:.001, max: 1000,callback: function (value, index, values) {if( value==.001 || value==.01 || value==.1 || value==1 || value==10 || value==100 || value==1000){return value + ' per minute';}},}}],},},}

This ^^^ won’t do and probably won’t work if you put this into your browsers URL bar.

So, assuming you are able to populate your list of data already, this is how you send a request to quickchart.io for a shortened link. Be mindful that the link to a chart image will only last 3 months after which it will no longer produce that image.

This is also assuming you already know how to construct a standard quickchart.io chart image request

Lets Go!

First, use a function to create your JSON formatted data that you will send. If you are sending a request this is how it should be sent.

Thunkable code to create JSON which will be used to create a static chart image

Next, you set this JSON Object as the body of the API request. API URL and header info for the link shortener can be found here for quickchart.io

Setting the API POST body to the JSON Object created in the previous step

Now you need to set up your API. Insert the invisible component into your project by dragging and dropping into the invisible objects section of your component tree or directly onto the design screen

Drag the Web API component into the ‘Invisible Components’ section of your component tree.

and then add the settings as below. The required code is included here.

API settings

the API URL should read https://quickchart.io/chart/create

and the Header property should read Content-Type with a value of application/JSON

Now you are ready to send your request! The blocks to send the data look like this

the quickchart.io API call for a shortened URL

In the app this example comes from, I call for 5 at a time. So after each response is returned, it is parsed to remove unnecessary information like this. The response otherwise looks like this { "success": true, "url": "https://quickchart.io/chart/render/9a560ba4-ab71-4d1e-89ea-ce4741e9d232"}

parsing of a JSON response

put into a list, and also set as a chart image. Finally, the shortened URL is sent to Airtable for storage/retrieval.

Because the graphs are made shortly after data is submitted (but not too long after), the app looks for the last data entry the user made to my Airtable (used to store most data currently) database, and stores the shortened URL’s (up to 5 depending on the need) in the same row as the last row of data the user submitted.

There is 1 step to take with Airtable. Go to your base with where you want to store the data and add a new column. Name it Created Time and set the column to be type ‘Created time’, like shown in the picture.

this setting automatically populates the field without you doing any work. This setting allows integromat to know when a new record has been added. THIS IS VITAL!

^^^DON’T SKIP THIS STEP^^^

Create a free account with Integromat here

When you are into your account, in the top right corner of the screen click on the add new scenario button

add scenario

Here you need to search for airtable and gmail, click them both, then click continue. then click here to start setting up the workflow.

click watch records

Follow the prompts to add your airtable base, this is fairly easy. Be sure to set your trigger field to the column that you made previously titled “Created Time”.

Also, scroll down further and notice you need to set the “view Name” which is likely “Grid view” and then you may want to have more than 1 record returned at a time.

Now your airtable ‘watcher’ is setup. Next, you need to do something when this event is triggered. after you click save, hover your mouse over the Airtable icon, and click “Add another module”. Follow the prompts to connect your Gmail account and choose the first option “send an email”. Set up your sender, apply a subject name for the email to be sent, and then you add your content. I recommend using a formatted HTML page and inserting the shortened URL as an image in the email.

When you click in the ‘content’ box, an additonal window will appear offering you the opporutnity to grab data from each indivdual row.

I should note each row that is noticed to be new will be sent as it’s own email.

I hope this helps. If you have any questions, post them below!

3 thoughts on “Sending/Retrieving useable quickchart.io charts hyperlinks with Thunkable X and sending them with Integromat”

  1. I think this is among the most important info for me.
    And i am glad reading your article. But want to remark on some general things, The web site style is wonderful, the articles is really excellent :
    D. Good job, cheers

    1. Thank you for taking time to check this out!

      Any suggestions for what I could do next that you may find helpful or interesting?

  2. That is very fascinating, You are a very skilled blogger.
    I’ve joined your rss feed and sit up for seeking extra of your fantastic post.
    Also, I’ve shared your website in my social networks

Leave a Reply

Your email address will not be published. Required fields are marked *