XCalc.js

Mathematical Expression Calculator by Dave Pagurek. Live demo available at http://www.davepagurek.com/math/.

Files

The XCalc release contains XCalc.js and XCalc.min.js. The minified script is smaller and fully functional for use. The uncompressed file is commented and to be used for editing and extending.

Usage

Add one of the following to your head tag to start using XCalc: ```HTML <script src="XCalc.min.js"></script> ``` or ```HTML <script src="XCalc.js"></script> ```

Expressions

Create an XCalc expression like this: ```javascript var expression = XCalc.createExpression("(10^2/(2*50))-2(30x)"); ```

To get the result of an expression:

var x=2;
var result = expression.result(x);

If an x value is not specified, x defaults to zero.

Expressions can be derived as well:

var x=2;
var rateOfChange = expression.derive().result(x);

To get the formula of an expression as a string with HTML that can be formatted nicely (see the example CSS file):

var formulaDiv = document.createElement("div");
formulaDiv.innerHTML = expression.prettyFormula();
document.getElementById("resultDiv").appendChild(formulaDiv);

To get the formula of an expression as a plaintext string:

var formula = document.createElement("p");
formula.innerHTML = expression.formula();
document.getElementById("resultDiv").appendChild(formula);

To simplify the formula before getting it:

var formula = document.createElement("p");
formula.innerHTML = expression.simplify().formula();
document.getElementById("resultDiv").appendChild(formula);

Graphs

XCalc graphs are created like this:

var graph = XCalc.graphExpression("x^2");

To add the graph canvas to the page:

document.getElementById("result").appendChild(graph.getCanvas());

Graph functions

Constructor

A new graph is created using the following syntax: ```javascript var graph = XCalc.graphExpression(expression, width, height, x1, x2, y1, y2); ```

expression:String The expression to be graphed. Required.

width:Number The width of the canvas. Default is 400.

height:Number The height of the canvas. Default is 400.

x1:Number and x2:Number The horizontal range of the graph, where x1 < x < x2. Defaults to -10 and 10.

y1:Number and y2:Number The vertical range of the graph, where y1 < y < y2. Leave both empty or set to the string "auto" for auto range. Defaults to auto range.

Range

Set the range of the graph with: ```javascript graph.setRange(x1, x2, y1, y2); ``` `x1:Number` and `x2:Number` The horizontal range of the graph, where x1 < x < x2. Defaults to -10 and 10.

y1:Number and y2:Number The vertical range of the graph, where y1 < y < y2. Leave both empty or set to the string "auto" for auto range. Defaults to auto range.

You can get the range of the graph with graph.getX1() or graph.getY2(), which allows you to increment the range of the graph by doing something like this:

graph.setRange(graph.getX1()+5, graph.getX2()-5, graph.getY1()+5, graph.getY2()-5); //zooms in 5px on every side

Error checking

To check if XCalc ran into any errors (such as improperly nested brackets), use the following function: ```javascript if (!XCalc.hasErrors()) { //Carry on as normal } else { document.getElementById("errors").appendChild(XCalc.displayErrors()); XCalc.clearErrors(); } ```

The XCalc.displayErrors() function returns a div with the class "error" with a <ul> of the errors.

Make sure to run XCalc.clearErrors() to reset XCalc.hasErrors(). Otherwise, errors from previous graphs will remain in the list.

Features

Graph Features

• Dynamic scale
• Auto-range (for y axis)
• Displays coordinates on hover
• Click and drag graph to pan
• Scroll on the graph to zoom in and out

Operations Supported

As of version 1.9.3.8:

• Addition (x+y)
• Subtraction (x-y)
• Multiplication (x*y or (x)(y))
• Division (x/y)
• Exponents (x^y or x^(1/y) for roots)
• The following functions:
  • sin
  • cos
  • tan
  • asin
  • acos
  • atan
  • abs
  • log
  • ln
  • sqrt
• The following constants:
  • e
  • pi
• Single variable evaluation (include "x" in the expression string)

Algebra and Calculus

• Create the derivative of an expression
• Simplify an expression