Equation Graph Generator | Plot y = f(x)
Plot up to 3 simultaneous y = f(x) equations on a shared axis. Supports polynomials, trig, logs, exponentials, and more. Download as PNG or copy to clipboard.
Functions: sin cos tan asin acos atan exp ln log sqrt abs floor ceil round sinh cosh tanh · Constants: pi e · Operators: + - * / ^
Y range auto-fitted to the plotted data
Press Enter in any field to plot · Esc to reset
What Is the Equation Graph Generator | Plot y = f(x)?
A function graph is a visual representation of the relationship between an independent variable x and the dependent output y = f(x). For every x in the domain, the function computes exactly one y value, and the resulting set of (x, y) pairs traces a curve in the Cartesian coordinate plane. Visualising a function this way reveals its behaviour, zeros, extrema, asymptotes, periodicity, and growth rate, far more intuitively than a table of numbers.
This plotter evaluates your equation at 600 equally spaced x values across the range you specify, rendering each (x, y) pair as a point on the canvas and connecting adjacent points with a smooth line. It uses a custom recursive-descent parser, there is no eval() or new Function() call involved, so the evaluator is safe and sandboxed. The parser handles implicit multiplication (2x, 3sin(x)), right-associative exponentiation (2^3^2 = 2^9 = 512), and unary minus (−x, −sin(x)).
Discontinuities, such as vertical asymptotes in tan(x) near π/2, are handled by detecting large jumps between consecutive y values and breaking the path rather than drawing a misleading near-vertical line. Similarly, points where the function is undefined (e.g. ln(x) for x ≤ 0, sqrt(x) for x < 0) are simply skipped, so the curve correctly shows only the valid domain.
Formula
How to Use
- 1Enter equations: Type one to three equations in the input rows. Each row has a colour indicator (orange, blue, green). Click the colour swatch to show or hide that curve without deleting the equation.
- 2Use presets: Select a category tab (Polynomial, Trigonometric, Exponential, Special) and click any preset to fill it into the next empty equation slot.
- 3Set the x range: Enter x min and x max. Use decimal values (e.g. −6.28 ≈ −2π). You can type pi as a string in equations, but the range fields use numeric values.
- 4Choose y range: "Auto" (default) fits the y axis to the data. Toggle to "Manual" to enter specific y min and y max, useful when you want consistent scaling for comparison.
- 5Press Plot or Enter: Click "Plot Graph" or press Enter from any input field. The graph renders immediately in the canvas below, with a legend showing your active equations.
- 6Evaluate at a point: After plotting, use the "Evaluate at x =" field to see the exact y value of each active function at any x you choose, useful for reading function values precisely.
- 7Export the graph: Click "Download PNG" to save a high-resolution image. Click "Copy image" to copy directly to your clipboard for pasting into documents or presentations.
- 8Reset: Click Reset or press Esc to return to defaults. Your last equations and range settings are saved to browser storage and restored on your next visit.
Example Calculation
Example 1: Compare sine and cosine
Plot sin(x) and cos(x) together to visualise the phase shift of π/2.
Example 2: Normal distribution curve
The standard normal probability density function, bell curve centred at 0 with σ = 1.
Example 3: Rational function with asymptote
Plot 1/x, a hyperbola with a vertical asymptote at x = 0 and horizontal asymptote at y = 0.
Understanding Equation Graph Generator | Plot y = f(x)
Why Visualise Equations?
The visual representation of a function reveals structure that algebra alone cannot convey. You can immediately see whether a function is increasing or decreasing, where it crosses zero, how quickly it grows, and whether it oscillates. Students use graphs to verify analytical work, if the graph of a derivative doesn't look like the slope of the original function, there is an error somewhere. Engineers use them to understand system behaviour across a range of operating conditions. Teachers use them to build intuition before introducing formal definitions.
How the Expression Evaluator Works
This tool uses a hand-written recursive-descent parser, not JavaScript's built-in eval(). The parser implements the full operator precedence hierarchy: parentheses first, then functions, then exponentiation (right-to-left), then multiplication and division (left-to-right), then addition and subtraction. This means:
- ›2^3^2 = 2^(3^2) = 2^9 = 512 (right-associative, matching mathematical convention)
- ›sin x = sin(x) (function application without parentheses is supported)
- ›2x = 2*x (implicit multiplication: any number or closing paren followed by a variable or function)
- ›-x^2 = -(x^2) (unary minus applied after exponentiation, same as in standard math notation)
Handling Discontinuities
Some functions are undefined at specific x values, or have vertical asymptotes. Three situations arise in practice:
- ›Undefined domain: ln(x) is undefined for x ≤ 0; sqrt(x) is undefined for x < 0. The evaluator returns NaN for these points, and the plotter simply skips them, no error, the curve just ends or has a gap at the boundary.
- ›Vertical asymptotes: tan(x) near π/2 produces very large values. The plotter detects when consecutive y values differ by more than 50 times the visible y range and breaks the curve path, preventing the misleading near-vertical line that naive plotters draw across an asymptote.
- ›Removable discontinuities: sin(x)/x at x = 0, the function returns NaN (0/0), so that single point is skipped but the curve is otherwise continuous, which correctly represents the function's behaviour (the limit is 1 as x → 0).
Comparing Functions Side by Side
Plotting multiple functions simultaneously on shared axes is one of the most powerful tools in mathematical education. Classic comparisons include:
| f₁(x) | f₂(x) | What you see |
|---|---|---|
| sin(x) | cos(x) | Phase shift of π/2 between them |
| x^2 | x^3 | Quadratic vs cubic growth rates |
| exp(x) | ln(x) | Mutual inverses: reflections across y = x |
| sin(x) | sin(2x) | Doubling frequency halves the period |
| exp(-x^2/2) | abs(x)*exp(-abs(x)/2) | Different bell-curve shapes |
| 1/x | 1/x^2 | Odd vs even rational functions near x = 0 |
Reading a Function Graph
- ›Zeros (x-intercepts): where the curve crosses the x-axis. Solve f(x) = 0 analytically, or read approximate values from the graph and use the point evaluator to verify.
- ›Y-intercept: the value at x = 0. Visible where the curve crosses the y-axis. Use the evaluator: set x = 0.
- ›Local maxima and minima: peaks and valleys. At these points the derivative f′(x) = 0 and the curve is momentarily flat. Compare the graph with the derivative (plot both together using the two-equation feature).
- ›Increasing / decreasing intervals: where the curve rises left-to-right (f′(x) > 0) vs falls (f′(x) < 0).
- ›Concavity: concave up (bowl shape, f″(x) > 0) vs concave down. Inflection points occur where concavity changes.
- ›Asymptotes: horizontal asymptotes show the limiting value as x → ±∞; vertical asymptotes occur where the function is undefined or diverges.
Practical Uses
- ›Homework verification: graph your algebra or calculus solution to visually check that roots, extrema, and intervals are correct.
- ›Curve comparison: overlay a function and its Taylor polynomial approximation to see where the approximation is accurate.
- ›Teaching aids: generate clean graphs to include in worksheets, slide decks, or printed handouts (download as PNG).
- ›Engineering model review: quickly visualise a transfer function or response curve over a frequency or time range.
- ›Data fitting inspection: compare a fitted model function against the shape you expect from your data.
Frequently Asked Questions
What functions and operators are supported?
The evaluator supports a comprehensive set of mathematical operations:
- • Arithmetic: + − * / ^ with standard precedence. Use ^ for powers: x^2 = x².
- • Trigonometric: sin cos tan asin acos atan (all in radians)
- • Hyperbolic: sinh cosh tanh
- • Exponential / log: exp(x) = eˣ, ln(x) = logₑ x, log(x) = log₁₀ x
- • Other: sqrt abs floor ceil round
- • Constants: pi = 3.14159… and e = 2.71828…
- • Implicit multiply: 2x, 3sin(x), pi*x all work without explicit *.
Why does tan(x) have vertical lines on it?
The plotter uses a discontinuity detection algorithm that breaks the curve path when consecutive y values jump by more than 50× the visible y range. This prevents the misleading near-vertical lines that naive plotters draw across tan's asymptotes at π/2, 3π/2, etc.
If you still see vertical lines, try narrowing the y range manually to ±10 or ±20. This reduces the jump threshold and improves detection.
For best results with tan(x), use a manual y range like −10 to 10 and an x range that avoids exact multiples of π/2 on the grid lines.
How do I plot e^x (exponential function)?
Type exp(x) in the equation field. This evaluates eˣ using JavaScript's Math.exp().
- • exp(x), standard exponential
- • exp(-x), decay curve
- • exp(-x^2/2), Gaussian bell curve (unnormalised)
- • 2^x, base-2 exponential (also works)
Note: the constant e is recognised on its own, you can write e^x as an alternative to exp(x).
Can I plot multiple functions at once?
Yes, the plotter supports up to three simultaneous equations plotted on shared axes with different colours:
- • Orange (f₁): first equation row
- • Blue (f₂): second equation row
- • Green (f₃): third equation row
Click the colour swatch to toggle a curve on or off without deleting the equation. Each active curve appears in the graph legend. Use this feature to compare a function and its derivative, overlay approximations, or analyse related functions.
How do I plot piecewise or step functions?
You can approximate piecewise functions using combinations of supported functions:
- • Floor / ceiling: floor(x) gives the step function (integer part).
- • Absolute value: abs(x) creates the V-shaped function.
- • Heaviside step: approximate with (1 + x/abs(x+1e-9))/2 (sharp sigmoid near x = 0).
- • Sign function: x/abs(x + 1e-9) ≈ sign(x), with a very steep ramp at 0.
True piecewise notation (if x < 0 then…) is not currently supported, but most educational piecewise functions can be expressed using abs, floor, or combinations thereof.
How do I set the range to show 2π periods of a trig function?
Use numeric values for the range inputs:
- • One period of sin(x): x min = 0, x max = 6.2832 (= 2π)
- • Two periods: x min = −6.2832, x max = 6.2832
- • For sin(2x), period is π: x min = −3.1416, x max = 3.1416
Quick reference: π ≈ 3.14159, 2π ≈ 6.28318, π/2 ≈ 1.5708. The constant pi works inside equations (e.g. sin(pi*x)) but must be typed numerically in the range fields.
Can I download or share the graph?
Two export options are available after plotting:
- • Download PNG: saves a high-resolution raster image named after your equation (e.g.
graph-sin_x_.png). Suitable for documents, reports, and printing. - • Copy image: copies the graph directly to your clipboard using the Clipboard API. Paste directly into Google Docs, Microsoft Word, Slack, or any app that accepts images.
Note: the graph is rendered on an HTML5 canvas and exported as a PNG at the canvas resolution (620×380 pixels). For higher resolution, you can zoom your browser window before plotting, the canvas will be larger in absolute pixel count.
Are my equations saved between visits?
Yes, all three equations, the x/y range settings, and your last evaluated x value are saved to your browser's localStorage automatically:
- • Everything stays in your browser, nothing is sent to any server.
- • When you return, your last equations and settings are restored so you can continue immediately.
- • Click Reset or press Esc to clear the form and delete the saved data.