Visualize mathematical equations instantly on a coordinate plane.
Invalid expression. Please use basic math or JavaScript Math functions.
How to Use the Graphing Functions Calculator
This interactive tool allows you to visualize any algebraic or trigonometric function. To graph a function, enter the expression using 'x' as your variable. Use standard programming operators: * for multiplication, / for division, + for addition, and - for subtraction.
Supported Syntax and Examples
Quadratic:x * x or Math.pow(x, 2)
Linear:2 * x + 5
Trigonometric:Math.sin(x) or Math.cos(x) * 3
Absolute Value:Math.abs(x)
Square Root:Math.sqrt(x)
Understanding the Coordinate Plane
A graph is a visual representation of the relationship between an independent variable (x) and a dependent variable (y). For every input 'x' you provide within the range defined by X Min and X Max, the calculator computes f(x) and plots the corresponding point (x, y). By connecting these points, the shape of the function is revealed.
Practical Applications of Graphing
Graphing functions is essential in various fields:
Physics: Plotting displacement over time or projectile motion.
Economics: Visualizing supply and demand curves.
Engineering: Analyzing signal wave patterns and structural stresses.
Data Science: Understanding trends and regressions in data sets.
Frequently Asked Questions
Why is my graph not appearing?
Ensure you are using valid JavaScript syntax. For example, instead of 2x, you must type 2 * x. Also, ensure your X Min is smaller than your X Max.
Can I graph multiple functions?
Currently, this tool supports one primary function at a time to ensure high performance and clear visualization on mobile devices.
function drawGraph() {
var canvas = document.getElementById('graphCanvas');
var ctx = canvas.getContext('2d');
var funcStr = document.getElementById('functionInput').value;
var xMin = parseFloat(document.getElementById('xMin').value);
var xMax = parseFloat(document.getElementById('xMax').value);
var errorDiv = document.getElementById('errorMessage');
if (isNaN(xMin) || isNaN(xMax) || xMin >= xMax) {
errorDiv.style.display = 'block';
errorDiv.innerText = "Please enter valid X range values.";
return;
}
errorDiv.style.display = 'none';
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
var width = canvas.width;
var height = canvas.height;
// Find Y range automatically to fit the graph
var points = [];
var yMin = Infinity;
var yMax = -Infinity;
try {
for (var i = 0; i <= width; i++) {
var xVal = xMin + (i / width) * (xMax – xMin);
var yVal;
// Safe evaluation
var scope = { x: xVal };
yVal = eval(funcStr.replace(/x/g, "(" + xVal + ")"));
if (!isNaN(yVal) && isFinite(yVal)) {
points.push({ x: i, yValue: yVal });
if (yVal yMax) yMax = yVal;
} else {
points.push({ x: i, yValue: null });
}
}
} catch (e) {
errorDiv.style.display = 'block';
errorDiv.innerText = "Error in function syntax. Use 'x' and Math functions correctly.";
return;
}
// Add padding to Y range
var yRange = yMax – yMin;
if (yRange === 0) { yMin -= 1; yMax += 1; yRange = 2; }
yMin -= yRange * 0.1;
yMax += yRange * 0.1;
yRange = yMax – yMin;
// Draw Grid and Axes
ctx.strokeStyle = '#e0e0e0';
ctx.lineWidth = 1;
// X Axis position
var xAxisY = height – ((0 – yMin) / yRange) * height;
if (xAxisY >= 0 && xAxisY = 0 && yAxisX <= width) {
ctx.beginPath();
ctx.moveTo(yAxisX, 0);
ctx.lineTo(yAxisX, height);
ctx.strokeStyle = '#333';
ctx.stroke();
}
// Plot Function
ctx.beginPath();
ctx.strokeStyle = '#1a73e8';
ctx.lineWidth = 3;
var started = false;
for (var j = 0; j < points.length; j++) {
if (points[j].yValue !== null) {
var canvasY = height – ((points[j].yValue – yMin) / yRange) * height;
if (!started) {
ctx.moveTo(points[j].x, canvasY);
started = true;
} else {
ctx.lineTo(points[j].x, canvasY);
}
} else {
started = false;
}
}
ctx.stroke();
// Labels
ctx.fillStyle = '#5f6368';
ctx.font = '24px Arial';
ctx.fillText('x Min: ' + xMin.toFixed(1), 10, xAxisY – 10);
ctx.fillText('x Max: ' + xMax.toFixed(1), width – 150, xAxisY – 10);
ctx.fillText('y Max: ' + yMax.toFixed(1), yAxisX + 10, 30);
ctx.fillText('y Min: ' + yMin.toFixed(1), yAxisX + 10, height – 10);
}
// Initial draw
window.onload = function() {
drawGraph();
};