Create a Graph Plotter using HTML CSS and JavaScript

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>

Output:

Output

Create a Graph Plotter using HTML CSS and JavaScript

vishaldhaygude01

Improve

Article Tags :

Similar Reads

How to create an Area Chart using CSS ?

In this article, we will see how to create Area charts using CSS. There are many Libraries available, which can help us to build area charts, although, here, we will be using pure HTML and CSS to create an Area Chart. An Area Chart is a graphical representation of quantitative data where multiple da

How to make Kadanes Algorithm visualizer using HTML CSS & Javascript ?

In this article, we will see how to make a Kadanes Algorithm visualizer using HTML, CSS & Javascript. Approach:Â Kadanes algorithm is used to calculate the largest sum in a contiguous subarray. We are basically gonna use the algorithm as same and we are gonna use JavaScript and CSS to show the v

Create charts from Google Sheets using Google Apps Script

Google Apps Script is a potent tool that allows you to automate various tasks within Googleâ€™s ecosystem. It supports modern JavaScript and can be used to create custom menus, functions, macros, and even web apps for Google Sheets.This article will guide you through the process of creating a chart fr

How to create a Line Chart With CSS ?

The Chart is a pictorial or graphical representation of the data visualization, based on certain conditions There are various types of charts available such as Bar Charts, Line Charts, Pie Charts, etc, that are used to represent important data. In this article, we will see how to create the Line cha

How to implement bar and pie charts using Chart.js ?

In this article, we will learn to implement basic bar graphs and pie charts using the Chart JS CDN library.Approach:In the HTML design, use the <canvas> tag for showing the bar or pie chart graph.In the script part of the code, instantiate the ChartJS object by setting the type, data and optio

How to make Charts using Data from Google Sheets in JavaScript ?

This article will discuss how to create different charts using Data from a Google Sheet.Â To export data from a Google Sheet, we will use the SheetDB API. It converts data stored in a Google Spreadsheet into a JSON format API. After that, we will use Fetch API to pull that JSON data into our file. On

Interactive Data Visualizations in JavaScript

In this article we will learn about Interactive Data visualization in JavaScript, Data visualizations serve as a powerful tool for visually representing information and allowing viewers to easily perceive trends, patterns, and relationships in large datasets. Static visuals often fall short when pro

Data Analysis with JavaScript

JavaScript, traditionally known for frontend web development has evolved into the versatile language capable of performing complex data analysis tasks. Leveraging its capabilities for data manipulation, visualization, and integration with the backend systems. JavaScript has become a powerful tool in

How to Implement Area Charts using CanvasJS ?

In this article, we will learn to implement area charts using Canvas JS plugin.Area Charts are a great way to quickly and easily visualize things to show the average overtime on an area chart. Area charts are different from line graphs. Area charts are primarily used for the summation of quantitativ

How to Implement Scatter and Bubble Charts using CanvasJS ?

In this article, we will learn to create dynamic scatter and bubble charts using the Canvas JS plugin.Scatter chart: a chart that shows the relationship between two numeric variables to observe some pattern in the data taken as a whole. It uses dots to represent the values of 2 variables in the hori