# How can I add user's info from a slider to make graphs according to their inputs?

**URL:** <https://community.thunkable.com/t/how-can-i-add-users-info-from-a-slider-to-make-graphs-according-to-their-inputs/1663868>\
**Category:** Questions about Thunkable X\
**Created:** [January 2, 2022, 1:42am UTC](https://community.thunkable.com/t/how-can-i-add-users-info-from-a-slider-to-make-graphs-according-to-their-inputs/1663868 "2022-01-02T01:42:05Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![gummybearscgisz6mh](https://avatars.discourse-cdn.com/v4/letter/g/919ad9/32.png) [@gummybearscgisz6mh](https://community.thunkable.com/u/gummybearscgisz6mh)\
**Post date:** [January 2, 2022, 1:42am UTC](https://community.thunkable.com/t/how-can-i-add-users-info-from-a-slider-to-make-graphs-according-to-their-inputs/1663868/1 "2022-01-02T01:42:05Z")

</div>

I am creating a mental health app that makes the user record their moods every day. To record that, I used a slider (because i thought it might be the best option) but I have no idea of how to get that info from that slider and turn it into a graph. Can anyone help me? All the tutorials I found were either too hard or weren’t was I was looking for.

---

<div class="post-metadata">

**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:** [January 2, 2022, 2:43am UTC](https://community.thunkable.com/t/how-can-i-add-users-info-from-a-slider-to-make-graphs-according-to-their-inputs/1663868/2 "2022-01-02T02:43:10Z")

</div>

Welcome to the community @gummybearscgisz6mh !!!

Which tutorials have you looked at!?!? 👀

---

<div class="post-metadata">

**Author:** ![gummybearscgisz6mh](https://avatars.discourse-cdn.com/v4/letter/g/919ad9/32.png) [@gummybearscgisz6mh](https://community.thunkable.com/u/gummybearscgisz6mh)\
**Post date:** [January 2, 2022, 4:57am UTC](https://community.thunkable.com/t/how-can-i-add-users-info-from-a-slider-to-make-graphs-according-to-their-inputs/1663868/3 "2022-01-02T04:57:25Z")

</div>

Hi Jared,

I have looked at one of yours that used vscode, but I thought that it might not be what I was looking for (I also didnt want to waste too much time doing something that is too hard for me, considering that I dont have that much experience in coding).

Is there a way that you can directly recommend me some tutorials or something like that?

Also, thank you for your time 🙂

---

<div class="post-metadata">

**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:** [January 2, 2022, 5:08am UTC](https://community.thunkable.com/t/how-can-i-add-users-info-from-a-slider-to-make-graphs-according-to-their-inputs/1663868/4 "2022-01-02T05:08:23Z")

</div>

What kind of chart do you need! A timeseries chart or simple line chart? Bar charts? Pie charts?

---

<div class="post-metadata">

**Author:** ![gummybearscgisz6mh](https://avatars.discourse-cdn.com/v4/letter/g/919ad9/32.png) [@gummybearscgisz6mh](https://community.thunkable.com/u/gummybearscgisz6mh)\
**Post date:** [January 2, 2022, 6:17pm UTC](https://community.thunkable.com/t/how-can-i-add-users-info-from-a-slider-to-make-graphs-according-to-their-inputs/1663868/5 "2022-01-02T18:17:00Z")

</div>

I need a times series since I will be recording everyday

---

<div class="post-metadata">

**Author:** ![manyone](https://avatars.discourse-cdn.com/v4/letter/m/ee59a6/32.png) [@manyone](https://community.thunkable.com/u/manyone)\
**Post date:** [January 3, 2022, 9:21am UTC](https://community.thunkable.com/t/how-can-i-add-users-info-from-a-slider-to-make-graphs-according-to-their-inputs/1663868/6 "2022-01-03T09:21:27Z")

</div>

there are 3 steps to get the info from the slider to the chart (i’m assuming you’re tracking only one measure with that slider. you will a need different slider for every measure you’re tracking):

1. you need to save the value of the slider to some sort of database - google sheet, airbase, firebase, etc. and you need to also save the date. you will probably need a button whose function is to append the date and the value of the slider/s to the end of your database.
2. you need to read how to use [quickchart.io](https://quickchart.io/) (one of the easiest charting api’s to use) by looking at the examples.

it’s not hard: this url string  
`https://quickchart.io/chart?c={type:%27bar%27,data:{labels:[2012,2013,2014,2015,2016],datasets:[{label:%27Users%27,data:[120,60,50,180,120]}]}}`  
produced this bar chart:  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/8/087a0afae9619d531cc8e12a5e47f60947300e09.png)

1. you need to learn how to use the webviewer component in thunkable and learn how to build the url string to send to [quickchart.io](http://quickchart.io). you will notice that parts of the url string contains the data to be plotted: `[2012,2013,2014,2015,2016]` and `[120,60,50,180,120]` - plotting your data is done by reading your database and building the data values to replace the data segments above.

in fact, you can see how easy it is done by copying the above urls string to notepad then modify the values of the 2nd array `[120,60,50,180,120]` with other values, then highlight the new string and copy and paste it to a new browser window.

---

<div class="post-metadata">

**Author:** ![gummybearscgisz6mh](https://avatars.discourse-cdn.com/v4/letter/g/919ad9/32.png) [@gummybearscgisz6mh](https://community.thunkable.com/u/gummybearscgisz6mh)\
**Post date:** [January 16, 2022, 9:00pm UTC](https://community.thunkable.com/t/how-can-i-add-users-info-from-a-slider-to-make-graphs-according-to-their-inputs/1663868/7 "2022-01-16T21:00:19Z")

</div>

Hi, so I tried quickchart out, and I sort of understood how it works, but i still have no idea how to make that data customizable to the user. Can someone help me?

Again, I’m making the user record something in a slider, then making a timeseries chart in another page so they can see their individual progress

---

<div class="post-metadata">

**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:** [January 16, 2022, 9:29pm UTC](https://community.thunkable.com/t/how-can-i-add-users-info-from-a-slider-to-make-graphs-according-to-their-inputs/1663868/8 "2022-01-16T21:29:25Z")

</div>

Hey @gummybearscgisz6mh

Interested in learning this approach

> [@\[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…

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [April 16, 2022, 9:30pm UTC](https://community.thunkable.com/t/how-can-i-add-users-info-from-a-slider-to-make-graphs-according-to-their-inputs/1663868/9 "2022-04-16T21:30:13Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
