Yes, Calx will calculate the value based on given formula, just like Excel does. Calx able to parse from simple to complex formula, because it is uses javascript parser generated using jison grammar file in it’s core, a port of bison for javascript.

Thanks to Zach Carter for creating jison parser generator https://github.com/zaach/jison.

Defining the formula

Calx require formula to be defined to do the calculation, You can define the formula inside the data-formula attribute.

<span id="C3" data-formula="$A3+$B3"></span>

the code above will tell Calx to add value of the element with id=A3 with the value of the element with id=B3 and display the result inside the element with id=C3, that’s it, simple, right?

All input type=”text” with data-formula attribute present will be marked as read-only by the Calx until you pass ‘readonly’ config key as false.

$('#form_element').calx({
    readonly : false
});

But I thought Calx can do more than just add two values, then what else can be done with Calx?

Copy another cell value

You can copy other cell’s value by referring it’s id inside the formula

<input type="text" id="A2" data-formula="$A1" />

Standard arithmetic calculation

Calx can parse standard arithmetic calculation such as addition, subtraction, multiply, and divide. You may also put them into parentheses to modify it’s precedence:

<input type="text" id="F4" data-formula="($A1*($B1+$C1))/$D1" />

<input type="text" id="F5" data-formula="2*$F4" />

<input type="text" id="F6" data-formula="$F5/2" />

Power and square root

Calx use ^ and SQRT() to define power and square root calculation:

<input id="B4" type="text" data-formula="$B3^2" />

<!-- or -->

<input id="B5" type="text" data-formula="SQRT($B4)" />

Modulus

Modulus operator can can be called by simply write MOD in the formula:

<input id="F3" type="text" data-formula="$F1 MOD $F2" />

Math constant

The only constant defined in current Calx version are Phi and e, you can get phi and e value by write PI and E in the formula

<input type="text" id="circle_area" data-formula="PI*($radius^2)" />

<!-- or -->

<input type="text" id="E" data-formula="E" />

Maximum, minimum, average, and sum

This functionality can be accessed by simply writing MAX, MIN, AVG, and SUM inside the formula, it only work if your element’s id mimic the Excel cell index (A1,B1 and so on)

<input type="text" id="G11" data-formula="MAX($G1,$G10)" />

<!-- or -->

<input type="text" id="G12" data-formula="MIN($G1,$G10)" />

<!-- or -->

<input type="text" id="G13" data-formula="SUM($G1,$G10)" />

<!-- or -->

<input type="text" id="G14" data-formula="AVG($G1,$G10)" />

Conditional and comparative operator

Calx support IF() conditional function with comparative operator to compare element’s value, supported comparative operator are ‘<‘, ‘>’, ‘>=’, ‘<=’ and ‘<>’

IF operator can be used by write IF([condition],[true],[false]) in the formula:

<input type="text" id="D5" data-formula="IF($D1 > $D2, $D3, $D4" />

Logical operator

Currently, Calx only support 2 logical operator, AND and OR. It used within the IF statement to combine two or more comparative operator

<input type="text" id="D5" data-formula="IF($D1 > $D2 AND $D3 > $D4, $D3, $D4" />

Other mathematical function

Other mathematical function currently supported by Calx are:

  • ABS : to get an absolute value of a number
  • ROUND : to get rounded value of a number
  • CEIL : to get rounded up value of a number
  • FLOOR : to get rounded up value of a number

Simply write FUNCTION_NAME($CELL_ID) inside the data-formula attribute.

Other planned function

More mathematical, financial and statistical function will be added in near future, or you can implement it by yourself, it’s easy 😉