# Creating Live Data Graphs on Thunkable **URL:** \ **Category:** Questions about Thunkable X\ **Created:** [November 19, 2021, 9:16am UTC](https://community.thunkable.com/t/creating-live-data-graphs-on-thunkable/1624463 "2021-11-19T09:16:12Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![teamzaddysn9m](https://avatars.discourse-cdn.com/v4/letter/t/e480ec/32.png) [@teamzaddysn9m](https://community.thunkable.com/u/teamzaddysn9m)\ **Post date:** [November 19, 2021, 9:16am UTC](https://community.thunkable.com/t/creating-live-data-graphs-on-thunkable/1624463/1 "2021-11-19T09:16:12Z")
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! (: ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [November 19, 2021, 9:35am UTC](https://community.thunkable.com/t/creating-live-data-graphs-on-thunkable/1624463/2 "2021-11-19T09:35:45Z")
Welcome to Thunkable You can use the [quickchart.io](http://quickchart.io) to build the chart and display it using the `image` component. > **[Chart Images from URL | QuickChart](https://quickchart.io)** > > Create a chart image with one URL and embed anywhere. Open source, no watermarks. ---
**Author:** ![teamzaddysn9m](https://avatars.discourse-cdn.com/v4/letter/t/e480ec/32.png) [@teamzaddysn9m](https://community.thunkable.com/u/teamzaddysn9m)\ **Post date:** [November 19, 2021, 9:40am UTC](https://community.thunkable.com/t/creating-live-data-graphs-on-thunkable/1624463/3 "2021-11-19T09:40:06Z")
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? ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [November 19, 2021, 9:50am UTC](https://community.thunkable.com/t/creating-live-data-graphs-on-thunkable/1624463/4 "2021-11-19T09:50:36Z")
@tatiang has made a demo with this `quickchart.io` and made it responsive. Check this > [@Viewing user data with data viewers](https://community.thunkable.com/t/viewing-user-data-with-data-viewers/1609298/4): > > I’m not sure how you would display a scrolling timeline of data but I did make this demo of a way to do it using a chart and next/prev date buttons: [https://x.thunkable.com/projectPage/618e191dff584300106c34f0](https://x.thunkable.com/projectPage/618e191dff584300106c34f0) ---
**Author:** ![teamzaddysn9m](https://avatars.discourse-cdn.com/v4/letter/t/e480ec/32.png) [@teamzaddysn9m](https://community.thunkable.com/u/teamzaddysn9m)\ **Post date:** [November 19, 2021, 9:55am UTC](https://community.thunkable.com/t/creating-live-data-graphs-on-thunkable/1624463/5 "2021-11-19T09:55:31Z")
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? ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [November 19, 2021, 9:57am UTC](https://community.thunkable.com/t/creating-live-data-graphs-on-thunkable/1624463/6 "2021-11-19T09:57:34Z")
Have you looked at the project in the post? ---
**Author:** ![teamzaddysn9m](https://avatars.discourse-cdn.com/v4/letter/t/e480ec/32.png) [@teamzaddysn9m](https://community.thunkable.com/u/teamzaddysn9m)\ **Post date:** [November 19, 2021, 9:59am UTC](https://community.thunkable.com/t/creating-live-data-graphs-on-thunkable/1624463/7 "2021-11-19T09:59:36Z")
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? ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [November 19, 2021, 10:02am UTC](https://community.thunkable.com/t/creating-live-data-graphs-on-thunkable/1624463/8 "2021-11-19T10:02:20Z")
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. ---
**Author:** ![teamzaddysn9m](https://avatars.discourse-cdn.com/v4/letter/t/e480ec/32.png) [@teamzaddysn9m](https://community.thunkable.com/u/teamzaddysn9m)\ **Post date:** [November 19, 2021, 10:05am UTC](https://community.thunkable.com/t/creating-live-data-graphs-on-thunkable/1624463/9 "2021-11-19T10:05:18Z")
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 ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [November 19, 2021, 10:06am UTC](https://community.thunkable.com/t/creating-live-data-graphs-on-thunkable/1624463/10 "2021-11-19T10:06:47Z")
> [@teamzaddysn9m](#): > > MAy I just ask if it affects anything? Not at all. It will work exactly the same way. I hope this answer gives you enough comfort. ---
**Author:** ![teamzaddysn9m](https://avatars.discourse-cdn.com/v4/letter/t/e480ec/32.png) [@teamzaddysn9m](https://community.thunkable.com/u/teamzaddysn9m)\ **Post date:** [November 19, 2021, 10:45am UTC](https://community.thunkable.com/t/creating-live-data-graphs-on-thunkable/1624463/11 "2021-11-19T10:45:35Z")
May I ask if he did key in the data on the local database source? ---
**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\ **Post date:** [November 19, 2021, 10:58am UTC](https://community.thunkable.com/t/creating-live-data-graphs-on-thunkable/1624463/12 "2021-11-19T10:58:52Z")
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. ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [November 19, 2021, 11:32am UTC](https://community.thunkable.com/t/creating-live-data-graphs-on-thunkable/1624463/13 "2021-11-19T11:32:18Z")
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. > [@\[Tutorial\] Dynamic interactive charts](https://community.thunkable.com/t/tutorial-dynamic-interactive-charts/563880): > > I wanted to post this example for those who are making quiz apps or study apps. The ability to see your progress visually is uber important. This is why we have charts in the first place. seeItLive incorporating charts in the past has been difficult. Here is an easy example you can fork or use yourself to incorporate a correct/incorrect chart into your app. This is based on the standard celebration chart that is used in the world of Precision Teaching and Applied Behavior Analysis. This allows… ---
**Author:** ![teamzaddysn9m](https://avatars.discourse-cdn.com/v4/letter/t/e480ec/32.png) [@teamzaddysn9m](https://community.thunkable.com/u/teamzaddysn9m)\ **Post date:** [November 19, 2021, 7:28pm UTC](https://community.thunkable.com/t/creating-live-data-graphs-on-thunkable/1624463/14 "2021-11-19T19:28:28Z")
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 😊 ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [November 19, 2021, 8:38pm UTC](https://community.thunkable.com/t/creating-live-data-graphs-on-thunkable/1624463/15 "2021-11-19T20:38:37Z")
👀 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! ---
**Author:** ![teamzaddysn9m](https://avatars.discourse-cdn.com/v4/letter/t/e480ec/32.png) [@teamzaddysn9m](https://community.thunkable.com/u/teamzaddysn9m)\ **Post date:** [November 22, 2021, 6:12am UTC](https://community.thunkable.com/t/creating-live-data-graphs-on-thunkable/1624463/16 "2021-11-22T06:12:09Z")
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 ---
**Author:** ![teamzaddysn9m](https://avatars.discourse-cdn.com/v4/letter/t/e480ec/32.png) [@teamzaddysn9m](https://community.thunkable.com/u/teamzaddysn9m)\ **Post date:** [November 22, 2021, 9:20am UTC](https://community.thunkable.com/t/creating-live-data-graphs-on-thunkable/1624463/17 "2021-11-22T09:20:34Z")
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.” ![Screenshot 2021-11-22 at 5.18.43 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/8/48760b103eae8f24bfd922694e1ea92588ee20b5.png) ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [November 22, 2021, 1:04pm UTC](https://community.thunkable.com/t/creating-live-data-graphs-on-thunkable/1624463/18 "2021-11-22T13:04:37Z")
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). ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/4/e4f45e40f3e203e1fd39c799f86238758cfb76e6.jpeg) ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/f/bf79e5ee974a1669463874b5f59a78a3a205d5a0.jpeg) ---
**Author:** ![teamzaddysn9m](https://avatars.discourse-cdn.com/v4/letter/t/e480ec/32.png) [@teamzaddysn9m](https://community.thunkable.com/u/teamzaddysn9m)\ **Post date:** [November 22, 2021, 8:23pm UTC](https://community.thunkable.com/t/creating-live-data-graphs-on-thunkable/1624463/19 "2021-11-22T20:23:09Z")
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. ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [November 22, 2021, 9:38pm UTC](https://community.thunkable.com/t/creating-live-data-graphs-on-thunkable/1624463/20 "2021-11-22T21:38:55Z")
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! [Next page](https://community.thunkable.com/t/creating-live-data-graphs-on-thunkable/1624463.md?page=2)