📽 WDC #25 “Show Thunkable 4”

After 2 fantastic challenges where you designed apps for collectors and apps that recreated the Mastermind game it’s time for another edition of “Show Thunkable”

The format is very simple, rather than us setting you a challenge to complete you tell us what projects you’ve been working on.

Whether it’s something for work, a client project or an app you’re building just for fun we want you to share it here and let us know all about it.

If you’ve participated in previous editions of “Show Thunkable” please post an update - how are you getting on with your project since we last heard from you?

Community Meetup

By happy coincidence, our fourth “Show Thunkable” also coincides the fourth Community Meetup.

If you want to chat about your projects in real time, on a video call then you can register to attend here

(Don’t worry if you can’t attend - we’ll email out the video after the Meetup!)

7 Likes

… im still focused on my only (yet) project here :face_with_hand_over_mouth:
Fishing Contest Helper - Apps on Google Play
Was launched 2 months ago and its now at version 30 (4.1) with alot of improovements since…
Got 12 5 stars until now (maybe those who didnt liked it didnt bother to rate it :rofl:) and i have around 50 devoted users… Its still a “child” but is growing :relaxed:
@muneer helped me alot in solving my issues when tried to add components… So thank you for your valuable help @muneer

4 Likes

You are welcome @mimostel
One of the best thing about this community is the willingness of everyone to help others.

4 Likes

Now we have to show our own app in #WDC

Is the meeting over?

1 Like

Oh, just finished the moment you posted this message @tony.ycy.program ! Hope to see you next time.

2 Likes

@codeswept Forget the time😂

2 Likes

@codeswept here’s my project instead in the meeting.

this was genarally not my idea, I tried to create a restaurant app for my uncle, but ended up creating an exentsion for my uncle’s wife.

I didn’t WANT to, but unfortunatly did.I thoght we could create a database, but that takes a LOT of time. so time to leave the link.
https://x.thunkable.com/projectPage/6163b612227bae0011935630

1 Like

Packed Bubble Charts Demo

here’s a demo of how to display Packed Bubble charts using thunkable. check out the video and see how sales figures for four(4) US regions, each one consisting of a number of states. are displayed using packed bubbles. the quantity dictates the size of each bubble and (optionally) the grouping (ie. region) is shown in different colors. the bubbles gravitate toward each other but never overlap.

here’s the link to the demo
https://x.thunkable.com/copy/c7d0173a74e6dba61e5defe8b522d2ac

packbubl1

this kind of visualization used to be available only in big size apps like Tableau but now it is available thru the use of a new graphics provider - https://www.highcharts.com . they have all kinds of new viz options available including dependency wheel, sunburst and sankey diagrams among others (check out Highcharts | Highcharts.com). some of these are not available in the popular api calls from quickchart.io and google chart. i’ve only got packed bubbles to work with thunkable (i’ve tried sunbusrt and combo charts, which work in jsfiddle, but i cannot get them display anything when i try the webview block in thunkable. ).

anyway , on with the demo. given sales data like this in a CSV…

> Region,State,Sales
> West,Washington,138641.27
> West,Colorado,32108.12
> West,California,457687.63
> West,Arizona,35282
> South,Virginia,70636.72
> South,Tennessee,30661.87
> South,North Carolina,55603.16
> South,Kentucky,36591.75
> South,Georgia,49095.84
> South,Florida,89473.71
> East,Pennsylvania,116511.91
> East,Ohio,78258.14
> East,New York,310876.27
> East,New Jersey,35764.31
> East,Massachusetts,28634.43
> East,Delaware,27451.07
> Central,Wisconsin,32114.61
> Central,Texas,170188.05
> Central,Minnesota,29863.15
> Central,Michigan,76269.61
> Central,Indiana,53555.36
> Central,Illinois,80166.1

if you can somehow get it into the form below, you’re ready to use packed bubble charts! (i first converted the csv to json then used thunkable to reformat the json to this required form)

> {name:'West',data:[{name:'Washington',value:138641.27},{name:'Colorado',value:32108.12},	{name:'California',value:457687.63},{name:'Arizona',value:35282},]},
> {name:'South',data:[{name:'Virginia',value:70636.72},{name:'Tennessee',value:30661.87},	{name:'North Carolina',value:55603.16},{name:'Kentucky',value:36591.75},	{name:'Georgia',value:49095.84},{name:'Florida',value:89473.71},]},
> 	{name:'East',data:[{name:'Pennsylvania',value:116511.91},{name:'Ohio',value:78258.14},
> 	{name:'New York',value:310876.27},{name:'New Jersey',value:35764.31},	{name:'Massachusetts',value:28634.43},{name:'Delaware',value:27451.07},]},
> {name:'Central',data:[{name:'Wisconsin',value:32114.61},{name:'Texas',value:170188.05},	{name:'Minnesota',value:29863.15},{name:'Michigan',value:76269.61},		{name:'Indiana',value:53555.36},{name:'Illinois',value:80166.1}

the above block is what goes into app variable data_str

note that i could only get the display working when i was live testing on my device. that’s how it’s been in my case all this time. you may be able to make it work in your case.

the legend radio buttons are live, so clicking on one of them either hides or restores the group you click. i get a kick out of seeing those bubbles “explode” to make room for more bubbles or shrink after some bubbles are removed. also, the bubbles themselves are live so clicking them gives you information about the data point represented in the bubble. if you want to experiment with other options click on the packed-bubble sample in the demo page of highcharts.com. enjoy!

4 Likes

everybody uses quickchart.io to make charts.

Quickchart is a great (and popular!) website but it’s always cool to find out new websites that might be easier to use!
Great job @manyone! If possible, could you share your song translator app too? I loved that one and I’m sure many people who couldn’t make it to the meeting would love to see it too.

2 Likes

I use https://sandbox.neo4j.com/ for graphs. while quickchart.io for charts.

1 Like

But you can’t make packed bubble charts with it.

2 Likes

It’s got a few loose ends… after I clean it up I’ll post it

2 Likes

here’s my song translation stats app that i had described in our last zoom meetup.

(i have to use live test on device to show all charts working. if you try previewing any other way, use chrome browser)
i transferred the details of my page at lyricstranslate.com into a local database in my thunkable project for this demo. the first button points to the usual list viewer. the 2nd button sorts the data first, by descending number of views before displaying it on a list viewer. the third button summarizes the data first before it goes to the chart screen (2nd screen above).

here’s the link to the project:
https://x.thunkable.com/copy/8aeaa47f34027376551e6e59d1e43031

the first chart uses the packed bubble chart (available only from highchart.com) by building the complete url string on the fly (from the summary data) then by setting the URL to this string. (note that this is the same method when using quickcharts.io and google charts api)

the 2nd chart is a combo chart (line and bar) and rendered using google charts API. this chart is also based on the summary data.

for the sunburst chart (also available only from highchart.com), i first tried to apply the method used in the packed bubble, by building the URL string dynamically, but i could never get it to work. i asked our guru, muneer for help and thanks to his expertise and persistence, he came up with a different method (using the thunkable web viewer extension) to display the chart. at the moment, the data is hardcoded (ie. it doesn’t use the summary data), for demo purposes. i’m still seeking for a way to pass the data from thunkable to the html so the chart can be used for any set of similar data.

4 Likes

Thank you for the demo.

I have noticed that the Web Viewer does not recognize any data from the app when used in an Android device.

I’m not sure yet, I’m still testing and would love someone to check and report the case. May be @domhnallohanlon can tell us if they team is aware of such issue.

2 Likes

The same issue while using quickchart.io. next time I open it’s coming

Today’s friday! but where is the new WDC?

Lunch Plan

Number of blocks: ~300 … Interface: Drag and Drop

Components: List Viewer … Data Sources: Firebase

Back story:

My daughter is pretty picky about food. Sometimes. I mean, she’ll eat sushi and cheeseburgers and omelettes and… just about anything I cook but… when it comes to school lunch, she barely eats.

So I decided to make an app that lets her choose what she’d like to have in her lunch.

I wanted a list of items that were pre-populated and that she could favorite/unfavorite and an easy way for my wife and I to see her choices outside of the app. I started with Google Sheets but the favoriting process was too slow. I then moved to Firebase which works really nicely but I’m not sure my wife is going to want to check my Firebase console each day but… I guess it’s easy enough to just open the app/web app to see the choices.

Issues:

I had to use three separate List Viewers and three separate sets of blocks to achieve this effect. If we could set ALL properties for components such as List Viewers, I could easily achieve this with a single List Viewer, saving so many extra blocks. But I can’t see things like the border color of a List Viewer using blocks. :frowning:

Demo:

So far, I have this prototype (the video does not have sound):

5 Likes