Creating Live Data Graphs on Thunkable

Hello! Do any of you guys have any idea on how to create live data graphs? I am making an application that tracks how long the process takes and wishes to add a chart to show the productivity rate by comparing the estimated duration(based on cycle time) vs actual completed time. Thank you! (:

1 Like

Welcome to Thunkable

You can use the quickchart.io to build the chart and display it using the image component.

Hi as the time data i am taking from is through the timer feature on Thunkable, I am unable to key in the data for it. May I ask if there are any solutions?

1 Like

@tatiang has made a demo with this quickchart.io and made it responsive.

Check this

1 Like

May I ask how he was able to do it? For instance, the steps, blocks and components needed? Is there a document or Youtube Tutorial on this?

1 Like

Have you looked at the project in the post?

Will it be possible if one of my variables for the graph is from a timing output? isit possible for me to save that timing data?

1 Like

If you just keep asking without seeing the project and studying how it is done, you will never make a progress.

Please see the project and study the method that @tatiang used to pass info to the chart. The info being stored or in variables or keyed in by the user is not the issue.

I have read his project but he is using local table but I am using Google Sheets MAy I just ask if it affects anything? Because I do not want my user to key in their data manually I would like my application to be able to store that data information to create the graph. Thanks

1 Like

Not at all. It will work exactly the same way.

I hope this answer gives you enough comfort.

May I ask if he did key in the data on the local database source?

1 Like

I’m sure he did it by himself.

You can connect your own Airtable or Google sheet and change the blocks as needed and the chart will work just as fine.

1 Like

The methods here will not produce charting real-time, instead there will always be a lag as you send data to a server and await the chart image. Not a bad solution but not what you asked for . To accomplish live charts, You’d want to utilize the webviewer and create a custom html page for yourself that includes the ChartJS library. Create your desired chart and feed your data in that way.

2 Likes

Hello! may I ask if there are any documentation or youtube tutorial videos on how I will be able to create the chart using web viewer? Thank you :blush:

:eyes: be on the lookout.

Customer Success might be ramping up and if you ask nicely (as you have already) a tutorial like this may eventually be released!

Hi, as I am currently requiring this document to guide me in creating live graph data on “Thunkable”, may I ask if there is any way to help me with this? Thank you

Hi, may I ask where did he get the block named “Refresh Chart” from? As I looked under functions, there are no blocks named “Refresh chart.”

1 Like

That’s a function. When you create a function using the “do something” block in the Functions drawer, you give it a name by replacing the text in “do something.” You can then call that function with the block containing its name (also found in the Functions drawer).


1 Like

Hi I want to create an application that allows me to create a graph that show the user’s process time vs estimated process timing. The user’s process time will be made using a timer and the estimated process timing is using the logic component to connect a label x a text input.
May I ask how am I able to create this type of graph?
Thank you.

Can you find an example of this graph online for demonstration purposes or comparison. Charts are all constructed differently. If you can show an image of the graph, then we can help you figure out how to get it built!