Build a Data Dashboard Using HTML, CSS, and JavaScript

dashboard in your prospects, shoppers, or fellow employees is changing into a necessary a part of the talent set required by software program builders, information scientists, ML practitioners, and information engineers. Even when you work totally on back-end processing, the info you’re processing normally must be “surfaced” to customers sooner or later. In the event you’re fortunate, your organisation could have a devoted front-end staff to care for that, however usually it is going to be all the way down to you. 

Being a straight-up Python developer with no expertise in HTML, JavaScript, and so forth., is not an excuse, as many Python libraries, comparable to Streamlit and Gradio, have emerged over the previous few years.

This text isn’t about them, although, as a result of I’m a type of straight-up Python builders, and I’ve already completed the Streamlit and Gradio factor. So it was time to roll up my sleeves and see if I might be taught new abilities and create a dashboard with these outdated front-end growth stalwarts: HTML, JavaScript, and CSS.

The info for our dashboard will come from an area SQLite database. I created a sales_data desk in SQLite containing dummy gross sales information. Right here is the info in tabular kind.

Under is a few code that you should use to observe alongside and create your individual SQLite database and desk with the info as proven. 

In case you’re questioning why I’m solely inserting a handful of data into my database, it’s not as a result of I don’t assume the code can deal with giant information volumes. It’s simply that I needed to focus on the dashboard performance somewhat than being distracted by the info. Be at liberty to make use of the script I present beneath so as to add further data to the enter information set when you like.

So, we keep within the Python world for only a bit longer as we arrange a SQLite DB programmatically.

import sqlite3

# Outline the database title
DATABASE_NAME = "C:Customersthomainitiativesmy-dashboardsales_data.db"

# Connect with SQLite database
conn = sqlite3.join(DATABASE_NAME)

# Create a cursor object
cursor = conn.cursor()

# SQL to create the 'gross sales' desk
create_table_query = '''
CREATE TABLE IF NOT EXISTS gross sales (
    order_id INTEGER PRIMARY KEY,
    order_date TEXT,
    customer_id INTEGER,
    customer_name TEXT,
    product_id INTEGER,
    product_names TEXT,
    classes TEXT,
    amount INTEGER,
    value REAL,
    whole REAL
);
'''

# Execute the question to create the desk
cursor.execute(create_table_query)

# Pattern information to insert into the 'gross sales' desk
sample_data = [
    (1, "2022-08-01", 245, "Customer_884", 201, "Smartphone", "Electronics", 3, 90.02, 270.06),
    (2, "2022-02-19", 701, "Customer_1672", 205, "Printer", "Electronics", 6, 12.74, 76.44),
    (3, "2017-01-01", 184, "Customer_21720", 208, "Notebook", "Stationery", 8, 48.35, 386.80),
    (4, "2013-03-09", 275, "Customer_23770", 200, "Laptop", "Electronics", 3, 74.85, 224.55),
    (5, "2022-04-23", 960, "Customer_23790", 210, "Cabinet", "Office", 6, 53.77, 322.62),
    (6, "2019-07-10", 197, "Customer_25587", 202, "Desk", "Office", 3, 47.17, 141.51),
    (7, "2014-11-12", 510, "Customer_6912", 204, "Monitor", "Electronics", 5, 22.5, 112.5),
    (8, "2016-07-12", 150, "Customer_17761", 200, "Laptop", "Electronics", 9, 49.33, 443.97)
]

# SQL to insert information into the 'gross sales' desk
insert_data_query = '''
INSERT INTO gross sales (order_id, order_date, customer_id, customer_name, product_id, product_names, classes, amount, value, whole)
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
'''

# Insert the pattern information
cursor.executemany(insert_data_query, sample_data)

# Commit the transaction
conn.commit()

# Shut the connection
conn.shut()

print(f"Database '{DATABASE_NAME}' has been created and populated efficiently.")

Dashboard Performance

Our dashboard could have the next performance.

• Key Metrics. Complete income, whole orders, common order worth, high class
• Totally different Chart Varieties. Income Over Time (line chart), Income by Class (bar chart), Prime Merchandise by Income (horizontal bar chart)
• Filtering. By date and class
• Knowledge Desk. Show our information data in a paginated and searchable grid format.

Organising our Surroundings

Subsequent, we’ve a collection of steps to observe to arrange our surroundings.

1/ Set up Node.js.

Node.js is a runtime surroundings that lets you run JavaScript exterior the browser, permitting you to make use of JavaScript to construct quick and scalable server-side purposes.

So, guarantee Node.js is put in in your system to allow you to run an area server and handle packages. You may obtain it from the Node.js official website.

2/ Create a important undertaking folder and subfolders

Open your command terminal and run the next instructions. I’m utilizing Ubuntu on my Home windows field for this, however you’ll be able to change it to fit your most popular command-line utility and system.

$ mkdir my-dashboard
$ cd my-dashboard
$ mkdir shopper
% mkdir server

3/ Initialise a Node undertaking

$ npm init -y

This command robotically creates a default bundle.json file in your undertaking listing with out requiring consumer enter.

The -y flag solutions “sure” to all prompts, utilizing the default values for fields like:

• title
• model
• description
• important
• scripts
• creator
• license

Here’s what my bundle file appeared like.

{
  "title": "my-dashboard",
  "model": "1.0.0",
  "important": "index.js",
  "scripts": {
    "check": "echo "Error: no check specified" && exit 1"
  },
  "key phrases": [],
  "creator": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "categorical": "^4.21.2",
    "sqlite3": "^5.1.7"
  }
}

4/ Set up Categorical and SQLite

SQLite is a light-weight, file-based relational database engine that shops all of your information in a single, transportable file, eliminating the necessity for a separate server.

Categorical is a minimal, versatile internet software framework for Node.js that simplifies the constructing of APIs and internet servers by means of routing and middleware.

We will set up each utilizing the command beneath.

$ npm set up categorical sqlite3

Now, we will begin growing our code. For this undertaking, we’ll want 4 code information: an index.html file, a server.js file, a shopper.js file, and a script.js file. 

Let’s undergo every of them step-by-step.

1) shopper/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta title="viewport" content material="width=device-width, initial-scale=1.0">
    <hyperlink rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <hyperlink rel="stylesheet" href="https://cdn.jsdelivr.internet/npm/flatpickr/dist/flatpickr.min.css">
    <hyperlink rel="stylesheet" href="type.css">
    <title>Gross sales Efficiency Dashboard</title>
</head>
<physique>
    <div class="container">
        <!-- Centered Heading -->
        <h1 class="text-center">Gross sales Efficiency Dashboard</h1>

        <!-- Filter Part -->
        <div class="filters row my-4">
            <div class="col-md-4">
                <label for="start-date">Begin Date</label>
                <enter sort="textual content" id="start-date" class="form-control" placeholder="Begin Date">
            </div>
            <div class="col-md-4">
                <label for="end-date">Finish Date</label>
                <enter sort="textual content" id="end-date" class="form-control" placeholder="Finish Date">
            </div>
            <div class="col-md-4">
                <label for="category-filter">Class</label>
                <choose id="category-filter" class="form-control">
                    <possibility worth="all">All Classes</possibility>
                    <!-- Choices can be populated dynamically -->
                </choose>
            </div>
        </div>

        <!-- Key Metrics Part -->
        <h2 class="mt-5">Key Metrics</h2> <!-- Added heading for Key Metrics -->
        <div id="key-metrics" class="row text-center my-4">
            <div class="col-md-3">
                <h4>Complete Income</h4>
                <p id="total-revenue">$0</p>
            </div>
            <div class="col-md-3">
                <h4>Complete Orders</h4>
                <p id="total-orders">0</p>
            </div>
            <div class="col-md-3">
                <h4>Common Order Worth</h4>
                <p id="average-order-value">$0</p>
            </div>
            <div class="col-md-3">
                <h4>Prime Class</h4>
                <p id="top-category">None</p>
            </div>
        </div>

        <!-- Chart Part -->
        <div class="chart-section my-4">
            <label for="chart-type-selector">Choose Chart:</label>
            <choose id="chart-type-selector" class="form-control mb-3">
                <possibility worth="revenueOverTime">Income Over Time</possibility>
                <possibility worth="revenueByCategory">Income By Class</possibility>
                <possibility worth="topProducts">Prime Merchandise by Income</possibility>
            </choose>
            <canvas id="chart-canvas"></canvas>
        </div>

        <!-- Uncooked Knowledge Desk Part -->
        <div id="raw-data" class="my-4">
            <h3>Uncooked Knowledge</h3>
            <desk id="data-table" class="desk table-striped table-bordered"></desk>
        </div>
    </div>

    <!-- Required JS Libraries -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.datatables.internet/1.10.21/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.internet/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.internet/npm/flatpickr"></script>
    <script src="script.js"></script>
</physique>
</html>

This HTML file establishes the fundamental visible parts of our Gross sales Efficiency Dashboard, together with interactive filters for date and class, a bit displaying key gross sales metrics, a dropdown menu to pick out chart sorts, and a desk for uncooked information. 

Bootstrap is used for styling. Flatpickr is used for date inputs. Chart.js is used for visualisations, and DataTables is used for tabular show. Interactivity is dealt with by an exterior script.js file, which we’ll look at shortly.

Bootstrap is a well-liked front-end framework, initially developed by Twitter, that helps you construct responsive and visually constant internet interfaces extra simply and shortly.

DataTables is a jQuery-based plugin that enhances customary HTML <desk> parts, remodeling them into totally interactive, feature-rich tables.

Flatpickr is a light-weight, customizable JavaScript date and time picker. It lets customers choose dates (and optionally instances) from a glossy pop-up calendar as a substitute of typing them manually.

Chart.js is an easy but highly effective JavaScript library for creating interactive, animated charts in internet purposes utilizing the <canvas> aspect.

2) shopper/type.css

/* shopper/type.css */
physique {
    background-color: #f8f9fa;
    font-family: 'Arial', sans-serif;
}

h1 {
    text-align: middle; /* Heart the heading */
    margin-top: 20px; /* Add spacing above the heading */
    margin-bottom: 40px; /* Add spacing beneath the heading */
}

.container .filters {
    margin-top: 20px;
    margin-bottom: 60px !vital; /* Guarantee bigger spacing between filters and Key Metrics */
}

.container #key-metrics {
    margin-top: 40px !vital; /* Further spacing above the Key Metrics part */
    margin-bottom: 20px; /* Non-compulsory spacing beneath */
}

.key-metrics div {
    margin: 10px 0;
    padding: 10px;
    background-color: #f4f4f4;
    border: 1px strong #ccc;
    border-radius: 4px;
}

/* Repair for DataTables Pagination Spacing */
.dataTables_wrapper .dataTables_paginate {
    text-align: middle;
    margin-top: 10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    margin: 0 12px;
    padding: 5px 10px;
    border: 1px strong #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    shade: #007bff;
    text-decoration: none;
    show: inline-block;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #007bff;
    shade: #fff;
    border: 1px strong #007bff;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.present {
    font-weight: daring;
    shade: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

We use a cascading type sheet (CSS) to type the fundamental visible elements of our dashboard, for instance, button and textual content colors, spacing between parts, and so forth. 

The type.css file provides the dashboard its look and total look. It’s a clear, mild theme with ample spacing and structure changes for readability and readability. The type.css file additionally customises the looks of DataTables’ pagination buttons, making them extra user-friendly and visually per Bootstrap’s design.

3) server/server.js

const categorical = require('categorical');
const sqlite3 = require('sqlite3').verbose();
const path = require('path');
const app = categorical();
const PORT = 3000;

// Full path to your SQLite database
const DB_PATH = "C:Customersthomainitiativesmy-dashboardsales_data.db";

// Serve static information from the shopper listing
app.use(categorical.static(path.be part of(__dirname, '..', 'shopper')));

// Path to fetch information from SQLite database
app.get('/information', (req, res) => {
    const db = new sqlite3.Database(DB_PATH, sqlite3.OPEN_READONLY, (err) => {
        if (err) {
            console.error("Error connecting to database:", err.message);
            res.standing(500).json({ error: "Database connection failed" });
            return;
        }
    });

    // Question the database
    const question = "SELECT * FROM gross sales;"; // Change 'gross sales' along with your desk title
    db.all(question, [], (err, rows) => {
        if (err) {
            console.error("Error working question:", err.message);
            res.standing(500).json({ error: "Question failed" });
        } else {
            res.json(rows); // Ship the question outcome as JSON
        }
    });

    db.shut((err) => {
        if (err) {
            console.error("Error closing database:", err.message);
        }
    });
});

// Catch-all path to serve the primary HTML file
app.get('*', (req, res) => {
    res.sendFile(path.be part of(__dirname, '..', 'shopper', 'index.html'));
});

// Begin the server
app.pay attention(PORT, () => {
    console.log(`Server working at http://localhost:${PORT}`);
});

This Node.js script incorporates the JavaScript code that units up a fundamental Categorical server that powers the Gross sales Efficiency Dashboard. It does two important issues:

1. Serves static information (like HTML, CSS, and JS) from the shopper subfolder so the frontend masses within the browser.
2. Offers a /information endpoint that reads from an area SQLite database (sales_data.db) and returns your complete gross sales desk as JSON, enabling dynamic information visualisations and tables on the frontend.

4) shopper/script.js

let chartInstance = null; // International variable to retailer the present Chart.js occasion

// Wait till the DOM is totally loaded
doc.addEventListener('DOMContentLoaded', operate () {
    // Fetch gross sales information from the backend API
    fetch('/information')
        .then((response) => response.json())
        .then((information) => {
            // Deal with case the place no information is returned
            if (!information || information.size === 0) {
                const app = doc.getElementById('app');
                if (app) {
                    app.innerHTML = "<p>No information obtainable.</p>";
                }
                return;
            }

            // Initialize filters and dashboard content material
            setupFilters(information);
            initializeDashboard(information);

            // Re-render charts when chart sort modifications
            doc.getElementById('chart-type-selector').onchange = () => filterAndRenderData(information);
        })
        .catch((error) => {
            // Deal with fetch error
            console.error('Error fetching information:', error);
            const app = doc.getElementById('app');
            if (app) {
                app.innerHTML = "<p>Did not fetch information.</p>";
            }
        });
});

// Initialize Flatpickr date pickers and class filter
operate setupFilters(information) {
    // Convert date strings to JS Date objects
    const dates = information.map((merchandise) => new Date(merchandise.order_date.cut up('/').reverse().be part of('-')));
    const minDate = new Date(Math.min(...dates));
    const maxDate = new Date(Math.max(...dates));

    // Configure begin date picker
    flatpickr("#start-date", {
        defaultDate: minDate.toISOString().slice(0, 10),
        dateFormat: "Y-m-d",
        altInput: true,
        altFormat: "F j, Y",
        onChange: operate () {
            filterAndRenderData(information);
        },
    });

    // Configure finish date picker
    flatpickr("#end-date", {
        defaultDate: maxDate.toISOString().slice(0, 10),
        dateFormat: "Y-m-d",
        altInput: true,
        altFormat: "F j, Y",
        onChange: operate () {
            filterAndRenderData(information);
        },
    });

    // Arrange class dropdown change listener
    const categoryFilter = doc.getElementById('category-filter');
    if (categoryFilter) {
        categoryFilter.onchange = () => filterAndRenderData(information);
    }
}

// Initialize dashboard after filters are set
operate initializeDashboard(information) {
    populateCategoryFilter(information);     // Populate class dropdown
    filterAndRenderData(information);       // Preliminary render with all information
}

// Apply filters and replace key metrics, chart, and desk
operate filterAndRenderData(information) {
    const chartType = doc.getElementById('chart-type-selector').worth;
    const startDate = doc.getElementById('start-date')._flatpickr.selectedDates[0];
    const endDate = doc.getElementById('end-date')._flatpickr.selectedDates[0];
    const selectedCategory = doc.getElementById('category-filter').worth;

    // Filter information by date and class
    const filteredData = information.filter((merchandise) => );

    updateKeyMetrics(filteredData);                   // Replace metrics like income and orders
    drawChart(filteredData, 'chart-canvas', chartType); // Render chart
    populateDataTable(filteredData);                  // Replace desk
}

// Replace dashboard metrics (whole income, order rely, and so forth.)
operate updateKeyMetrics(information) {
    const totalRevenue = information.scale back((acc, merchandise) => acc + parseFloat(merchandise.whole), 0);
    const totalOrders = information.size;
    const averageOrderValue = totalOrders > 0 ? totalRevenue / totalOrders : 0;

    // Calculate whole income per class to seek out high class
    const revenueByCategory = information.scale back((acc, merchandise) => , {});

    // Decide class with highest whole income
    const topCategory = Object.keys(revenueByCategory).scale back(
        (a, b) => (revenueByCategory[a] > revenueByCategory[b] ? a : b),
        "None"
    );

    // Show metrics within the DOM
    doc.getElementById('total-revenue').textContent = `$${totalRevenue.toFixed(2)}`;
    doc.getElementById('total-orders').textContent = `${totalOrders}`;
    doc.getElementById('average-order-value').textContent = `$${averageOrderValue.toFixed(2)}`;
    doc.getElementById('top-category').textContent = topCategory || 'None';
}

// Draw the chosen chart sort utilizing Chart.js
operate drawChart(information, elementId, chartType) {
    const ctx = doc.getElementById(elementId).getContext('2nd');

    // Destroy earlier chart if one exists
    if (chartInstance) {
        chartInstance.destroy();
    }

    change (chartType) {
        case 'revenueOverTime':
            // Line chart displaying income by order date
            chartInstance = new Chart(ctx, {
                sort: 'line',
                information: {
                    labels: information.map((merchandise) => merchandise.order_date),
                    datasets: [{
                        label: 'Revenue Over Time',
                        data: data.map((item) => parseFloat(item.total)),
                        fill: false,
                        borderColor: 'rgb(75, 192, 192)',
                        tension: 0.1,
                    }],
                },
                choices: {
                    scales: {
                        y: { beginAtZero: true },
                    },
                },
            });
            break;

        case 'revenueByCategory':
            // Bar chart displaying whole income per class
            const classes = [...new Set(data.map((item) => item.categories))];
            const revenueByCategory = classes.map((class) => {
                return {
                    class,
                    income: information
                        .filter((merchandise) => merchandise.classes === class)
                        .scale back((acc, merchandise) => acc + parseFloat(merchandise.whole), 0),
                };
            });
            chartInstance = new Chart(ctx, {
                sort: 'bar',
                information: {
                    labels: revenueByCategory.map((merchandise) => merchandise.class),
                    datasets: [{
                        label: 'Revenue by Category',
                        data: revenueByCategory.map((item) => item.revenue),
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 1,
                    }],
                },
                choices: {
                    scales: {
                        y: { beginAtZero: true },
                    },
                },
            });
            break;

        case 'topProducts':
            // Horizontal bar chart displaying high 10 merchandise by income
            const productRevenue = information.scale back((acc, merchandise) => , {});

            const topProducts = Object.entries(productRevenue)
                .kind((a, b) => b[1] - a[1])
                .slice(0, 10);

            chartInstance = new Chart(ctx, {
                sort: 'bar',
                information: {
                    labels: topProducts.map((merchandise) => merchandise[0]), // Product names
                    datasets: [{
                        label: 'Top Products by Revenue',
                        data: topProducts.map((item) => item[1]), // Income
                        backgroundColor: 'rgba(54, 162, 235, 0.8)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1,
                    }],
                },
                choices: {
                    indexAxis: 'y', // Horizontal bars
                    scales: {
                        x: { beginAtZero: true },
                    },
                },
            });
            break;
    }
}

// Show filtered information in a DataTable
operate populateDataTable(information) {
    const tableElement = $('#data-table');

    // Destroy current desk if it exists
    if ($.fn.DataTable.isDataTable(tableElement)) {
        tableElement.DataTable().clear().destroy();
    }

    // Create a brand new DataTable with related columns
    tableElement.DataTable({
        information: information.map((merchandise) => [
            item.order_id,
            item.order_date,
            item.customer_id,
            item.product_names,
            item.categories,
            `$${parseFloat(item.total).toFixed(2)}`,
        ]),
        columns: [
            { title: "Order ID" },
            { title: "Order Date" },
            { title: "Customer ID" },
            { title: "Product" },
            { title: "Category" },
            { title: "Total" },
        ],
    });
}

// Populate the class filter dropdown with obtainable classes
operate populateCategoryFilter(information) {
    const categoryFilter = doc.getElementById('category-filter');
    categoryFilter.innerHTML = '';
    categoryFilter.appendChild(new Choice('All Classes', 'all', true, true));

    // Extract distinctive classes
    const classes = new Set(information.map((merchandise) => merchandise.classes));
    classes.forEach((class) => {
        categoryFilter.appendChild(new Choice(class, class));
    });
}

It’s our most complex code file, nevertheless it has to do loads. This JavaScript file powers the interactivity and information visualisation for the Gross sales Efficiency Dashboard. Briefly, it …

1/ Fetches gross sales information

• When the web page masses (DOMContentLoaded), it calls a backend API on the /information endpoint.
• If no information is returned, a “No information obtainable” message is displayed.

2/ Units up filters

• Makes use of Flatpickr date pickers to decide on a begin and finish date based mostly on the dataset’s min/max order dates.
• Provides a class dropdown, permitting customers to filter by product class.
• Provides a chart sort selector to change between completely different chart visualisations.

3/ Initialises the dashboard

• Populates the class filter with obtainable classes.
• Runs the primary render with the total dataset.

4/ Applies filters and re-renders

• Every time the consumer modifications a filter (date vary, class, or chart sort), it:
  • Filters the dataset by date vary and class.
  • Updates key metrics: whole income, variety of orders, common order worth, and high income class.
  • Redraws the chosen Chart.js chart.
  • Refreshes the information desk.

5/ Attracts charts with Chart.js

• Income Over Time → Line chart displaying income developments by date.
• Income by Class → Bar chart aggregating whole income per class.
• Prime Merchandise → Horizontal bar chart displaying the highest 10 merchandise by income.

6/ Shows tabular information

• Makes use of DataTables (a jQuery plugin) to render a desk of filtered orders, with columns for order ID, date, buyer ID, product, class, and whole.

7/ Retains the UI in sync

• Destroys and recreates charts/tables when filters change to keep away from duplicates.
• Retains metrics, charts, and tables per the lively filters.

Operating our dashboard

Now that we’ve all our code sorted, it’s time to run the dashboard, so go to the server subfolder and sort within the following command.

$ node server.js

You’ll get a response to the above command, one thing like,

Server working at http://localhost:3000

Open an internet browser and go to http://localhost:3000. You need to see your dashboard populated with information from the SQLite database, as proven within the picture beneath.

All of the filters, chart choice, and so forth, ought to work as marketed.

Abstract

On this article, I’ve walked you thru creating a totally useful, interactive gross sales efficiency dashboard utilizing core internet applied sciences—HTML, CSS, JavaScript, Node.js, Categorical, and an area SQLite database.

We mentioned the tech stack & setup. i.e.

• Backend: Node.js, Categorical, SQLite
• Frontend: HTML, Bootstrap (for structure), Chart.js (for charts), Flatpickr (date pickers), DataTables (for tabular information)
• Folder construction as proven beneath.

my-dashboard/
├── shopper/
│   ├── index.html
│   ├── type.css
│   └── script.js
└── server/
    └── server.js

I confirmed you methods to create and populate a SQLite database in code that we might use because the supply information for our dashboard. We additionally mentioned the surroundings setup and each the front-end and back-end growth processes, and briefly touched on our information dashboard performance.

Lastly, I walked you thru and defined intimately the 4 code information we wanted to create, after which confirmed you methods to run the dashboard in a browser.