Create a Graph Plotter using HTML CSS and JavaScript

Last Updated : 17 Nov, 2023

In this article, we will create an interactive and user-friendly graph plotter using HTML, CSS, and JavaScript.

This project allows users to enter mathematical equations and instantly see the corresponding graphs in a web browser, providing a user-friendly and interactive experience. The application will offer a seamless experience for exploring mathematical functions, making it an excellent tool for students, educators, or anyone interested in graphically representing mathematical expressions.

JavaScript leverages Plotly and Math.js to dynamically generate and display plots, allowing users to visualize various mathematical functions interactively.

Plotly

Plotly is a tool for creating dynamic visualizations, emphasizing interaction and adaptability across various data types.
Plotly provides features such as hover details, zooming, and panning for a more engaging user experience.

// CDN link
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

Chart.js

Chart.js is a lightweight JavaScript library, created for simplicity and ease of use in creating basic charts.
Chart.js offers a simple interface and its lightweight design contributes to faster loading times, making it a perfect choice for performance and straightforward charting needs.

// CDN Link
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/9.5.0/math.js"></script>

Approach

Create an HTML document with a centered container, a header, an input field, a “Plot” button, and a div for the graph.
Include external resources (Plotly and Math.js) using script tags in the head section.
Style the webpage for visual appeal, ensuring a centered layout, and styling the input field and button.
Write a JavaScript function, plotGraph(), triggered by the “Plot” button, to retrieve, compile, and generate x and y values.
Use Math.js to create x values ranging from -10 to 10 with a step of 0.1 and evaluate the function for corresponding y values.
Configure a scatter plot with lines connecting data points using Plotly and set up the graph layout.
Integrate Plotly to generate and display the graph within the designated div when the user enters a function and clicks “Plot.”

Example: In this example, we will see how to create a graph plotter webpage by using HTML CSS and JavaScript.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <title>Graph Plotter</title> 
    <script src= 
        "https://cdn.plot.ly/plotly-latest.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/mathjs/9.5.0/math.js"> 
    </script> 
  
    <style> 
        body { 
            font-family: Arial, sans-serif; 
            margin: 0; 
            padding: 0; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            height: 100vh; 
            background-color: #f0f0f0; 
        } 
  
        .container { 
            text-align: center; 
            width: 80%; 
            max-width: 800px; 
            background-color: #fff; 
            padding: 20px; 
            border-radius: 10px; 
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
            margin-top: 50px; 
        } 
  
        header { 
            background-color: #3498db; 
            color: white; 
            padding: 20px 0; 
            border-top-left-radius: 10px; 
            border-top-right-radius: 10px; 
        } 
  
        h1 { 
            margin: 0; 
        } 
  
        .input-container { 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            margin-top: 20px; 
        } 
  
        input { 
            padding: 10px; 
            margin: 0 10px; 
            width: 60%; 
            border: 1px solid #ccc; 
            border-radius: 5px; 
        } 
  
        button { 
            padding: 10px 20px; 
            background-color: #e74c3c; 
            color: white; 
            border: none; 
            cursor: pointer; 
            border-radius: 5px; 
            transition: background-color 0.3s; 
        } 
  
        button:hover { 
            background-color: #c0392b; 
  
        } 
  
        .main-content { 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            margin-top: 50px; 
  
            padding-top: 50px; 
  
        } 
  
        .graph { 
            width: 100%; 
            height: 400px; 
            margin: 20px 0; 
            /* Adjust margin if needed */ 
            border: 1px solid #ccc; 
            border-radius: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <header> 
            <h1>Graph Plotter</h1> 
            <div class="input-container"> 
                <input type="text" id="functionInput" 
                    placeholder="Enter a function, e.g. y = x^2"> 
                <button onclick="plotGraph()"> 
                    Plot 
                </button> 
            </div> 
        </header> 
        <div class="main-content"> 
            <div class="graph" id="graph"></div> 
        </div> 
    </div> 
  
    <script> 
        function plotGraph() { 
            const graph = document.getElementById('graph'); 
            graph.innerHTML = ''; 
  
            const functionInput = 
                document.getElementById('functionInput').value; 
            const expr = math.parse(functionInput).compile(); 
  
            const xValues = math.range(-10, 10, 0.1)._data; 
            const yValues = xValues.map(x => expr.evaluate({ x })); 
  
            const trace = { 
                x: xValues, 
                y: yValues, 
                type: 'scatter', 
                mode: 'lines', 
            }; 
  
            const layout = { 
                xaxis: { title: 'X-axis' }, 
                yaxis: { title: 'Y-axis' }, 
            }; 
  
            Plotly.newPlot(graph, [trace], layout); 
        } 
    </script> 
</body> 
  
</html>