Graph Plotter

What this tool does

The graph plotter draws one or more functions of the form y = f(x) on an interactive canvas. You type an equation such as x^2, sin(x) or 0.5x^3 - 2x, and the tool parses it, evaluates it across the visible range and plots a smooth curve. It loads with two sample equations — a parabola and a sine wave — so you can see it working straight away. You can pan by dragging, zoom with the wheel, set an exact coordinate window, and read off the position under your cursor as you move the mouse.

Behind the scenes a small hand-written expression parser turns your text into a tree it can evaluate. It understands the arithmetic operators, powers, brackets, the variable x, the constants pi and e, and a set of common functions. There is no graphing library involved — the curve is sampled pixel by pixel and stroked onto an HTML canvas.

When you would use it

Students use it to see what an equation actually looks like — how the coefficient in a*x^2 stretches a parabola, how adding a constant shifts a curve up or down, or where two functions cross. Teachers use it to throw a quick visual onto a screen mid-explanation without launching heavier software. Anyone revising trigonometry can plot sin(x) and cos(x) together to see the phase difference, and anyone checking their own algebra can plot a function and its supposed simplification on top of each other — if the lines coincide, the simplification is right.

It is also a fast sanity check for word problems and modelling: sketch the revenue or distance function, look at where it peaks or hits zero, and you have an answer to compare against your calculation.

How to use it

1. The tool opens with x^2 and sin(x) already plotted. Edit either box, or clear it and type your own function of x.
2. Press Add equation to plot more curves — up to five, each in its own colour.
3. Drag the graph to move around; scroll to zoom toward the pointer; or use the Zoom in, Zoom out and Reset view buttons.
4. For an exact window, type values into the X min, X max, Y min and Y max boxes.
5. Move the pointer over the canvas to read the coordinates at that spot in the top-right readout.

How it reads the equation

Type the right-hand side of the equation. x^2 - 3 plots y equal to x squared minus three. Multiplication can be left implicit: 2x, 3(x+1) and x sin(x) all work. Powers use the caret, so x^3 is x cubed. Trigonometric functions take radians — plot over a range like -6.3 to 6.3 to see a couple of full cycles of sin(x). If an equation cannot be parsed, a short message appears under the inputs explaining what went wrong, and the other curves keep plotting.

For related calculations, the quadratic equation solver finds exact roots of a parabola, while the equation solver handles linear and quadratic equations symbolically. To work through an algebra problem one line at a time, try the algebra step-by-step tool.

Privacy

Everything happens in your browser. The expression you type is parsed and evaluated locally in JavaScript and drawn straight onto a canvas — nothing is uploaded, logged or stored. Close or refresh the tab and the tool returns to its default sample. Because there is no server round-trip, the plotter keeps working even if you go offline after the page has loaded.