# Quick Chart Maker for Thunkable-X

i want to share my quick chart maker. i know it has the same functionality as another template that’s been shared by @kevinkun for a while, but this one is for thunkable-x. it is based on quickchart.io, here’s a copy you can remix.

https://x.thunkable.com/copy/b25d36f7550c89b71b096b50d786fa7c

it can do these 9 charts from the same data: vertical bar, stacked vertical bar, horizontal bar, stacked horizontal bar, line, pie, doughnut, polar area and radar. No bells and whistles.

i used a list viewer for simple chart type selection.

and here’s the main loop. just enter your data in the first blocks as shown below.

i hope it will be useful to some of you!

3 Likes

@manyone great work!! Thanks for sharing, I love data visualization! ll share how I’ve been adding trendlines I to the quickchart graphs if you’re interested. I am tinkering with the formula, somethings off, but it’s nearly perfect.

Or this one that has custom tick marks and is on a semi log scale

Any idea how to do a time series equal interval line graph?

1 Like

cool! i gather you’re using regression for the trend line - it’s the dotted line right? it looks good! your question about time series equal interval graph becomes a challenge when the known observations are not equally spaced to start with! subject is over my head!
i like visualization too. sometime ago, i did a quick render of a sankey diagram using the technique shown by @ACTech in his demo app. (google charts via webview).

https://x.thunkable.com/copy/51dca818128615a271172625f19acd2f

the data that goes into this is
[‘A’,‘X’,5],[‘A’,‘Y’,7],[‘A’,‘Z’,6],[‘B’,‘X’,2],[‘B’,‘Y’,9],[‘B’,‘Z’,4]

Thanks for sharing.

i have a question though. is there a way, using thunkable-x , to take a snapshot of that and send to someone via email?

1 Like
1 Like

How can i feed data from firebase into dsDataList and labelList?
Thanks

i tried to do it using airtable - you can probably do something similar with firebase.
i created a table in airtable like this:

and i read the table to format the required lists dsdatalist and labellist . i inserted all those airtable related blocks before the colorlist.

see if you do the same thing for firebase.

however, there seems be something wrong with thunkable and/or airtable or with timing . the append block i marked sometimes executes twice but other times only once. as if the append is so fast that it executes again before the database operation is completed. so i cannot share a copy yet.

Thank you for this guide. I tried it for firebase, it didn’t work. I did a work around and got satisfactory result for Bar chart:

I pulled my data from firebase with screen opens block and saved locally in List_Viiewers and displayed chart type List_Viewer1 also. Then opened chart when chart type is selected.
Where do I change Chart image size especially width of the Bar chart?
Thank you.

bar width
make the change to the block by inserting the block marked “,barPercentage:1,categoryPercentage:1” before the “,data[” segment

without it, the chart is set to “flex” which computes the bar widths optimally to provide visual separation of bars and categories. this setting is equivalent to flex:
,barPercentage:0.9,categoryPercentage:0.8

the value
,barPercentage:1,categoryPercentage:1 uses up all the space with all bars stuck together with no separation.
you can try other combinations according to your taste. personally, i’m happy with the default.
you can leave it hardcoded or you can consider it a challenge to allow it to be controlled interactively.

chart size
regarding chart size, it is currently hardcoded at this segment of the makechart block:

the contents of urlStr (1st join segment) is currently set to:
https://quickchart.io/chart?width=500&height=300&c={type:%27

you can change the width and height to any values you want.

2 Likes

Thank you

amazing!!!