Function Plotter & Graphing Calculator
:root {
–primary-blue: #004a99;
–success-green: #28a745;
–light-background: #f8f9fa;
–dark-text: #333;
–border-color: #ccc;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(–light-background);
color: var(–dark-text);
line-height: 1.6;
margin: 0;
padding: 0;
}
.loan-calc-container {
max-width: 900px;
margin: 30px auto;
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
h1, h2, h3 {
color: var(–primary-blue);
text-align: center;
margin-bottom: 20px;
}
.input-section, .output-section, .article-section {
margin-bottom: 30px;
padding: 25px;
border: 1px solid var(–border-color);
border-radius: 6px;
background-color: #fdfdfd;
}
.input-group {
margin-bottom: 20px;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.input-group label {
flex: 1;
min-width: 150px;
margin-right: 15px;
font-weight: 600;
color: var(–primary-blue);
}
.input-group input[type="text"] {
flex: 2;
padding: 10px 12px;
border: 1px solid var(–border-color);
border-radius: 4px;
font-size: 1rem;
box-sizing: border-box; /* Important for consistent sizing */
min-width: 200px;
}
button {
display: block;
width: 100%;
padding: 12px 20px;
background-color: var(–primary-blue);
color: white;
border: none;
border-radius: 4px;
font-size: 1.1rem;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 10px;
}
button:hover {
background-color: #003b73;
}
#result {
font-size: 1.5rem;
font-weight: bold;
color: var(–primary-blue);
background-color: var(–light-background);
padding: 15px;
border-radius: 6px;
text-align: center;
margin-top: 20px;
border: 1px dashed var(–primary-blue);
}
#result.error {
color: #dc3545;
background-color: #f8d7da;
border-color: #f5c6cb;
}
.graph-container {
width: 100%;
height: 400px;
border: 1px solid var(–border-color);
margin-top: 20px;
background-color: #fff;
overflow: hidden; /* To ensure canvas fits */
}
.article-section h3 {
text-align: left;
margin-bottom: 15px;
}
.article-section p, .article-section ul {
margin-bottom: 15px;
}
.article-section ul {
padding-left: 25px;
}
.article-section code {
background-color: #e9ecef;
padding: 2px 5px;
border-radius: 3px;
font-family: 'Consolas', 'Monaco', monospace;
}
@media (max-width: 768px) {
.input-group {
flex-direction: column;
align-items: flex-start;
}
.input-group label {
margin-bottom: 8px;
margin-right: 0;
width: 100%;
}
.input-group input[type="text"] {
width: calc(100% – 24px); /* Account for padding and border */
}
.loan-calc-container {
padding: 20px;
}
}
Free Online Function Plotter & Graphing Calculator
Graph
Enter a function and click "Plot Graph".
Understanding Function Plotting and Graphing Calculators
A function plotter or graphing calculator is a powerful tool that allows users to visualize mathematical functions. By inputting an equation, these calculators generate a visual representation, or graph, of the function's behavior over a specified range of input (x) and output (y) values. This is invaluable for understanding concepts in algebra, calculus, trigonometry, and many other fields of mathematics and science.
How it Works:
The core idea is to evaluate the function at a series of points across the specified x-axis range and then plot these (x, y) coordinates on a Cartesian plane. The calculator discretizes the x-axis into many small intervals. For each x-value in these intervals, it computes the corresponding y-value using the provided function. These calculated points are then connected to form the visual graph.
Mathematical Concepts Involved:
- Cartesian Coordinate System: The graph is plotted on a 2D plane defined by a horizontal x-axis and a vertical y-axis, intersecting at the origin (0,0).
- Function Evaluation: For a given input value 'x', the function f(x) produces a unique output value 'y'. The calculator computes these pairs.
- Domain and Range: The calculator allows you to define the visible portion of the x-axis (domain) and y-axis (range) to focus on specific aspects of the function.
- Mathematical Operations: Basic arithmetic (+, -, *, /), exponentiation (^ or **), trigonometric functions (sin, cos, tan), logarithmic functions (log, ln), and constants (pi, e) are often supported.
Common Use Cases:
- Visualizing Algebraic Equations: Understanding linear, quadratic, cubic, and polynomial functions.
- Exploring Trigonometric Patterns: Observing the wave-like behavior of sine, cosine, and tangent.
- Analyzing Exponential and Logarithmic Growth/Decay: Visualizing population models, compound interest, or radioactive decay.
- Understanding Calculus Concepts: Approximating derivatives (slopes) and integrals (areas under the curve).
- Problem Solving: Finding intersection points, maximum/minimum values, and roots (where the graph crosses the x-axis).
Example Input and Interpretation:
If you input the function y = x^2 - 4, the calculator will plot a parabola. You'll see that the graph crosses the x-axis at x = -2 and x = 2 (the roots), and its minimum point (vertex) is at (0, -4). By adjusting the X and Y axis ranges, you can zoom in or out to see different parts of the curve.
// Function to evaluate the user-inputted mathematical expression
function evaluateFunction(funcStr, x) {
// Basic sanitization and preparation
funcStr = funcStr.toLowerCase().replace(/\s+/g, "); // Remove spaces
funcStr = funcStr.replace(/(\d+(\.\d+)?)\s*\*/g, '$1*'); // Ensure multiplication operator is explicit if needed, though JS eval is robust
funcStr = funcStr.replace(/x\^(\d+(\.\d+)?)/g, 'Math.pow(x, $2)'); // Handle x^n
funcStr = funcStr.replace(/sin\(/g, 'Math.sin(');
funcStr = funcStr.replace(/cos\(/g, 'Math.cos(');
funcStr = funcStr.replace(/tan\(/g, 'Math.tan(');
funcStr = funcStr.replace(/log\(/g, 'Math.log10('); // Assuming log is base 10
funcStr = funcStr.replace(/ln\(/g, 'Math.log('); // Natural log
funcStr = funcStr.replace(/pi/g, 'Math.PI');
funcStr = funcStr.replace(/e/g, 'Math.E');
// Use a try-catch block for safety against invalid expressions
try {
// IMPORTANT: Using eval() is generally discouraged due to security risks if the input isn't fully controlled.
// For this specific calculator context where inputs are mathematical expressions, it's often used,
// but extreme caution should be exercised if this were handling untrusted user input in a web application.
var result = eval(funcStr);
// Check for NaN or Infinity which can cause plotting issues
if (isNaN(result) || !isFinite(result)) {
return null; // Indicate an invalid result for this x
}
return result;
} catch (e) {
console.error("Error evaluating function:", e);
return null; // Indicate an error
}
}
function plotFunction() {
var canvas = document.getElementById("graphCanvas");
var ctx = canvas.getContext("2d");
var functionInput = document.getElementById("functionInput").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 resultDiv = document.getElementById("result");
// Clear previous drawings
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Input validation
if (!functionInput) {
resultDiv.innerHTML = "Error: Please enter a function.";
resultDiv.className = "error";
return;
}
if (isNaN(xMin) || isNaN(xMax) || isNaN(yMin) || isNaN(yMax)) {
resultDiv.innerHTML = "Error: Please enter valid numbers for axis ranges.";
resultDiv.className = "error";
return;
}
if (xMin >= xMax || yMin >= yMax) {
resultDiv.innerHTML = "Error: Min value must be less than Max value for axes.";
resultDiv.className = "error";
return;
}
// Set canvas dimensions and scale factors
var width = canvas.width;
var height = canvas.height;
var xRange = xMax – xMin;
var yRange = yMax – yMin;
// Function to convert graph coordinates to canvas coordinates
var getCanvasX = function(x) {
return ((x – xMin) / xRange) * width;
};
var getCanvasY = function(y) {
return height – ((y – yMin) / yRange) * height;
};
// Draw Axes
ctx.beginPath();
ctx.strokeStyle = "#aaa";
ctx.lineWidth = 1;
// Y-axis
var originX = getCanvasX(0);
if (originX >= 0 && originX = 0 && originY <= height) {
ctx.moveTo(0, originY);
ctx.lineTo(width, originY);
}
ctx.stroke();
// Draw grid lines (optional, can make it too busy)
// You could add logic here to draw dashed lines for grid intervals
// Plot the function
ctx.beginPath();
ctx.strokeStyle = var(–primary-blue);
ctx.lineWidth = 2;
var step = xRange / (width * 2); // Adjust step for smoothness; *2 to ensure enough points
var firstPoint = true;
var lastY = null;
for (var x = xMin; x = yMin && y = yMin && lastY <= yMax) {
ctx.lineTo(canvasX, canvasY);
} else {
// If previous point was out of range, start a new line segment
ctx.moveTo(canvasX, canvasY);
}
}
lastY = y; // Store the current y for the next iteration
} else {
// y is out of range, break the line segment
lastY = null;
firstPoint = true; // Reset so next valid point starts a new line
}
} else {
// y is invalid (NaN, Infinity, or null from evaluation error)
lastY = null;
firstPoint = true; // Reset so next valid point starts a new line
}
}
ctx.stroke();
// Update result message
resultDiv.innerHTML = "Graph plotted successfully!";
resultDiv.className = ""; // Remove error class
}
// Initialize canvas size
var canvas = document.getElementById("graphCanvas");
canvas.width = canvas.parentElement.clientWidth;
canvas.height = 400; // Fixed height
// Initial plot on load (optional)
// plotFunction();