I’ve put together a small javascript library that greatly simplifies creating dynamic javascript calculators. It works great for just about anything, ranging from calculating columns of values, to a complex custom formula. You can even write your own calculators and plug them into the framework with little effort. Calculations update automatically as the user types in their values.
Check out the details on the library, and download it here
Check out an example below, and the code that goes along with it
| Amount One: | ||
| Amount Two: | 7.29 | |
| Amount Three: | ||
| Total: |
var columnCalc1 = new slikcalc.ColumnCalc({
total: { id: 'cc-1-total' },
registerListeners: true,
calcOnLoad: true
});
columnCalc1.addRow({ id: 'cc-1-1' });
columnCalc1.addRow({ id: 'cc-1-2' });
columnCalc1.addRow({
id: 'cc-1-3',
checkbox: { id: 'cc-1-3-c' }
});
A few key features of Slikcalc:
- Slikcalc works with popular Javascript libraries, including YUI, jQuery, Dojo, Mootools and Prototype. Adding support for new libraries is very simple as well.
- Slikcalc handles attaching your event listeners for when the users type in values, click checkboxes, and when the page loads.
- Slikcalc provides a simple interface for chaining multiple calculators so one can fire another, and so on.
14 Comments
This is great — thanks for building such a library. I’d like to document my steps to incorporate a simple ROI calculator. However, I’m stumped. I have this base calculation:
formula: ‘( {a} * {b} * {c} * 0.2 ) * ( {d} – {e} ) * 0.67 = {f}’,
but I’d like to have 2 more calculations, where we take the final value of ‘f’ above and then do:
total = f * 7 and
total = f * 365
This appears to be chaining, but I couldn’t figure it out from the doc at the web site. Thanks again!
Glad it’s useful to you. That is definitely chaining, and it sounds like you’ll want to have 2 additional calcs for each of the additional formulas. They would each be their own formula calc objects, something like:
var weeklyCalc = slikcalc.create('formula', {
formula: '( {a} * 7 ) = {b}',
vars: {
a: { id: 'f-id' },
b: { id: 'weekly-total-id' }
}
});
var yearlyCalc = slikcalc.create('formula', {
formula: '( {a} * 365 ) = {b}',
vars: {
a: { id: 'f-id' },
b: { id: 'yearly-total-id' }
}
});
You should now have 3 calculator objects, your original ROI calc, then the weekly and yearly calcs show above. Next you just need to set up the chaining for the calcs. It would look like this:
roaCalc.triggers(weeklyCalc);
roaCalc.triggers(yearlyCalc);
This will cause it so roaCalc will do its thing, then when its done, it will fire weeklyCalc and yearlyCalc. If for some reason yearlyCalc required weeklyCalc to fire first before it could fire, then you would do the following:
roaCalc.triggers(weeklyCalc).triggers(yearlyCalc);
Hope that helps, I’d love to see it implemented when you’re done if its public.
This is great — it is nearly complete.
I have an interesting wrinkle — what if I want currency cell formatting without breaking the calculation, i.e., where some values are (entered and displayed as) $1.00.
Currently the library handles ‘$’ values typed into input, but it does not output them back into cells. That would be a nice feature, and shouldn’t be too hard. If you wouldn’t mind filing a feature request so we can track it: http://code.google.com/p/slikcalc/issues/list
would like to use a calculator for my website to calculate portions (for a candle recipe) I have no JavaScript experience and my algebra is a bit rusty. what I’m wondering is which tool might i use to adequately run a calculation with preset values and create multiple outputs. would i need multiple calculators?
EG.
candle recipe calculator
(input candle size [ in ounces]) (input scent strength [with 3 preset options for variable]) (output amount of wax) (output amount of scented oil) (output amount of dye)
From just reading your description, it sounds like you’ll have a textbox input for the candle size, and then a select box for the scent strength. Based off of these 2 inputs, it looks like you calculate 3 outputs. This could easily be done with 3 formula calculators, where you plugin the two inputs, and put in the appropriate formula to calculate the desired output, typing that to the proper field to display it. Sorry for the generic answer, hopefully that helps out some.
Can this be used in a PDF with form fields? How would I set it up the Custom Calculation Script of the Calculate tab in the Text Field Properties?
I am attempting to get an order form set up as a PDF with form fields to calculate a formula in each item row:
Price = (Quantity – 2) * .25
The Quantity is set up as a separate text field for each item.
Your script is really nice. I have implemented it in an application and it works beautifully with one exception. I have a order entry form where a user selects a product and then the calculations are performed. When they want to add an additional product they click on an add row button. They add a new product and everything calculates perfectly. However, if they delete a row the calculations do not update. It’s like they are held in the cache and not updated. Specifically, I am using the FormulaCalcRows options to calculate rows and sum a total. How can I get the script to recalculate when a row is deleted? Any help would be appreciated.
If you have a reference to the calculator object, you can call object.processCalculation() on it inside of your event handler for deleting a product.
Brad,
Thanks so much! It’s working well. One last question, can the script work with a onBlur event instead of the default keyUp event? I’ve tried changing it with no success. Thanks again for creating this valuable script.
As is it can’t, but it’s a one liner change. Next time I’m working on it I’ll see if I can add that in as a configuration parameter. If you change line 57 of ColumnCalc.js to:
slikcalc.addListener(rowConfig.id, 'blur', this.processCalculation, this);That should work. You would need the same change made to line 95 of FormulaCalc.js.
It is possible to have 2 FormularCalc’s on 1 page, i have a 6 rows each with a hour * amount to create a subtotal for labout, and the i have 12 lines with QTY and amount to create a subtotal for Parts, then i also wanna calculate Labout and Parts to create a total amount due.. all works good with the labour, actually works like a dream with the checkboxes and everything, as i also wanted to have items on the invoice that were not billable but show the amount, so the script works great, just want 2 more calculations
All good i managed to fix everything and it all works, thx great scripts
Excellent work! Just 1 question – I’m trying to make a converter that will allow the user to enter a value into text box 1 and it puts the answer into text box 2 OR if they put a value into text box 2 it will put the answer into text box 1 – I can do one or the other, but if I put in the calculations for both, it seems to try to apply the formula both ways – Celsius to Fahrenheit conversions for instance.
Thank you for the time you’ve put into the great project!
One Trackback
Fatigue and ritalin….
Why is ritalin prescribed for adults. Ritalin….