Construct a Information Dashboard Utilizing HTML, CSS, and JavaScript

Flatpickr is a light-weight, customizable JavaScript date and time picker. It lets customers choose dates (and optionally instances) from a smooth 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 functions utilizing the aspect.

2) consumer/type.css

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

h1 {
    text-align: heart; /* 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 !essential; /* Guarantee bigger spacing between filters and Key Metrics */
}

.container #key-metrics {
    margin-top: 40px !essential; /* Extra 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: heart;
    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;
    colour: #007bff;
    text-decoration: none;
    show: inline-block;
}

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

.dataTables_wrapper .dataTables_paginate .paginate_button.present {
    font-weight: daring;
    colour: #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 general 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 in step with Bootstrap’s design.

3) server/server.js

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

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

// Serve static recordsdata from the consumer listing
app.use(specific.static(path.be part of(__dirname, '..', 'consumer')));

// Path to fetch knowledge from SQLite database
app.get('/knowledge', (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;"; // Exchange '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 consequence 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, '..', 'consumer', 'index.html'));
});

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

This Node.js script accommodates 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 recordsdata (like HTML, CSS, and JS) from the consumer subfolder so the frontend hundreds within the browser.
2. Offers a /knowledge endpoint that reads from a neighborhood SQLite database (sales_data.db) and returns the whole gross sales desk as JSON, enabling dynamic knowledge visualisations and tables on the frontend.

4) consumer/script.js

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

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

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

            // Re-render charts when chart kind adjustments
            doc.getElementById('chart-type-selector').onchange = () => filterAndRenderData(knowledge);
        })
        .catch((error) => {
            // Deal with fetch error
            console.error('Error fetching knowledge:', error);
            const app = doc.getElementById('app');
            if (app) {
                app.innerHTML = "
Didn't fetch knowledge.
";
            }
        });
});

// Initialize Flatpickr date pickers and class filter
perform setupFilters(knowledge) {
    // Convert date strings to JS Date objects
    const dates = knowledge.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: perform () {
            filterAndRenderData(knowledge);
        },
    });

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

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

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

// Apply filters and replace key metrics, chart, and desk
perform filterAndRenderData(knowledge) {
    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 knowledge by date and class
    const filteredData = knowledge.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 depend, and so forth.)
perform updateKeyMetrics(knowledge) {
    const totalRevenue = knowledge.scale back((acc, merchandise) => acc + parseFloat(merchandise.whole), 0);
    const totalOrders = knowledge.size;
    const averageOrderValue = totalOrders > 0 ? totalRevenue / totalOrders : 0;

    // Calculate whole income per class to seek out prime class
    const revenueByCategory = knowledge.scale back((acc, merchandise) =>  "Uncategorized";
        accProgramming = (accProgramming , {});

    // 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 kind utilizing Chart.js
perform drawChart(knowledge, elementId, chartType) {
    const ctx = doc.getElementById(elementId).getContext('2nd');

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

    swap (chartType) {
        case 'revenueOverTime':
            // Line chart exhibiting income by order date
            chartInstance = new Chart(ctx, {
                kind: 'line',
                knowledge: {
                    labels: knowledge.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 exhibiting whole income per class
            const classes = [...new Set(data.map((item) => item.categories))];
            const revenueByCategory = classes.map((class) => {
                return {
                    class,
                    income: knowledge
                        .filter((merchandise) => merchandise.classes === class)
                        .scale back((acc, merchandise) => acc + parseFloat(merchandise.whole), 0),
                };
            });
            chartInstance = new Chart(ctx, {
                kind: 'bar',
                knowledge: {
                    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 exhibiting prime 10 merchandise by income
            const productRevenue = knowledge.scale back((acc, merchandise) => , {});

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

            chartInstance = new Chart(ctx, {
                kind: 'bar',
                knowledge: {
                    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 knowledge in a DataTable
perform populateDataTable(knowledge) {
    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({
        knowledge: knowledge.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 accessible classes
perform populateCategoryFilter(knowledge) {
    const categoryFilter = doc.getElementById('category-filter');
    categoryFilter.innerHTML = '';
    categoryFilter.appendChild(new Possibility('All Classes', 'all', true, true));

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

It’s our most intricate code file, however it has to do lots. This JavaScript file powers the interactivity and knowledge visualisation for the Gross sales Efficiency Dashboard. In brief, it …

1/ Fetches gross sales knowledge

• When the web page hundreds (DOMContentLoaded), it calls a backend API on the /knowledge endpoint.
• If no knowledge is returned, a “No knowledge accessible” 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 kind selector to modify between totally different chart visualisations.

3/ Initialises the dashboard

• Populates the class filter with accessible classes.
• Runs the primary render with the complete dataset.

4/ Applies filters and re-renders

• Every time the person adjustments a filter (date vary, class, or chart kind), it:
  • Filters the dataset by date vary and class.
  • Updates key metrics: whole income, variety of orders, common order worth, and prime income class.
  • Redraws the chosen Chart.js chart.
  • Refreshes the knowledge desk.

5/ Attracts charts with Chart.js

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

6/ Shows tabular knowledge

• 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 in step with the energetic filters.

Working our dashboard

Now that we now have 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 knowledge 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 completely purposeful, interactive gross sales efficiency dashboard utilizing core internet applied sciences—HTML, CSS, JavaScript, Node.js, Categorical, and a neighborhood 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 knowledge)
• Folder construction as proven beneath.

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

I confirmed you learn how to create and populate a SQLite database in code that we may use because the supply knowledge for our dashboard. We additionally mentioned the setting setup and each the front-end and back-end improvement processes, and briefly touched on our knowledge dashboard performance.

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