Forum Academy Marketplace Showcase Pricing Features

How to create a custom array of numbers based off table data

Hey guys, I’m really hoping someone can help me here… I’m completely stuck and It’s upsetting!

Essentially, my app is a solar energy load calculator and what I want to achieve is something like this:

This is a breakdown of power usage in 3 hour chunks and it is a graph I made in minutes using basic javascript on my non-bubble version of this web app. However In bubble, it seems extremely difficult to perform basic operations on arrays/lists of numbers…

In my program (bubble) I have 4 different numbers representing power used at morning, mid day, afternoon and night… I’d love to be able to insert the information from these lists into one array (24 numbers long) by portioning the power usage into each hour chunk (averaged) so I can graph power usage over a 24 hour timeframe.

How can I firstly, create an array of size 24 (numbers) and then get the data from my bubble table (power data) and insert it into this array?

Once I have an array of 24 numbers, how can I then graph it with the X axis labels being 0:100, 0:200, 0:300… etc. (representing 24hr time).

Any help would be greatly appreciated.

Thanks so much everyone.

Hi @jason.tubman2 !

First, last try to create this main array…

Try to MERGE all arrays using the code “merged with”.

Array1 merged with Array2 merged with Array3 merged with Array4

Let me know if you got it, ok?

Hey @rpetribu !

Thanks heaps for your pointers,

The problem I have is:

Currently I have 4 numbers (morning, mid day, afternoon, night usage), not four arrays…

Let’s say I had a value of 10 in morning and morning was for the hours of 6-10, I’d like to increment by my 24 hour array to look like this.

[0,0,0,0,0,2.5,2.5,2.5,2.5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]

Again, if mid day was 10-2 and we had a value of 20 then…

[0,0,0,0,0,2.5,2.5,2.5,2.5,5,5,5,5,0,0,0,0,0,0,0,0,0,0,0]

Afternoon would be 2 to 6 and night 6pm to 6am

Doing this for each of the time slots will fill my whole 24 hours and I should be able to graph it.

Any ideas? Would I be best to start with 4 arrays and merge them like you said? (Convert my 4 numbers into 4 arrays)

Hummm I see…

For me, work with lists and arrays is easier with javascript, once it provides more flexibility and is also very fast. So…

  1. Instal the plugin “Toolbox”:

image

  1. In your workflow, place the code below anywhere you want using the block “Run javascript” and replace the values of morning, mid day, afternoon and night by yours. Note that you can pull this values dinamicaly.

var morning = 8; //Replace by yours
var mid_day = 20; //Replace by yours
var afternoon =16; //Replace by yours
var night = 120; //Replace by yours

var result = Array();

result.push (night/12) // 12 am
result.push (night/12) // 1 am
result.push (night/12) // 2 am
result.push (night/12) // 3 am
result.push (night/12) // 4 am
result.push (night/12) // 5 am
result.push (morning/4) // 6 am
result.push (morning/4) // 7 am
result.push (morning/4) // 8 am
result.push (morning/4) // 9 am
result.push (mid_day/4) // 10 am
result.push (mid_day/4) // 11 am
result.push (mid_day/4) // 12 pm
result.push (mid_day/4) // 1 pm
result.push (afternoon/4) // 2 pm
result.push (afternoon/4) // 3 pm
result.push (afternoon/4) // 4 pm
result.push (afternoon/4) // 5 pm
result.push (night/12) // 6 pm
result.push (night/12) // 7 pm
result.push (night/12) // 8 pm
result.push (night/12) // 9 pm
result.push (night/12) // 10 pm
result.push (night/12) // 11 pm

bubble_fn_my_numbers (result)
  1. Place the element “JavascripttoBubble” in you page to be able to catch the generated array

  1. That is it. You can now access the array using the “JavascripttoBubble A” element, as below:

Im my case I use it in a Text Element, but you can use it anywhere. The result was this:

image

Hope it helps :+1:

Wow this is amazing, thank you so much!!! I think you may have saved me so much headache and put and end to hours and hours of head scratching…

You mentioned you can pull values dynamically, can you show me how I could do this? Do I just use the standard “Insert dynamic data” button?

Furthermore, would this potentially mean that I could store an existing list of numbers as a javascript variable?

Glad to know! :joy:

Yes! Simple like this…

Also, yes!

You’re amazing, thank you so much! I’ll let you know how I go later today!

1 Like

Just wanted to say a huge thank you! You single handedly solved my seemingly unsolvable issue!

1 Like