# Creating Live Data Graphs on Thunkable
**URL:** https://community.thunkable.com/t/creating-live-data-graphs-on-thunkable/1624463
**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:** 2
I would like to create a similar graph to this, I have created this using quickchat io by keying in the labels for the dataset and also keying in the dataset. However, for my Thunkable project, I am creating a productivity monitor which shows the estimated duration process time (taken from google sheets) and the actual duration process time to be the time output using the timer feature by storing the amount of time taken. Hence, I would like to create a graph whereby I will be able to show the estimated duration VS actual duration taken.
---
i don’t think you can have it live, in the sense that chart is slowly moving to the left while new points appear on the right. however you can use the technique of @tatiang and recompute the chart when you press a button marked “Chart Now”. simply replace new values in the datasets with whatever came from the stored timer captures and the durations from the spreadsheet.- for the most current time period.
---
 - my thunkable project
![Screenshot 2021-11-24 at 6.59.18 PM|690x432] (upload://m8FTOssX1Gvaw4eW0idt4FvatvY.jpeg) - @tatiang thunkable project
Hi, I am using the drag and drop interface. However, the project that @tatiang has made, not using the drag and drop interface. Hence, I do not have the web API function the same as him. May I ask if there are any solutions to this?
---
sorry, the screenshot did not go through for @tatiang thunkable project.
this is his project’s version
---
Have you followed along with the video series that I’ve posted?
> [@\[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…
If you follow along, you should be able to create the demo chart
---
@teamzaddysn9m may I revert you back to post #4 where I suggest you use something similar to what @tatiang demonstrated and shared the project.
Yes, there is a delay but this delay is part of a second and can be a whole second or a bit over a second in slow links but this is more than sufficient for the graph you shared.
Anyway, even if you don’t see it fit for this specific purpose it is always a good idea to learn more than one way to achieve the same thing.
This just an opinion.
---
@tatiang Hi i have tried to modify your project to suit my project. However I have query with regards to this part shown in the screenshot I have attached. I am unsure where the % has come up from.
Hence may I ask why is there %?
---
%27 is the hexadecimal (aka ASCII) code for the apostrophe (aka single quote). in this case it is used to delimit a variaible, here, it’s a date. The join block is concatenating several string segments together so if you peek at the string, the middle part will show
`... datasets:[{label:'2021-11-25',data:[...`
---
Hi, may I ask if you know how @tatiang did the graph on [quickchart.io](http://quickchart.io)? How did he connect the graph to be able to reflect the dataset in the project? I am currently using google sheets instead of creating my own table like @tatiang [Screenshot 2021-11-26 at 4.07.20 PM|634x474](https://community.thunkable.com/uploads/short-url/o9y2XMmras1fDcG6csxKOmpGERs.png)
---
The function called `refresh chart` in my demo is where I pull the data from the local data source. The top part of the function is where I get the specific row of data:
You could just as easily use Google Sheets or Airtable. You just connect that data source to your project and use the Data Sources blocks to pull the info you need.
---
May I also ask, will it be possible for you to explain this “make text from list” block? Thank you.
---
Sure! First, I’m getting the row object from the data source. Because it’s an object, I have to use the `get property of object` blocks to retrieve individual data.
So I’m taking each property’s value (e.g. the “Sleep” value might be 3) and creating a text string separated by commas (e.g. “3,2,4,4,2”). This is just to provide [quickchart.io](http://quickchart.io) with a properly formatted url.
An example of a [quickchart.io](http://quickchart.io) url is:
[https://quickchart.io/chart?bkg=white&c={type:'bar',data:{labels:["Exercise","Sleep","Stress","Nutrition","Social"],datasets:[{label:'Users',data:[120,60,50,180,120]}](https://quickchart.io/chart?bkg=white&c=%7Btype:%27bar%27,data:%7Blabels:%5B%22Exercise%22,%22Sleep%22,%22Stress%22,%22Nutrition%22,%22Social%22%5D,datasets:%5B%7Blabel:%27Users%27,data:%5B120,60,50,180,120%5D%7D)]}}
**Edit:** reposting url in a different format because the forum code appears to break the one directly above this.
```auto
https://quickchart.io/chart?bkg=white&c={type:%27bar%27,data:{labels:[%22Exercise%22,%22Sleep%22,%22Stress%22,%22Nutrition%22,%22Social%22],datasets:[{label:%27Users%27,data:[120,60,50,180,120]}]}}
```
You’ll notice that the “data” section contains values separated by commas (120,60,50,180,120). This is basically what I’ve created using the `join` block in Thunkable.
---
Yes, I manually entered the data values.
[Previous page](https://community.thunkable.com/t/creating-live-data-graphs-on-thunkable/1624463.md?page=1)
[Next page](https://community.thunkable.com/t/creating-live-data-graphs-on-thunkable/1624463.md?page=3)