[Solved] Help troubleshooting an API Post for URL shortening

[jared]

Hello all. cany anyone help me figure out the API Post call?

Here is a share to the app i am working it in. Thunkable

I am trying to use the API Post blocks to send a complex url to quickchart.io and in return to receive a shortened url.

I am having troubles understanding where to put the commands.

here is what i am into thus far.

the api code from the site (no api key needed)

and what i have tried

the api url is https://quickchart.io/chart/create

[update!] quickchart.io is at least giving me a response now. however, it looks like this (i have emailed the owner of the website to see if there is anything that he can do for me on his end)

[UPDATE 2] - instead of using the CURL provided from the site. I converted the CURL into JSON per @jane’s suggestion. Then, I inject the JSON into the body of the POST.

Finally! I am now getting a shortened URL from the site. however, when i visit the shortened url, i am told that I am missing the ‘c’ or ‘chart’ variable.

{
“url”: “https://quickchart.io/chart/create”,
“raw_url”: “https://quickchart.io/chart/create”,
“method”: “post”,
“headers”: {
“Content-Type”: “application/json”
},
“data”: {
“{"chart": {type:line,data:{labels:[January,February, March,April, May], datasets:[{label:Dogs, data: [50,60,70,180,190], fill:false,borderColor:blue},{label:Cats, data:[100,200,300,400,500], fill:false,borderColor:green}]}}}”: “”
}
}

[jared]

close to Solved! (If anybody has an alternative way of creating graphs on an iPhone/iPad please let me know)

https://x.thunkable.com/copy/4d6619712201d11e641ca5f0ca971c0b

I will post the code later!
[update] NOPE

this works. i got this code from an admin at quickchart
{“chart”: {“type”: “bar”, “data”: {“labels”: [“Hello”, “World”], “datasets”: [{“label”: “Foo”, “data”: [1, 2]}]}}}

but for some reason this does not.
{“chart”:{“type”: “line”, “data”: {“labels”: [“jan 1”,“jan 2”, “jan 3”], “datasets”: [{“label”: “cow”,“data”: [4,5,6], “fill”: “false”, “borderColor”:“red”}]},“options”: {“title”: {“display”: “true”, “text”: “Daily Behavioral Occurrence vs Non-Occurrence”}, “scales”: {“yAxes”: [{“scaleLabel”: {“display”: “true”, “labelString”:“Non-Occurrence / Occurrence”}, “ticks”:{“reverse”: “false”, “stepSize”:1}}]},},}}

the code from above does produce this in the live editor on the quickchart website but when i send the API POST demand i get the weird cloudfare message again.

this is from the quickchart.io website
(you’ll notice in the screenshot the lack of {“chart”:} as i use the website for live styling testing. however, i do include that in the API POST

[jared]

It’s those dang fancy quotation marks that got me messed up. With the json requests, it will be vital to use the plain quotation marks. As such. I solved the issue using a JSON cleaner. https://jsonformatter.curiousconcept.com/

{
“chart”:{
“type”:“line”,
“data”:{
“labels”:[
“jan 1”,
“jan 2”,
“jan 3”
],
“datasets”:[
{
“label”:“cow”,
“data”:[
4,
5,
6
],
“fill”:“false”,
“borderColor”:“red”
}
]
},
“options”:{
“title”:{
“display”:“true”,
“text”:“Daily Behavioral Occurrence vs Non-Occurrence”
},
“scales”:{
“yAxes”:[
{
“scaleLabel”:{
“display”:“true”,
“labelString”:“Non-Occurrence / Occurrence”
},
“ticks”:{
“reverse”:“false”,
“stepSize”:1
}
}
]
}
}
}
}