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.
2 Likes
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 
1 Like
What kind of chart do you need! A timeseries chart or simple line chart? Bar charts? Pie charts?
1 Like
I need a times series since I will be recording everyday
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):
- 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.
- you need to read how to use 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:
- 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. 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.
3 Likes
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
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.