Construct a Data Dashboard Using HTML, CSS, and JavaScript

Flatpickr is a light-weight, customizable JavaScript date and time picker. It lets users select dates (and optionally times) from a sleek pop-up calendar as a substitute of typing them manually.

Chart.js is a straightforward yet powerful JavaScript library for creating interactive, animated charts in web applications using the element.

2) client/style.css

/* client/style.css */
body {
    background-color: #f8f9fa;
    font-family: 'Arial', sans-serif;
}

h1 {
    text-align: center; /* Center the heading */
    margin-top: 20px; /* Add spacing above the heading */
    margin-bottom: 40px; /* Add spacing below the heading */
}

.container .filters {
    margin-top: 20px;
    margin-bottom: 60px !essential; /* Ensure larger spacing between filters and Key Metrics */
}

.container #key-metrics {
    margin-top: 40px !essential; /* Additional spacing above the Key Metrics section */
    margin-bottom: 20px; /* Optional spacing below */
}

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

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

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

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

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

We use a cascading style sheet (CSS) to style the fundamental visual components of our dashboard, for instance, button and text colors, spacing between elements, etc. 

The style.css file gives the dashboard its appearance and overall look. It’s a clean, light theme with ample spacing and layout adjustments for clarity and readability. The style.css file also customises the looks of DataTables’ pagination buttons, making them more user-friendly and visually consistent with Bootstrap’s design.

3) server/server.js

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

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

// Serve static files from the client directory
app.use(express.static(path.join(__dirname, '..', 'client')));

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

    // Query the database
    const query = "SELECT * FROM sales;"; // Replace 'sales' along with your table name
    db.all(query, [], (err, rows) => {
        if (err) {
            console.error("Error running query:", err.message);
            res.status(500).json({ error: "Query failed" });
        } else {
            res.json(rows); // Send the query result as JSON
        }
    });

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

// Catch-all path to serve the principal HTML file
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '..', 'client', 'index.html'));
});

// Start the server
app.listen(PORT, () => {
    console.log(`Server running at http://localhost:${PORT}`);
});

This Node.js script comprises the JavaScript code that sets up a basic Express server that powers the Sales Performance Dashboard. It does two principal things:

1. Serves static files (like HTML, CSS, and JS) from the client subfolder so the frontend loads within the browser.
2. Provides a /data endpoint that reads from a neighborhood SQLite database (sales_data.db) and returns your complete sales table as JSON, enabling dynamic data visualisations and tables on the frontend.

4) client/script.js

let chartInstance = null; // Global variable to store the present Chart.js instance

// Wait until the DOM is fully loaded
document.addEventListener('DOMContentLoaded', function () {
    // Fetch sales data from the backend API
    fetch('/data')
        .then((response) => response.json())
        .then((data) => {
            // Handle case where no data is returned
            if (!data || data.length === 0) {
                const app = document.getElementById('app');
                if (app) {
                    app.innerHTML = "
No data available.
";
                }
                return;
            }

            // Initialize filters and dashboard content
            setupFilters(data);
            initializeDashboard(data);

            // Re-render charts when chart type changes
            document.getElementById('chart-type-selector').onchange = () => filterAndRenderData(data);
        })
        .catch((error) => {
            // Handle fetch error
            console.error('Error fetching data:', error);
            const app = document.getElementById('app');
            if (app) {
                app.innerHTML = "
Didn't fetch data.
";
            }
        });
});

// Initialize Flatpickr date pickers and category filter
function setupFilters(data) {
    // Convert date strings to JS Date objects
    const dates = data.map((item) => recent Date(item.order_date.split('/').reverse().join('-')));
    const minDate = recent Date(Math.min(...dates));
    const maxDate = recent Date(Math.max(...dates));

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

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

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

// Initialize dashboard after filters are set
function initializeDashboard(data) {
    populateCategoryFilter(data);     // Populate category dropdown
    filterAndRenderData(data);       // Initial render with all data
}

// Apply filters and update key metrics, chart, and table
function filterAndRenderData(data) {
    const chartType = document.getElementById('chart-type-selector').value;
    const startDate = document.getElementById('start-date')._flatpickr.selectedDates[0];
    const endDate = document.getElementById('end-date')._flatpickr.selectedDates[0];
    const selectedCategory = document.getElementById('category-filter').value;

    // Filter data by date and category
    const filteredData = data.filter((item) =>  item.categories === selectedCategory)
        );
    );

    updateKeyMetrics(filteredData);                   // Update metrics like revenue and orders
    drawChart(filteredData, 'chart-canvas', chartType); // Render chart
    populateDataTable(filteredData);                  // Update table
}

// Update dashboard metrics (total revenue, order count, etc.)
function updateKeyMetrics(data) {
    const totalRevenue = data.reduce((acc, item) => acc + parseFloat(item.total), 0);
    const totalOrders = data.length;
    const averageOrderValue = totalOrders > 0 ? totalRevenue / totalOrders : 0;

    // Calculate total revenue per category to search out top category
    const revenueByCategory = data.reduce((acc, item) =>  0) + parseFloat(item.total);
        return acc;
    , {});

    // Determine category with highest total revenue
    const topCategory = Object.keys(revenueByCategory).reduce(
        (a, b) => (revenueByCategory[a] > revenueByCategory[b] ? a : b),
        "None"
    );

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

// Draw the chosen chart type using Chart.js
function drawChart(data, elementId, chartType) {
    const ctx = document.getElementById(elementId).getContext('second');

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

    switch (chartType) {
        case 'revenueOverTime':
            // Line chart showing revenue by order date
            chartInstance = recent Chart(ctx, {
                type: 'line',
                data: {
                    labels: data.map((item) => item.order_date),
                    datasets: [{
                        label: 'Revenue Over Time',
                        data: data.map((item) => parseFloat(item.total)),
                        fill: false,
                        borderColor: 'rgb(75, 192, 192)',
                        tension: 0.1,
                    }],
                },
                options: {
                    scales: {
                        y: { beginAtZero: true },
                    },
                },
            });
            break;

        case 'revenueByCategory':
            // Bar chart showing total revenue per category
            const categories = [...new Set(data.map((item) => item.categories))];
            const revenueByCategory = categories.map((category) => {
                return {
                    category,
                    revenue: data
                        .filter((item) => item.categories === category)
                        .reduce((acc, item) => acc + parseFloat(item.total), 0),
                };
            });
            chartInstance = recent Chart(ctx, {
                type: 'bar',
                data: {
                    labels: revenueByCategory.map((item) => item.category),
                    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,
                    }],
                },
                options: {
                    scales: {
                        y: { beginAtZero: true },
                    },
                },
            });
            break;

        case 'topProducts':
            // Horizontal bar chart showing top 10 products by revenue
            const productRevenue = data.reduce((acc, item) =>  0) + parseFloat(item.total);
                return acc;
            , {});

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

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

// Display filtered data in a DataTable
function populateDataTable(data) {
    const tableElement = $('#data-table');

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

    // Create a brand new DataTable with relevant columns
    tableElement.DataTable({
        data: data.map((item) => [
            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 category filter dropdown with available categories
function populateCategoryFilter(data) {
    const categoryFilter = document.getElementById('category-filter');
    categoryFilter.innerHTML = '';
    categoryFilter.appendChild(recent Option('All Categories', 'all', true, true));

    // Extract unique categories
    const categories = recent Set(data.map((item) => item.categories));
    categories.forEach((category) => {
        categoryFilter.appendChild(recent Option(category, category));
    });
}

It’s our most complex code file, nevertheless it has to do loads. This JavaScript file powers the interactivity and data visualisation for the Sales Performance Dashboard. Briefly, it …

1/ Fetches sales data

• When the page loads (DOMContentLoaded), it calls a backend API on the /data endpoint.
• If no data is returned, a “No data available” message is displayed.

2/ Sets up filters

• Uses Flatpickr date pickers to decide on a start and end date based on the dataset’s min/max order dates.
• Adds a category dropdown, allowing users to filter by product category.
• Adds a chart type selector to modify between different chart visualisations.

3/ Initialises the dashboard

• Populates the category filter with available categories.
• Runs the primary render with the total dataset.

4/ Applies filters and re-renders

• Every time the user changes a filter (date range, category, or chart type), it:
  • Filters the dataset by date range and category.
  • Updates key metrics: total revenue, variety of orders, average order value, and top revenue category.
  • Redraws the chosen Chart.js chart.
  • Refreshes the data table.

5/ Draws charts with Chart.js

• Revenue Over Time → Line chart showing revenue trends by date.
• Revenue by Category → Bar chart aggregating total revenue per category.
• Top Products → Horizontal bar chart showing the highest 10 products by revenue.

6/ Displays tabular data

• Uses DataTables (a jQuery plugin) to render a table of filtered orders, with columns for order ID, date, customer ID, product, category, and total.

7/ Keeps the UI in sync

• Destroys and recreates charts/tables when filters change to avoid duplicates.
• Keeps metrics, charts, and tables consistent with the lively filters.

Running our dashboard

Now that now we have all our code sorted, it’s time to run the dashboard, so go to the server subfolder and kind in the next command.

$ node server.js

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

Server running at http://localhost:3000

Open an internet browser and visit http://localhost:3000. You must see your dashboard populated with data from the SQLite database, as shown within the image below.

All of the filters, chart selection, etc, should work as advertised.

Summary

In this text, I’ve walked you thru creating a completely functional, interactive sales performance dashboard using core web technologies—HTML, CSS, JavaScript, Node.js, Express, and a neighborhood SQLite database.

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

• Backend: Node.js, Express, SQLite
• Frontend: HTML, Bootstrap (for layout), Chart.js (for charts), Flatpickr (date pickers), DataTables (for tabular data)
• Folder structure as shown below.

my-dashboard/
├── client/
│   ├── index.html
│   ├── style.css
│   └── script.js
└── server/
    └── server.js

I showed you create and populate a SQLite database in code that we could use because the source data for our dashboard. We also discussed the environment setup and each the front-end and back-end development processes, and briefly touched on our data dashboard functionality.

Finally, I walked you thru and explained intimately the 4 code files we would have liked to create, after which showed you run the dashboard in a browser.