This online graphing display calculator allows you to visualize mathematical relationships between variables. Whether you are studying algebra, trigonometry, or calculus, seeing a function plotted on a Cartesian plane helps in understanding its roots, intercepts, and behavior.
How to Input Functions
To use this calculator, you must use standard JavaScript math syntax. Here are common examples:
Linear:2*x + 3
Quadratic (Parabola):x*x or Math.pow(x, 2)
Trigonometric:Math.sin(x) or Math.cos(x)
Absolute Value:Math.abs(x)
Square Root:Math.sqrt(x)
Exponential:Math.exp(x)
Practical Examples for Practice
Function Type
Input String
What to Look For
Sine Wave
Math.sin(x)
Periodicity and amplitude between -1 and 1.
Standard Parabola
x*x - 4
X-intercepts at 2 and -2.
Natural Log
Math.log(x)
Vertical asymptote at x=0.
Frequently Asked Questions
Why is my graph blank? Check if your Y-range is appropriate for the function. For example, if you plot x*x + 100 with a Y-max of 10, the curve will be off-screen.
Can I use 'y =' in the input? No, simply enter the expression involving 'x'. The calculator assumes y equals the expression provided.
function plotGraph() {
var canvas = document.getElementById('graphCanvas');
var ctx = canvas.getContext('2d');
var equation = document.getElementById('equationInput').value;
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 errorDiv = document.getElementById('errorMessage');
errorDiv.innerHTML = "";
if (isNaN(xMin) || isNaN(xMax) || isNaN(yMin) || isNaN(yMax)) {
errorDiv.innerHTML = "Please enter valid numerical ranges.";
return;
}
if (xMin >= xMax || yMin >= yMax) {
errorDiv.innerHTML = "Minimum values must be less than maximum values.";
return;
}
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Coordinate mapping functions
function toCanvasX(x) {
return (x – xMin) / (xMax – xMin) * canvas.width;
}
function toCanvasY(y) {
return canvas.height – ((y – yMin) / (yMax – yMin) * canvas.height);
}
// Draw grid
ctx.strokeStyle = "#e0e0e0";
ctx.lineWidth = 1;
// Vertical grid lines
for (var gx = xMin; gx <= xMax; gx += (xMax – xMin) / 10) {
ctx.beginPath();
ctx.moveTo(toCanvasX(gx), 0);
ctx.lineTo(toCanvasX(gx), canvas.height);
ctx.stroke();
}
// Horizontal grid lines
for (var gy = yMin; gy <= yMax; gy += (yMax – yMin) / 10) {
ctx.beginPath();
ctx.moveTo(0, toCanvasY(gy));
ctx.lineTo(canvas.width, toCanvasY(gy));
ctx.stroke();
}
// Draw Axes
ctx.strokeStyle = "#333";
ctx.lineWidth = 2;
// X-Axis
if (yMin = 0) {
ctx.beginPath();
ctx.moveTo(0, toCanvasY(0));
ctx.lineTo(canvas.width, toCanvasY(0));
ctx.stroke();
}
// Y-Axis
if (xMin = 0) {
ctx.beginPath();
ctx.moveTo(toCanvasX(0), 0);
ctx.lineTo(toCanvasX(0), canvas.height);
ctx.stroke();
}
// Plot function
ctx.strokeStyle = "#2980b9";
ctx.lineWidth = 3;
ctx.beginPath();
var firstPoint = true;
var steps = 1000; // Resolution
var stepSize = (xMax – xMin) / steps;
try {
for (var i = 0; i <= steps; i++) {
var x = xMin + (i * stepSize);
var y;
// Safety evaluation
// Replace common notation like ^ with ** if user typed it
var evalSafe = equation.replace(/\^/g, "**");
// Use Function constructor for faster and slightly safer evaluation
var result = new Function('x', 'return ' + evalSafe)(x);
y = parseFloat(result);
if (!isNaN(y) && isFinite(y)) {
var cx = toCanvasX(x);
var cy = toCanvasY(y);
if (firstPoint) {
ctx.moveTo(cx, cy);
firstPoint = false;
} else {
// Prevent giant vertical lines when functions jump asymptotes
if (Math.abs(cy – toCanvasY(new Function('x', 'return ' + evalSafe)(x – stepSize))) < canvas.height) {
ctx.lineTo(cx, cy);
} else {
ctx.moveTo(cx, cy);
}
}
}
}
ctx.stroke();
} catch (e) {
errorDiv.innerHTML = "Error in equation: " + e.message;
}
}
// Initial draw
window.onload = function() {
plotGraph();
};