Use Javascript syntax: x * x (for x²), Math.sin(x), Math.sqrt(x), etc.
How to Use the Online Graphing Calculator
This Online Graphing Calculator is a powerful tool designed to help students, educators, and engineers visualize mathematical functions instantly. Unlike standard calculators, a graphing tool provides a visual representation of how variables interact, making complex concepts like limits, derivatives, and periodicity much easier to understand.
Input Syntax Guide
To plot a graph, you must enter the function using JavaScript-compatible mathematical notation. Here are common examples:
Power functions: Use x * x for x² or Math.pow(x, 3) for x³.
Trigonometry: Use Math.sin(x), Math.cos(x), or Math.tan(x).
Square Root: Use Math.sqrt(x).
Absolute Value: Use Math.abs(x).
Natural Log: Use Math.log(x).
Adjusting the Viewport
You can control the horizontal and vertical scale by adjusting the X and Y minimum and maximum values. This is crucial when dealing with functions that have very large outputs (like exponential growth) or very small oscillations.
Common Use Cases
1. Algebra: Visualizing linear equations (y = mx + b) and quadratic parabolas to find intercepts.
2. Calculus: Understanding the behavior of functions as they approach infinity or specific points.
3. Physics: Plotting wave patterns or trajectory motions by entering time-based equations.
function drawGraph() {
var canvas = document.getElementById('graphCanvas');
var ctx = canvas.getContext('2d');
var errorDiv = document.getElementById('graph-error');
var xMin = parseFloat(document.getElementById('xMin').value);
var xMax = parseFloat(document.getElementById('xMax').value);
var yMin = parseFloat(document.getElementById('yMin').value);
var yMax = parseFloat(document.getElementById('yMax').value);
var expr = document.getElementById('functionInput').value;
errorDiv.style.display = 'none';
if (isNaN(xMin) || isNaN(xMax) || isNaN(yMin) || isNaN(yMax)) {
errorDiv.innerText = "Please enter valid range numbers.";
errorDiv.style.display = 'block';
return;
}
if (xMin >= xMax || yMin >= yMax) {
errorDiv.innerText = "Minimum values must be less than maximum values.";
errorDiv.style.display = 'block';
return;
}
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Transformation helpers
var getCanvasX = function(x) {
return (x – xMin) / (xMax – xMin) * canvas.width;
};
var getCanvasY = function(y) {
return canvas.height – (y – yMin) / (yMax – yMin) * canvas.height;
};
// Draw Grid
ctx.strokeStyle = '#e0e0e0';
ctx.lineWidth = 1;
// Vertical grid lines
for (var i = Math.ceil(xMin); i <= Math.floor(xMax); i++) {
ctx.beginPath();
ctx.moveTo(getCanvasX(i), 0);
ctx.lineTo(getCanvasX(i), canvas.height);
ctx.stroke();
}
// Horizontal grid lines
for (var j = Math.ceil(yMin); j <= Math.floor(yMax); j++) {
ctx.beginPath();
ctx.moveTo(0, getCanvasY(j));
ctx.lineTo(canvas.width, getCanvasY(j));
ctx.stroke();
}
// Draw Axes
ctx.strokeStyle = '#333';
ctx.lineWidth = 2;
// X-axis
if (yMin = 0) {
ctx.beginPath();
ctx.moveTo(0, getCanvasY(0));
ctx.lineTo(canvas.width, getCanvasY(0));
ctx.stroke();
}
// Y-axis
if (xMin = 0) {
ctx.beginPath();
ctx.moveTo(getCanvasX(0), 0);
ctx.lineTo(getCanvasX(0), canvas.height);
ctx.stroke();
}
// Draw the function
ctx.strokeStyle = '#e67e22';
ctx.lineWidth = 3;
ctx.beginPath();
var firstPoint = true;
var step = (xMax – xMin) / canvas.width;
try {
// Pre-process common syntax for ease
var processedExpr = expr.replace(/\^/g, '**');
for (var x = xMin; x <= xMax; x += step) {
var y;
try {
// Using a Function constructor for safer execution than eval
var func = new Function('x', 'return ' + processedExpr);
y = func(x);
} catch (e) {
throw new Error("Invalid Function Syntax");
}
if (isNaN(y) || !isFinite(y)) {
firstPoint = true;
continue;
}
var cx = getCanvasX(x);
var cy = getCanvasY(y);
if (firstPoint) {
ctx.moveTo(cx, cy);
firstPoint = false;
} else {
ctx.lineTo(cx, cy);
}
}
ctx.stroke();
} catch (err) {
errorDiv.innerText = "Error: " + err.message;
errorDiv.style.display = 'block';
}
}
// Run once on load
window.onload = function() {
drawGraph();
};