How do you get API data into a chart

Hi everyone,

I’m trying to retrieve stock data from an API for the past 7 days and display it in a chart in my Bubble app. I’ve tried setting the state using a “set a state” action, but I’m not sure if I’m missing something or doing it correctly.

Can anyone provide some guidance on how to properly display data retrieved from an API (list) and display it in a chart? Any help would be greatly appreciated. Thank you!

Have you setup the API?

Yes I did. the API returns list of info (date, high, low, open, close - per day). and the API works (and when I click Get Stock), i see that the data is pulled from the API ( when i use the debugger, step by step). but after the issue is how to extract that data and then feed it into a chart or a table.
Best regards and apologies for the delay in responding.
Bests,

Normally a chart or table element will have an input for the dynamic expression that is the data source, much the same way a repeating group would. And they can accept any type of data you have in your app, much like a repeating group would; and this is true for API data for APIs you setup in the API connector as either Data or Action.

My preference is to always set up as Action, so that I can use it as an action in a workflow and then use the workflow action of elements type repeating group display list…I use the ‘result of previous step’ dynamic expression as the data value to display in the repeating group. You should be able to do this same thing, but display the data into the chart or table element.

If you made the table, then just display list in the repeating group.

If for some reason the chart plugin, or table plugin (if you’re using one) do not allow for a workflow action to display the list after the API call, then you can just set up a custom state as a list and use that value as the value source in the chart or table element. Then after your API workflow, you would set the custom state value as the ‘result of previous step’.

Hello, I have done all the steps. Create API, Store API data in custom states as list ( API data is json list). It works well with Text fields since i can display the last data but im strugling with charts:

This is my custom states, las two are list with all the data, the fist ones just hold the last one (they work good)

Then on chart, it doesnt allow me to choose as data type those custom states but it seems to show my API call action:

But once i choose datatype the api call (request_data) it doesnt show me the sub data or allow me to display custom states.

I hope you can point me to my error. I dont want to save all to bubble database in order to have to read it xD

It would not show sub data because your API call might be set to use as action instead of data, so you would need to leave the data source blank and send the data via a workflow, but I don’t know enough about the plugin you are using to know for sure if that is allowed with plugin, so one option is to set the API call to use as Data.

Also, the custom states are wholly separate from your API call data type, they are not the same type since your custom states are dates and numbers. Also, the sub data of an API call would not be the datasource it would just become available as values to choose for the expressions much in the same way as a data type would be the data source and the data fields would become available as the values to choose for expressions.

Hello, thank you.

Yes indeed setting up API as “Data” allowed me to use it to plot a chart. I wanted to avoid this because i think it will increase workloads (one api calls for each element displaying data) and also slow down the app. What do you think about this? Everytime i use an external api as datasource does bubble makes an api call?

Another small issue, now it seems i cant use the data type from api in group containers (with charts) because they want individual itlems not a list of things. Could you sugest something so i can make a single api call for the entire group of elemnts and then use in every element?

Strange thing is it works well for groups where i only need the last item for a text display but not for the group where i want to use a chart because charts use list of things.
Good news is that everything is working ok if i make the api call in a group where i want to display only one value, and a separate api call in Chart if i want to plot. Just hope it doesnt consume much workloads.

Regards

Good news is that it works fine if i use api call

Create a repeating group for the api call data. Put that repeating group into a floating group set to float beneath page so it’s not visible to user and doesn’t interfere with other elements on the page in terms of layout and responsiveness. When you need the API data for other elements just reference the repeating group.