Online Ti-89 Graphing Calculator

Online Function Grapher (TI-89 Style)

This tool provides a simplified online graphing calculator experience, mimicking the basic function plotting capabilities of a TI-89. Enter a mathematical function, define your X-axis range, and visualize its graph instantly.

Function (y=):

Use 'x' as the variable. For mathematical functions, use 'Math.sin(x)', 'Math.cos(x)', 'Math.pow(x, 2)', 'Math.sqrt(x)', etc.

X-min: X-max: Number of Points:

Graph Output

Understanding the TI-89 Graphing Calculator

The TI-89 Titanium, a powerful graphing calculator from Texas Instruments, has long been a staple for students and professionals in advanced mathematics, engineering, and science. Unlike basic scientific calculators, the TI-89 offers symbolic manipulation, allowing users to solve equations, perform calculus (derivatives, integrals, limits), and work with matrices and vectors symbolically, not just numerically.

Key Features of a TI-89:

Graphing Capabilities: One of its most celebrated features is its ability to graph various types of functions, including parametric, polar, and 3D functions. Users can analyze graphs, find intersections, roots, and extrema.
Symbolic Math: It can perform algebraic operations, solve equations, and simplify expressions symbolically.
Calculus: Compute derivatives, integrals, and limits.
Programming: Users can write and execute programs to automate complex tasks.
Data Analysis: Statistical functions and data plotting.

How This Online Grapher Works

While a full TI-89 emulation is beyond the scope of a simple web tool, this online function grapher aims to replicate its core graphing functionality. You can input a mathematical expression, define the range for the x-axis, and the tool will plot the corresponding y-values, giving you a visual representation of the function.

Inputting Your Function:

Use 'x' as your independent variable.
For standard mathematical operations, use `+`, `-`, `*`, `/`. For exponentiation, use `**` (e.g., `x**2` for x squared) or `Math.pow(x, y)`.
For trigonometric, logarithmic, and other advanced functions, you must prefix them with `Math.`, e.g., `Math.sin(x)`, `Math.cos(x)`, `Math.tan(x)`, `Math.log(x)` (natural log), `Math.log10(x)`, `Math.sqrt(x)`, `Math.abs(x)`.
Constants like Pi should be `Math.PI`.

Example Functions:

Parabola: `x*x` (or `Math.pow(x, 2)`)
Sine Wave: `Math.sin(x)`
Linear Function: `2*x + 5`
Exponential Decay: `Math.exp(-x/2)`
Absolute Value: `Math.abs(x)`
Logarithmic: `Math.log(x)` (Note: domain is x > 0)

This tool is perfect for quickly visualizing how different mathematical functions behave over a specified interval, offering a glimpse into the power of graphing calculators like the TI-89.

.calculator-container { font-family: Arial, sans-serif; max-width: 800px; margin: 20px auto; padding: 20px; border: 1px solid #eee; box-shadow: 0 0 10px rgba(0,0,0,0.1); background-color: #fff; } .calculator-inputs label { display: block; margin-bottom: 5px; font-weight: bold; } .calculator-inputs input[type="text"], .calculator-inputs input[type="number"] { width: calc(100% – 22px); padding: 10px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 4px; } .input-hint { font-size: 0.85em; color: #666; margin-top: -10px; margin-bottom: 15px; } button { background-color: #007bff; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; margin-top: 10px; } button:hover { background-color: #0056b3; } .calculator-results { margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; } .calculator-results h3 { margin-top: 0; } #graphOutput { background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 4px; } .calculator-article h3 { margin-top: 30px; border-bottom: 1px solid #eee; padding-bottom: 10px; } .calculator-article ul { list-style-type: disc; margin-left: 20px; } .calculator-article li { margin-bottom: 5px; } function calculateGraph() { var functionStr = document.getElementById("functionInput").value; var xMin = parseFloat(document.getElementById("xMin").value); var xMax = parseFloat(document.getElementById("xMax").value); var numPoints = parseInt(document.getElementById("numPoints").value); var errorMessages = document.getElementById("errorMessages"); errorMessages.innerHTML = ""; // Clear previous errors // Input validation if (!functionStr) { errorMessages.innerHTML = "Please enter a function."; return; } if (isNaN(xMin) || isNaN(xMax) || xMin >= xMax) { errorMessages.innerHTML = "Please enter valid X-min and X-max values (X-min must be less than X-max)."; return; } if (isNaN(numPoints) || numPoints 1000) { errorMessages.innerHTML = "Please enter a valid number of points (10-1000)."; return; } var points = []; var yValues = []; var step = (xMax – xMin) / (numPoints – 1); // Generate points for (var i = 0; i < numPoints; i++) { var x = xMin + i * step; var y; try { // Replace 'x' with the current value for evaluation // This is a simplified approach. A robust parser would be better but out of scope for this constraint. // Using 'var x = …' inside the eval context is crucial. // Also, replace '^' with '**' for exponentiation in JS eval var processedFunctionStr = functionStr.replace(/\^/g, '**'); var evalFunction = "var x = " + x + "; " + processedFunctionStr; y = eval(evalFunction); if (isNaN(y) || !isFinite(y)) { // Handle cases like division by zero, log of negative, etc. // We'll just skip these points for graphing. continue; } points.push({ x: x, y: y }); yValues.push(y); } catch (e) { errorMessages.innerHTML = "Error evaluating function: " + e.message + ". Please check your syntax."; return; } } if (points.length === 0) { errorMessages.innerHTML = "No valid points could be generated for the given function and range. Check for domain issues (e.g., log of negative numbers, division by zero)."; return; } // Determine Y-axis range for scaling var yMin = Math.min.apply(null, yValues); var yMax = Math.max.apply(null, yValues); // Add some padding to Y-axis var yRange = yMax – yMin; if (yRange === 0) { // Handle constant functions yMin -= 1; yMax += 1; yRange = 2; } else { yMin -= yRange * 0.1; yMax += yRange * 0.1; yRange = yMax – yMin; } var graphOutput = document.getElementById("graphOutput"); var svgWidth = graphOutput.offsetWidth; var svgHeight = graphOutput.offsetHeight; // Create SVG element var svg = ''; // Draw X and Y axes // Map (x,y) to SVG coordinates (svgX, svgY) // SVG origin is top-left, y increases downwards. // Our graph origin is typically center or bottom-left, y increases upwards. // Scale factors: var scaleX = svgWidth / (xMax – xMin); var scaleY = svgHeight / (yMax – yMin); // Function to convert graph coordinates to SVG coordinates function toSvgX(graphX) { return (graphX – xMin) * scaleX; } function toSvgY(graphY) { return svgHeight – ((graphY – yMin) * scaleY); // Invert Y-axis } // Draw grid lines (simplified) var numTicks = 5; var xTickStep = (xMax – xMin) / numTicks; var yTickStep = (yMax – yMin) / numTicks; // Draw horizontal grid lines and Y-axis labels for (var i = 0; i <= numTicks; i++) { var tickYVal = yMin + i * yTickStep; var svgTickY = toSvgY(tickYVal); svg += ''; // Y-axis labels svg += " + tickYVal.toFixed(1) + "; } // Draw vertical grid lines and X-axis labels for (var i = 0; i <= numTicks; i++) { var tickXVal = xMin + i * xTickStep; var svgTickX = toSvgX(tickXVal); svg += ''; // X-axis labels svg += " + tickXVal.toFixed(1) + "; } // Draw X-axis (where y=0) var xAxisY = toSvgY(0); if (xAxisY >= 0 && xAxisY <= svgHeight) { svg += ''; } // Draw Y-axis (where x=0) var yAxisX = toSvgX(0); if (yAxisX >= 0 && yAxisX <= svgWidth) { svg += ''; } // Generate polyline points string var polylinePoints = points.map(function(p) { return toSvgX(p.x) + ',' + toSvgY(p.y); }).join(' '); // Draw the function line svg += "; svg += "; graphOutput.innerHTML = svg; }