# 📽 WDC #25 “Show Thunkable 4”

**URL:** <https://community.thunkable.com/t/wdc-25-show-thunkable-4/1551564>\
**Category:** Teachers' Lounge\
**Tags:** wdc\
**Created:** [October 8, 2021, 2:00pm UTC](https://community.thunkable.com/t/wdc-25-show-thunkable-4/1551564 "2021-10-08T14:00:47Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [October 8, 2021, 2:00pm UTC](https://community.thunkable.com/t/wdc-25-show-thunkable-4/1551564/1 "2021-10-08T14:00:47Z")

</div>

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](https://us06web.zoom.us/meeting/register/tZMucu6rrzssGN1fnumE_aBzoG3wEBkNaToR)

[https://community.thunkable.com/t/virtual-event-community-meetup/1404062/226?u=domhnallohanlon](https://community.thunkable.com/t/virtual-event-community-meetup/1404062/226)

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

---

<div class="post-metadata">

**Author:** ![mimostel](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mimostel/32/107661_2.png) [@mimostel](https://community.thunkable.com/u/mimostel)\
**Post date:** [October 8, 2021, 2:25pm UTC](https://community.thunkable.com/t/wdc-25-show-thunkable-4/1551564/2 "2021-10-08T14:25:37Z")

</div>

> [@domhnallohanlon](#):
>
> 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?

… im still focused on my only (yet) project here 🤭  
[Fishing Contest Helper - Apps on Google Play](https://play.google.com/store/apps/details?id=com.gmail.mimostel.fishingcontesthelper)  
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 🤣) and i have around 50 devoted users… Its still a “child” but is growing 😌  
@muneer helped me alot in solving my issues when tried to add components… So thank you for your valuable help @muneer

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [October 8, 2021, 3:19pm UTC](https://community.thunkable.com/t/wdc-25-show-thunkable-4/1551564/3 "2021-10-08T15:19:03Z")

</div>

> [@mimostel](#):
>
> So thank you for your valuable help @muneer

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

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [October 8, 2021, 4:54pm UTC](https://community.thunkable.com/t/wdc-25-show-thunkable-4/1551564/4 "2021-10-08T16:54:09Z")

</div>

Pinned globally on October 8, 2021, 4:54pm UTC



---

<div class="post-metadata">

**Author:** ![rishabh\_2008](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/rishabh_2008/32/112230_2.png) [@rishabh\_2008](https://community.thunkable.com/u/rishabh_2008)\
**Post date:** [October 9, 2021, 4:30am UTC](https://community.thunkable.com/t/wdc-25-show-thunkable-4/1551564/5 "2021-10-09T04:30:04Z")

</div>

Now we have to show our own app in #WDC

---

<div class="post-metadata">

**Author:** ![tony.ycy.program](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tony.ycy.program/32/100153_2.png) [@tony.ycy.program](https://community.thunkable.com/u/tony.ycy.program)\
**Post date:** [October 9, 2021, 4:19pm UTC](https://community.thunkable.com/t/wdc-25-show-thunkable-4/1551564/6 "2021-10-09T16:19:13Z")

</div>

> [@domhnallohanlon](#):
>
> ## 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](https://us06web.zoom.us/meeting/register/tZMucu6rrzssGN1fnumE_aBzoG3wEBkNaToR)

Is the meeting over?

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [October 9, 2021, 4:21pm UTC](https://community.thunkable.com/t/wdc-25-show-thunkable-4/1551564/7 "2021-10-09T16:21:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tony.ycy.program](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tony.ycy.program/32/100153_2.png) [@tony.ycy.program](https://community.thunkable.com/u/tony.ycy.program)\
**Post date:** [October 9, 2021, 4:22pm UTC](https://community.thunkable.com/t/wdc-25-show-thunkable-4/1551564/8 "2021-10-09T16:22:48Z")

</div>

@codeswept Forget the time😂

---

<div class="post-metadata">

**Author:** ![vishruth-ram](https://avatars.discourse-cdn.com/v4/letter/v/82dd89/32.png) [@vishruth-ram](https://community.thunkable.com/u/vishruth-ram)\
**Post date:** [October 11, 2021, 5:52am UTC](https://community.thunkable.com/t/wdc-25-show-thunkable-4/1551564/9 "2021-10-11T05:52:42Z")

</div>

@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](https://x.thunkable.com/projectPage/6163b612227bae0011935630)

---

<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:** [October 13, 2021, 8:31am UTC](https://community.thunkable.com/t/wdc-25-show-thunkable-4/1551564/10 "2021-10-13T08:31:49Z")

</div>

**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](https://x.thunkable.com/copy/c7d0173a74e6dba61e5defe8b522d2ac)

![packbubl1](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/6/268c814cd573473786ef66221803aa036ce7b35a.gif)

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](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](https://www.highcharts.com/demo)). some of these are not available in the popular api calls from [quickchart.io](http://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…

```auto
> 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)

```auto
> {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

 ![packbubl](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/5/65b3d2c2c1f55fab4c43a5d9905b2c29ecd359d2.jpeg)

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](http://highcharts.com). enjoy!

```auto

```

---

<div class="post-metadata">

**Author:** ![vishruth-ram](https://avatars.discourse-cdn.com/v4/letter/v/82dd89/32.png) [@vishruth-ram](https://community.thunkable.com/u/vishruth-ram)\
**Post date:** [October 13, 2021, 1:22pm UTC](https://community.thunkable.com/t/wdc-25-show-thunkable-4/1551564/11 "2021-10-13T13:22:46Z")

</div>

> [@manyone](#):
>
> [highcharts.com](http://highcharts.com)

everybody uses [quickchart.io](http://quickchart.io) to make charts.

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [October 13, 2021, 1:24pm UTC](https://community.thunkable.com/t/wdc-25-show-thunkable-4/1551564/12 "2021-10-13T13:24:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![vishruth-ram](https://avatars.discourse-cdn.com/v4/letter/v/82dd89/32.png) [@vishruth-ram](https://community.thunkable.com/u/vishruth-ram)\
**Post date:** [October 13, 2021, 1:25pm UTC](https://community.thunkable.com/t/wdc-25-show-thunkable-4/1551564/13 "2021-10-13T13:25:26Z")

</div>

I use [https://sandbox.neo4j.com/](https://sandbox.neo4j.com/) for graphs. while [quickchart.io](http://quickchart.io) for charts.

---

<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:** [October 13, 2021, 3:16pm UTC](https://community.thunkable.com/t/wdc-25-show-thunkable-4/1551564/14 "2021-10-13T15:16:22Z")

</div>

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

---

<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:** [October 13, 2021, 3:20pm UTC](https://community.thunkable.com/t/wdc-25-show-thunkable-4/1551564/15 "2021-10-13T15:20:22Z")

</div>

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

---

<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:** [October 22, 2021, 6:10pm UTC](https://community.thunkable.com/t/wdc-25-show-thunkable-4/1551564/16 "2021-10-22T18:10:45Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/4/44613e966345524364e75a4d8587c3aa3a0cacde.png)

(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](http://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](https://x.thunkable.com/copy/8aeaa47f34027376551e6e59d1e43031)

 ![tran3](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/f/9f0b52bbb107e33a3a01ca6942abed1f2b7b669e.jpeg)

the first chart uses the packed bubble chart (available only from [highchart.com](http://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](http://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](http://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.

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [October 22, 2021, 9:25pm UTC](https://community.thunkable.com/t/wdc-25-show-thunkable-4/1551564/17 "2021-10-22T21:25:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![vishruth-ram](https://avatars.discourse-cdn.com/v4/letter/v/82dd89/32.png) [@vishruth-ram](https://community.thunkable.com/u/vishruth-ram)\
**Post date:** [October 24, 2021, 3:28am UTC](https://community.thunkable.com/t/wdc-25-show-thunkable-4/1551564/18 "2021-10-24T03:28:39Z")

</div>

> [@muneer](#):
>
> I have noticed that the `Web Viewer` does not recognize any data from the app when used in an Android device.

The same issue while using [quickchart.io](http://quickchart.io). next time I open it’s coming

---

<div class="post-metadata">

**Author:** ![vishruth-ram](https://avatars.discourse-cdn.com/v4/letter/v/82dd89/32.png) [@vishruth-ram](https://community.thunkable.com/u/vishruth-ram)\
**Post date:** [October 29, 2021, 2:19am UTC](https://community.thunkable.com/t/wdc-25-show-thunkable-4/1551564/19 "2021-10-29T02:19:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [November 1, 2021, 8:26am UTC](https://community.thunkable.com/t/wdc-25-show-thunkable-4/1551564/20 "2021-11-01T08:26:33Z")

</div>

## 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. ☹

**Demo:**

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

[![](https://img.youtube.com/vi/ln5nGjWVVcI/maxresdefault.jpg "Lunch Plan demo") ](https://www.youtube.com/watch?v=ln5nGjWVVcI)

[Next page](https://community.thunkable.com/t/wdc-25-show-thunkable-4/1551564.md?page=2)