Creating graph on Thunkable with quick chart

Questions about Thunkable
1

Hello everyone,

I am trying to create a graph in Thunkable using Quick Chart API, but I keep getting an error:

image

Here is my code:

image
image1051×809 50.5 KB

When I try to show the URL in a label, it shows this URL:
https://quickchart.io/chart?c={“type”:“bar”,“data”:{“labels”:[“Chili”,“Meatball”,“Cabbage”,“Corn”],“datasets”:{“label”:“Waste”,“data”:[1,2,3,4],“backgroundColor”:“rgb(255, 0, 0)”}},“options”:{“title”:{“display”:true,“text”:“Food waste”}}}

I think there may be an error in the code. Please reply to this post if you have dealt with this issue or have advice.
Thank you in advance for your help!

2

Use this one instead:

https://quickchart.io/chart?c={"type":"bar","data":{"labels":["Chili","Meatball","Cabbage","Corn"],"datasets":[{"label":"Waste","data":[1,2,3,4],"backgroundColor":"rgb(255, 0, 0)"}]},"options":{"title":{"display":true,"text":"Food waste"}}}

Also as different solution, instead of using JSON format, you can use string texts joined together to reach the URL - i find it wasier to use, but it’s up to you

1 Like
4

Thank you for your response!
I’ve just found out the problems.

  1. As you helped me to edit, I need to put the dataset inside a list
  2. It doesn’t work if I directly paste it on Thunkable, that’s because of the quotation marks. It works if I replace all the double quotation marks with single quotations! (although I don’t know why it doesn’t support double quotations)

Here is my final code:

image
image1045×804 56.1 KB

I still used a json formatted file to generate the link, but after that, I replaced all double quotations with single quotations.
Instead of using the API get method, I listened to your suggestion and put the url directly to the image component.
Then it works!
Thank you so much!

1 Like