Perform calculation on user entered number

We use hype for lots of presentations and animations. Where would I start to perform a calculation on a user-entered number (say, their income) and present them with a calculation (say, how much tax they would pay).

Is this possible?

You could use a input form on the innerHTML of a box (check the innerHTML of the top box in the sample), then use javascript to do the calculation from a button. Here's a basic sample...

taxed.hype.zip (11.4 KB)

4 Likes

Thanks gasspence, your posts helps me on learning Javascript!

Will it be possible to make shapes like ellipses or rectangles to change dimension based on the calculation? I’ve seen some jQuery effect that does, but Hype may be able to make a bouncing growing shape stops on time line based on the calculation. That will be more interesting than an animation chart.

Something like this...
taxed1.hype.zip (12.7 KB)

1 Like

Thanks very much for this. Will have a play around.

Has anyone else captured user variables for later use?

Hay gasspence,

Wanna say thank you for your knowledge sharing, I just make another version based on symbol. maybe you know a better way to do it. (maybe use javascript to control start or end keyframe? )

chart animation.hype.zip (17.8 KB)

1 Like

I really like what you have for this chart – good job Shong.

that’s really nice! thanks.

Hello gasspence. Thanks for helping us non programmers to go farther with hype. I have this calculation to perform with two inputed numbers:

(variable x - variable y / 60) * 600)

I tried to do it this way but it didn’t work

var UserAmount = document.getElementById('textbox_id').value; // from the innerHTML
var UserAmount2 = document.getElementById('textbox_id').value; // from the innerHTML

var y = ((UserAmount - UserAmount2 / 60) * 600); // calcul de la valeur chaulante

hypeDocument.getElementById('taxed').innerHTML = (y).toFixed(2); // two decial places

try something like this...

var UserAmount = document.getElementById('textbox_id').value; // from the innerHTML

var UserAmount2 = document.getElementById('textbox_id2').value; // from the innerHTML "note the 2"

var x = (+UserAmount) - (+UserAmount2); 

var z = (x /60) * 600

var y = (x * 1.0725); // 7.25% tax amount on user entry

hypeDocument.getElementById('taxed').innerHTML = (y).toFixed(2); // two decial places

Hello, trying to refactor this project a bit.
So far so good I do need some help with making the column bars grow from the bottom up
rather than top down any help would be appreciated.
Blakevariance-column.hype.zip (31.2 KB)

Elements are positioned from their top-left position, so if you want to move it up, you will also need to adjust the top position.

Instead of using CSS directly, I would recommend using the setElementProperty() API. This will ensure it uses the correct property (either CSS top or a transform:translateY()) and that the Hype runtime knows about the positioning. Simple example usage:

var newValue = 10;
var box1Element = hypeDocument.getElementById('box1');
hypeDocument.setElementProperty(box1Element, 'top', newValue);

I would also recommend using setElementProperty() for the "width" value. There's a corresponding getElementProperty() which you'll also need to determine the initial bottom position from which to grow.

Documentation for these is in the "Document" section of the documentation below Hype's code editor.

Thanks so much Jonathan, will get this in the mix as soon as I can get some air.
I hope all is well and you are staying in a s good spirits as we can these days.

1 Like