Forum Documentation Showcase Pricing Learn more

Summing a Calculation

I’m trying to create a calculation that takes the result of 2 divided numbers and sums them together. See image for my expression.

bubble

Independently, the two divided numbers return the correct result (1.7666 and 0.08 respectively), but when I put together the calc you see, bubble comes up with 0.1153 which, if you use the correct order of operations, is obviously wrong (should be 1.8466).

This feels like a bug to me, but maybe I’m missing something about how Bubble does math?

Thanks in advance for help!

This is a limitation of Bubble. It evaluates from left to right, instead of following standard order of operations.

One option is to use States to perform each of the divisions and store their individual values, then add the values from the two states and perform your “format as” on the addition.

Using the Math.js plugin may also help with calculations.

Thanks. I was afraid of this. Tried this in math.js, got same result actually, so not good there either.

Have you tried the Toolbox plugin’s Expression element? Might be able to solve it for you.

Hey @andrew.fox,

We put together the Instant Calculator plugin as a way to write out complete expressions in a literal manner and replace variables with dynamic data. Once on the page, the element’s Result state returns the number result and automatically recalculates if any dynamic values change. Since the plugin relies on Math.js client-side, you won’t have access to these calculation features in API Workflows. Give it a try! :slight_smile:

2 Likes

I’ll betcha dollars to donuts that the reason that failed is that you typed it wrong. You typed the math operations in “Bubble space” (by clicking “more…”). When you do that, of course you are doing those calcs Bubble-wise. You need to construct your expression (in math.js or Expression – as I am showing here) so that it comes out like this:

See the white parts? I TYPED those. I did not select them from the Bubble menus.

Get it?

Thanks @keith. I do get it, and tried it, but it turns the result into a literal string instead of the result of a calculation.

As @petter suggests, Expression element is great for this as it provides an automatically updating dynamic state. This is very similar to doing it “the vanilla Bubble way” where you might use two disabled inputs to hold your ratios. These will automatically update as their source inputs change – and without having to add “when an input’s value is changed” workflows as you would have to do if updating a custom state.

NOTE, whether you use math.js or Expression, those things may throw errors all over the place when your dynamic source values are null, right? So you need to set it up correctly (unless you don’t mind throwing console errors all over the place).

I set up a little sample project so you can see how you should do this. (Links at end, anyone can view editor). It demonstrates both using disabled inputs and using Expression.

See my earlier comment as well about what you likely did wrong with math.js. The same applies here.

Here’s how you would do this with Expression:


… and then over in the Conditions tab on Expression, we have our actual JavaScript expression:

And of course you can see the condition here avoids evaluating the expression when any of the source values are undefined and thus we avoid throwing errors.

Examine sample project for more:
Editor:
https://bubble.io/page?name=index&id=whats-the-ratio-kenneth&tab=tabs-1

Run mode:

Hit F12 to open console to prove errors aren’t being thrown.

Edit: Made editor visible. :wink:

1 Like

I don’t use the math.js plugin (and it may simply not be very well written). Expression is much more handy for this sort of thing. See my longer reply for deets.

Thanks all! I ended up using the InstantCalculator but was also found that employing @keith’s tip got the calcs to work correctly. Isn’t math hard enough as it is? :slight_smile:

Hello Keith,

Thanks for the example it is very useful.

I tried to implement your solution in my situation, but I have a problem with the Element value : the 22,2222… transform into a 222222222.

Capture d’écran 2020-02-26 à 12.33.48

Do you have an idea what could be the problem ?

Thanks a lot for your help.
Audric