Unternehmer treffen täglich Entscheidungen, die sich auf Rentabilität, Cashflow und langfristiges Wachstum auswirken. Diese Entscheidungen werden effektiver, wenn sie auf zeitnahen, genauen Informationen basieren und nicht auf isolierten Berichten oder veraltete Tabellenkalkulationen. Ein intestine gestaltetes Geschäfts-Dashboard führt wichtige finanzielle und betriebliche Kennzahlen an einem Ort zusammen und hilft Führungskräften, potenzielle Probleme zu erkennen, bevor sie zu größeren Problemen werden.

Identifizieren Sie die Kennzahlen, die am wichtigsten sind

Ein Dashboard sollte sich auf die Indikatoren konzentrieren, die den größten Einfluss auf die Geschäftsleistung haben. Cashflow, Bruttomarge, Überalterung der Forderungen, Betriebskosten und Nettogewinn bilden eine solide finanzielle Grundlage. Betriebskennzahlen wie Lagerumschlag, Aktivität der Vertriebspipeline, Kundenbindung und Projektrentabilität können den Finanzergebnissen einen wertvollen Kontext verleihen.

Die gemeinsame Betrachtung dieser Messungen ermöglicht Geschäftsinhaber um Muster zu erkennen, die bei der Durchsicht einzelner Berichte möglicherweise nicht sichtbar sind. Steigende Umsätze können beispielsweise positiv erscheinen, bis sinkende Margen oder langsamere Kundenzahlungen einen wachsenden finanziellen Druck erkennen lassen.

Verwandeln Sie Daten in bessere Entscheidungen

Das Sammeln von Daten ist nur der erste Schritt. Ein nützliches Dashboard präsentiert Informationen in einem Format, das Traits, Ausnahmen und Leistungsänderungen leicht erkennbar macht. Durch den Vergleich der aktuellen Leistung mit historischen Ergebnissen, Budgets oder Prognosen können Führungskräfte feststellen, ob sich das Unternehmen in die richtige Richtung bewegt.

Regelmäßige Dashboard-Überprüfungen fördern zudem die proaktive Entscheidungsfindung. Anstatt auf die Finanzberichte zum Monatsende zu warten, können Eigentümer steigende Ausgaben, langsamere Einnahmen oder sinkende Rentabilität früh genug erkennen, um sinnvolle Anpassungen vorzunehmen. Organisationen können die Finanzaufsicht auch durch die Einbeziehung regelmäßiger Überprüfungen stärken Unternehmensversicherungsdienstleistungenhilft bei der Validierung von Finanzberichtsprozessen und der Identifizierung von Möglichkeiten für betriebliche Verbesserungen.

Schaffen Sie Sichtbarkeit im gesamten Unternehmen

Die finanzielle Leistung wird nicht nur durch Buchhaltungsdaten beeinflusst. Vertrieb, Betrieb, Einkauf, Kundenservice und Bestandsverwaltung tragen alle zum Gesamtgeschäftsergebnis bei. Durch die Verknüpfung dieser Funktionen durch eine zentralisierte Berichterstattung entsteht ein vollständigeres Bild der Unternehmensleistung und verringert die Wahrscheinlichkeit, dass wichtige Informationen innerhalb einzelner Abteilungen isoliert bleiben.

Ein effektives Dashboard für Geschäftsinhaber sorgt für mehr Einblick in die täglichen Abläufe und unterstützt gleichzeitig schnellere und fundiertere Entscheidungen. Wenn Finanz- und Betriebsdaten zusammenarbeiten, sind Führungskräfte besser in der Lage, blinde Flecken zu erkennen, auf veränderte Bedingungen zu reagieren und das Unternehmen langfristig mit größerem Vertrauen zu führen. Weitere Informationen finden Sie in der Infografik unten.

Dashboard für Ihre Kunden, Kunden oder Kollegen wird zu einem wesentlichen Bestandteil der Fähigkeiten, die von Softwareentwicklern, Datenwissenschaftlern, ML -Praktikern und Dateningenieuren erforderlich sind. Selbst wenn Sie hauptsächlich an der Again-Finish-Verarbeitung arbeiten, müssen die Daten, die Sie verarbeiten, normalerweise irgendwann für Benutzer „aufgetaucht“ werden. Wenn Sie Glück haben, hat Ihre Organisation möglicherweise ein engagiertes Entrance-Finish-Staff, das sich darum kümmert, aber oft wird es auf Sie liegen.

Ein direkter Python-Entwickler ohne Erfahrung in HTML, JavaScript usw. ist keine Entschuldigung mehr, wie viele Python-Bibliotheken wie Streamlit und Gradio in den letzten Jahren entstanden sind.

In diesem Artikel geht es jedoch nicht um sie, weil Ich bin Einer dieser direkten Python-Entwickler, und ich habe bereits das Strom und Gradio-Ding gemacht. Es warfare additionally an der Zeit, meine Ärmel hochzukrempeln und zu sehen, ob ich neue Fähigkeiten erlernen und ein Dashboard mit diesen alten Entrance-Finish-Entwicklungsstangen erstellen konnte: HTML, JavaScript und CSS.

Die Daten für unser Dashboard stammen aus einer lokalen SQLite -Datenbank. Ich habe a erstellt sales_data Tabelle in SQLite mit Dummy -Verkaufsdaten. Hier sind die Daten in tabellarischer Kind.

Im Folgenden finden Sie einen Code, den Sie verwenden können, um Ihre eigene SQLite -Datenbank und -tabelle mit den Daten wie gezeigt zu erstellen.

Falls Sie sich fragen, warum ich nur eine Handvoll Datensätze in meine Datenbank einfüge, liegt dies nicht daran, dass der Code große Datenvolumina verarbeiten kann. Es ist nur so, dass ich mich auf die Dashboard -Funktionalität konzentrieren wollte, anstatt von den Daten abgelenkt zu werden. Verwenden Sie das Skript, das ich unten zur Verfügung stelle, um dem Eingabedatensatz zusätzliche Datensätze hinzuzufügen, wenn Sie möchten.

Wir bleiben additionally nur ein bisschen länger in der Python -Welt, da wir programmgesteuert einen SQLite -DB aufbauen.

import sqlite3

# Outline the database title
DATABASE_NAME = "C:Customersthomatasksmy-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,
    complete REAL
);
'''

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

# Pattern knowledge 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, "Pocket book", "Stationery", 8, 48.35, 386.80),
    (4, "2013-03-09", 275, "Customer_23770", 200, "Laptop computer", "Electronics", 3, 74.85, 224.55),
    (5, "2022-04-23", 960, "Customer_23790", 210, "Cupboard", "Workplace", 6, 53.77, 322.62),
    (6, "2019-07-10", 197, "Customer_25587", 202, "Desk", "Workplace", 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 computer", "Electronics", 9, 49.33, 443.97)
)

# SQL to insert knowledge 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, complete)
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
'''

# Insert the pattern knowledge
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 -Funktionalität

Unser Dashboard hat die folgende Funktionalität.

• Schlüsselkennzahlen. Gesamtumsatz, Gesamtbestellungen, durchschnittlicher Bestellwert, obere Kategorie
• Verschiedene Diagrammtypen. Einnahmen im Laufe der Zeit (Zeilendiagramm), Umsatz nach Kategorie (Balkendiagramm), Prime -Produkte nach Umsatz (Horizontal -Balkendiagramm)
• Filterung. Nach Datum und Kategorie
• Datentabelle. Zeigen Sie unsere Datensätze in einem paginierten und durchsuchbaren Netzformat an.

Aufstellen unserer Umgebung

Als nächstes haben wir eine Reihe von Schritten, um unsere Umgebung einzurichten.

1/ node.js.

Node.js ist eine Laufzeitumgebung, mit der Sie JavaScript außerhalb des Browsers ausführen können, sodass Sie JavaScript verwenden können, um schnelle und skalierbare serverseitige Anwendungen zu erstellen.

Stellen Sie additionally sicher, dass Node.js in Ihrem System installiert ist, damit Sie einen lokalen Server ausführen und Pakete verwalten können. Sie können es von der herunterladen Offizielle Web site node.js.

2/ Erstellen Sie einen Hauptprojektordner und Unterordner

Öffnen Sie Ihren Befehlsterminal und führen Sie die folgenden Befehle aus. Ich benutze Ubuntu für mein Home windows-Field dafür, aber Sie können es für Ihr bevorzugter Befehlszeilen-Dienstprogramm und -system ändern.

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

3/ Initialise ein Knotenprojekt

$ npm init -y

Dieser Befehl erstellt automatisch einen Customary package deal.json Datei in Ihrem Projektverzeichnis, ohne die Benutzereingabe zu verlangen.

Der -y Flagge Antworten „Ja“ zu allen Eingabeaufforderungen verwenden die Standardwerte Für Felder wie:

• Identify
• Model
• Beschreibung
• hauptsächlich
• Skripte
• Autor
• Lizenz

So sah meine Paketdatei aus.

{
  "title": "my-dashboard",
  "model": "1.0.0",
  "foremost": "index.js",
  "scripts": {
    "take a look at": "echo "Error: no take a look at specified" && exit 1"
  },
  "key phrases": (),
  "writer": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "categorical": "^4.21.2",
    "sqlite3": "^5.1.7"
  }
}

4/ Installieren Sie Specific und SQLite

Sqlite ist eine leichte, dateibasierte relationale Datenbank-Engine, die alle Ihre Daten in einer einzigen tragbaren Datei speichert und die Notwendigkeit eines separaten Servers beseitigt.

Äußern ist ein minimales, flexibles Webanwendungs ​​-Framework für Node.js, das das Erstellen von APIs und Webservern durch Routing und Middleware vereinfacht.

Wir können beide mit dem folgenden Befehl installieren.

$ npm set up categorical sqlite3

Jetzt können wir unseren Code entwickeln. Für dieses Projekt benötigen wir vier Codedateien: eine Index.html -Datei, eine Server.js -Datei, eine Consumer.js -Datei und eine Skript.js -Datei.

Lassen Sie uns von jedem von ihnen Schritt für Schritt durchlaufen.

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="model.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 kind="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 kind="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">
                    <choice worth="all">All Classes</choice>
                    <!-- Choices shall 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">
                <choice worth="revenueOverTime">Income Over Time</choice>
                <choice worth="revenueByCategory">Income By Class</choice>
                <choice worth="topProducts">Prime Merchandise by Income</choice>
            </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>

Diese HTML -Datei legt die grundlegenden visuellen Elemente unseres Verkaufs -Dashboards, einschließlich interaktiver Filter für Datum und Kategorie, ein Abschnitt mit wichtigen Verkaufsmetriken, einem Dropdown -Menü zum Auswahl von Diagrammtypen und einer Tabelle für Rohdaten fest.

Bootstrap wird zum Styling verwendet. Flatpickr wird für Datumseingänge verwendet. Diagramm.js wird für Visualisierungen verwendet und DataTables wird für die tabellarische Anzeige verwendet. Die Interaktivität wird von einem externen behandelt script.js Datei, die wir in Kürze untersuchen.

Bootstrap ist ein beliebtes Entrance-Finish-Frontwork, das ursprünglich von Twitter entwickelt wurde und mit dem Sie reaktionsschnelle und visuell konsistente Webschnittstellen leichter und schneller aufbauen können.

DataTables ist ein JQuery-basiertes Plugin, das Customary-HTML-HTML erhöht Elemente und verwandeln sie in vollständig interaktive, featurereiche Tabellen.

Flatpickr ist ein leichtes, anpassbares JavaScript -Datum und -zeitpicker. Dadurch können Benutzer Daten (und optionally available Zeiten) aus einem schlanken Popup-Kalender auswählen, anstatt sie manuell zu tippen.

Chart.js ist eine einfache, aber leistungsstarke JavaScript -Bibliothek zum Erstellen interaktiver, animierter Diagramme in Webanwendungen mithilfe des -Components.

2) shopper/model.css

/* shopper/model.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 !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 stable #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 stable #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    coloration: #007bff;
    text-decoration: none;
    show: inline-block;
}

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

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

Wir verwenden ein Cascading Model Sheet (CSS), um die grundlegenden visuellen Komponenten unseres Dashboards zu stylen, z. B. Schaltfläche und Textfarben, Abstand zwischen Elementen usw.

Die Datei model.css Es ist ein sauberes, leichtes Thema mit ausreichend Abstand und Layoutanpassungen für Klarheit und Lesbarkeit. Die Datei model.csss findet auch das Erscheinungsbild der Paginationschaltflächen von DataTables an, sodass sie benutzerfreundlicher und visuell mit dem Design von Bootstrap übereinstimmen.

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:Customersthomatasksmy-dashboardsales_data.db";

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

// 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;"; // Change 'gross sales' together with your desk title
    db.all(question, (), (err, rows) => {
        if (err) {
            console.error("Error operating 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.hear(PORT, () => {
    console.log(`Server operating at http://localhost:${PORT}`);
});

Dieses Skript von Node.js enthält den JavaScript -Code, der einen grundlegenden Specific -Server einsetzt, der das Dashboard der Verkaufsleistung versorgt. Es macht zwei wichtigste Dinge:

1. Serviert statische Dateien (wie HTML, CSS und JS) aus dem Consumer -Unterordner, sodass der Frontend im Browser lädt.
2. Bietet a /Daten Endpunkt, der aus einer lokalen SQLite -Datenbank (sales_data.db) liest und die gesamte Verkaufstabelle als JSON zurückgibt, wodurch dynamische Datenvisualisierungen und -tabellen an der Frontend aktiviert werden.

4) shopper/script.js

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

// Wait till the DOM is totally loaded
doc.addEventListener('DOMContentLoaded', operate () {
    // 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 = "<p>No knowledge obtainable.</p>";
                }
                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 = "<p>Didn't fetch knowledge.</p>";
            }
        });
});

// Initialize Flatpickr date pickers and class filter
operate 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: operate () {
            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: operate () {
            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
operate initializeDashboard(knowledge) {
    populateCategoryFilter(knowledge);     // Populate class dropdown
    filterAndRenderData(knowledge);       // Preliminary render with all knowledge
}

// Apply filters and replace key metrics, chart, and desk
operate 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) =>  merchandise.classes === selectedCategory)
        );
    );

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

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

    // Calculate complete income per class to seek out high class
    const revenueByCategory = knowledge.cut back((acc, merchandise) => , {});

    // Decide class with highest complete income
    const topCategory = Object.keys(revenueByCategory).cut 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
operate drawChart(knowledge, elementId, chartType) {
    const ctx = doc.getElementById(elementId).getContext('second');

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

    swap (chartType) {
        case 'revenueOverTime':
            // Line chart displaying income by order date
            chartInstance = new Chart(ctx, {
                kind: 'line',
                knowledge: {
                    labels: knowledge.map((merchandise) => merchandise.order_date),
                    datasets: ({
                        label: 'Income Over Time',
                        knowledge: knowledge.map((merchandise) => parseFloat(merchandise.complete)),
                        fill: false,
                        borderColor: 'rgb(75, 192, 192)',
                        stress: 0.1,
                    }),
                },
                choices: {
                    scales: {
                        y: { beginAtZero: true },
                    },
                },
            });
            break;

        case 'revenueByCategory':
            // Bar chart displaying complete income per class
            const classes = (...new Set(knowledge.map((merchandise) => merchandise.classes)));
            const revenueByCategory = classes.map((class) => {
                return {
                    class,
                    income: knowledge
                        .filter((merchandise) => merchandise.classes === class)
                        .cut back((acc, merchandise) => acc + parseFloat(merchandise.complete), 0),
                };
            });
            chartInstance = new Chart(ctx, {
                kind: 'bar',
                knowledge: {
                    labels: revenueByCategory.map((merchandise) => merchandise.class),
                    datasets: ({
                        label: 'Income by Class',
                        knowledge: revenueByCategory.map((merchandise) => merchandise.income),
                        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 = knowledge.cut back((acc, merchandise) =>  'Unknown Product';
                acc(productName) = (acc(productName) , {});

            const topProducts = Object.entries(productRevenue)
                .type((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: 'Prime Merchandise by Income',
                        knowledge: topProducts.map((merchandise) => merchandise(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
operate populateDataTable(knowledge) {
    const tableElement = $('#data-table');

    // Destroy present 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) => (
            merchandise.order_id,
            merchandise.order_date,
            merchandise.customer_id,
            merchandise.product_names,
            merchandise.classes,
            `$${parseFloat(merchandise.complete).toFixed(2)}`,
        )),
        columns: (
            { title: "Order ID" },
            { title: "Order Date" },
            { title: "Buyer ID" },
            { title: "Product" },
            { title: "Class" },
            { title: "Complete" },
        ),
    });
}

// Populate the class filter dropdown with obtainable classes
operate 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));
    });
}

Es ist unsere komplizierteste Codedatei, aber sie muss viel tun. Diese JavaScript -Datei versorgt die Interaktivität und Datenvisualisierung für das Dashboard der Verkaufsleistung. Kurz gesagt, es …

1/ holt Verkaufsdaten ab

• Wenn die Seite geladen wird (DOMContentLoaded), es ruft eine Backend -API am /Datenendpunkt auf.
• Wenn keine Daten zurückgegeben werden, wird eine Meldung „Keine Daten verfügbar“ angezeigt.

2/ Einrichten Filter

• Verwendung Flatpickr Datumspicker auswählen ein Begin- und Enddatum basierend auf den Min/Max -Bestelldaten des Datensatzes.
• Fügt a hinzu Kategorie Dropdown, sodass Benutzer dazu führen können Filter nach Produktkategorie.
• Fügt a hinzu Diagramm -Selektor Um zwischen verschiedenen Diagramm -Visualisierungen zu wechseln.

3/ initialisiert das Armaturenbrett

• Populiert den Kategoriefilter mit verfügbaren Kategorien.
• Fährt den ersten Render mit dem vollständigen Datensatz aus.

4/ Angewendet Filter und Wiederherstellungen

• Jedes Mal, wenn der Benutzer einen Filter ändert (Datumsbereich, Kategorie oder Diagrammtyp), ist er:
  • Filtert den Datensatz nach Datumsbereich und Kategorie.
  • Aktualisierungen Schlüsselkennzahlen: Gesamtumsatz, Anzahl der Bestellungen, durchschnittlicher Bestellwert und Prime -Umsatzkategorie.
  • Zeichnet die ausgewählten neu Diagramm.JS -Diagramm.
  • Erfrischt die Datentabelle.

5/ zeichnet Diagramme mit Diagramm.js

• Einnahmen im Laufe der Zeit → Zeilendiagramm mit den Umsatztrends nach Datum.
• Einnahmen nach Kategorie → Balkendiagramm aggregiert den Gesamtumsatz professional Kategorie.
• Prime -Produkte → Horizontales Balkendiagramm mit den Prime 10 Produkten nach Einnahmen.

6/ zeigt Tabellaten an

• Verwendung DataTables (ein JQuery -Plugin) eine Tabelle mit gefilterten Bestellungen machen, Mit Spalten für Bestell -ID, Datum, Kunden -ID, Produkt, Kategorie und Gesamt.

7/ die Benutzeroberfläche synchronisiert halten

• Zerstört und erstellt Charts/Tabellen, wenn sich Filter ändern, um Duplikate zu vermeiden.
• Hält Metriken, Diagramme und Tabellen im Einklang mit den aktiven Filtern.

Ausführen unseres Armaturenbretts

Jetzt, da wir alle unseren Code sortiert haben, ist es Zeit, das Dashboard auszuführen. Gehen Sie additionally zur Server Unterordner und geben Sie den folgenden Befehl ein.

$ node server.js

Sie erhalten eine Antwort auf den obigen Befehl, so etwas wie,

Server operating at http://localhost:3000

Öffnen Sie einen Webbrowser und besuchen Sie http: // localhost: 3000. Sie sollten sehen, wie Ihr Dashboard mit Daten aus der SQLite -Datenbank besiedelt ist, wie im Bild unten gezeigt.

Alle Filter, Diagrammauswahl usw. sollten wie angekündigt funktionieren.

Zusammenfassung

In diesem Artikel habe ich Sie durch das Erstellen eines voll funktionsfähigen, interaktiven Verkaufsleistungs -Dashboards mit Core Internet Applied sciences – HTML, CSS, JavaScript, Node.js, Specific und einer lokalen SQLite -Datenbank erstellt.

Wir haben den Tech Stack & Setup besprochen. dh

• Backend: Node.js, Specific, SQLite
• Frontend: HTML, Bootstrap (für Format), Diagramm.js (für Diagramme), Flatpickr (Datumspicker), Datentables (für tabellarische Daten)
• Ordnerstruktur wie unten gezeigt.

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

Ich habe Ihnen gezeigt, wie Sie eine SQLite -Datenbank in Code erstellen und füllen können, die wir als Quelldaten für unser Dashboard verwenden können. Wir haben auch das Umgebungsaufbau und sowohl die Entrance-Finish- als auch die Again-Finish-Entwicklungsprozesse erörtert und unsere Daten-Dashboard-Funktionalität kurz angesprochen.

Schließlich habe ich Sie durchgebracht und die vier Codedateien, die wir erstellen mussten, im Element erläutert, und zeigte Ihnen dann, wie Sie das Dashboard in einem Browser ausführen.

app = sprint.Sprint(__name__, external_stylesheets=(dbc.themes.BOOTSTRAP))


app.format = dbc.Container((
   dbc.Row((
       dbc.Col((
           html.H1(" Superior Monetary Dashboard", className="text-center mb-4"),
           html.P(f"Interactive dashboard with {len(df)} information factors throughout {len(stock_names)} shares",
                  className="text-center text-muted"),
           html.Hr()
       ))
   )),
  
   dbc.Row((
       dbc.Col((
           dbc.Card((
               dbc.CardBody((
                   html.H5(" Dashboard Controls", className="card-title"),
                  
                   html.Label("Choose Shares:", className="fw-bold mt-3"),
                   dcc.Dropdown(
                       id='stock-dropdown',
                       choices=({'label': f'{inventory} ({base_prices(inventory)})', 'worth': inventory}
                               for inventory in stock_names),
                       worth=('AAPL', 'GOOGL'), 
                       multi=True,
                       placeholder="Select shares to research..."
                   ),
                  
                   html.Label("Date Vary:", className="fw-bold mt-3"),
                   dcc.DatePickerRange(
                       id='date-picker-range',
                       start_date="2023-06-01",
                       end_date="2024-06-01",
                       display_format="YYYY-MM-DD",
                       fashion={'width': '100%'}
                   ),
                  
                   html.Label("Chart Type:", className="fw-bold mt-3"),
                   dcc.RadioItems(
                       id='chart-type',
                       choices=(
                           {'label': ' Line Chart', 'worth': 'line'},
                           {'label': ' Space Chart', 'worth': 'space'},
                           {'label': ' Scatter Plot', 'worth': 'scatter'}
                       ),
                       worth="line",
                       labelStyle={'show': 'block', 'margin': '5px'}
                   ),
                  
                   dbc.Guidelines(
                       id='show-ma',
                       choices=({'label': ' Present Shifting Common', 'worth': 'present'}),
                       worth=(),
                       fashion={'margin': '10px 0'}
                   ),
               ))
           ), className="h-100")
       ), width=3),
      
       dbc.Col((
           dbc.Card((
               dbc.CardHeader(" Inventory Value Evaluation"),
               dbc.CardBody((
                   dcc.Graph(id='main-chart', fashion={'top': '450px'})
               ))
           ))
       ), width=9)
   ), className="mb-4"),
  
   dbc.Row((
       dbc.Col((
           dbc.Card((
               dbc.CardBody((
                   html.H4(id="avg-price", className="text-primary mb-0"),
                   html.Small("Common Value", className="text-muted")
               ))
           ))
       ), width=3),
       dbc.Col((
           dbc.Card((
               dbc.CardBody((
                   html.H4(id="total-volume", className="text-success mb-0"),
                   html.Small("Complete Quantity", className="text-muted")
               ))
           ))
       ), width=3),
       dbc.Col((
           dbc.Card((
               dbc.CardBody((
                   html.H4(id="price-range", className="text-info mb-0"),
                   html.Small("Value Vary", className="text-muted")
               ))
           ))
       ), width=3),
       dbc.Col((
           dbc.Card((
               dbc.CardBody((
                   html.H4(id="data-points", className="text-warning mb-0"),
                   html.Small("Information Factors", className="text-muted")
               ))
           ))
       ), width=3)
   ), className="mb-4"),
  
   dbc.Row((
       dbc.Col((
           dbc.Card((
               dbc.CardHeader(" Buying and selling Quantity"),
               dbc.CardBody((
                   dcc.Graph(id='volume-chart', fashion={'top': '300px'})
               ))
           ))
       ), width=6),
       dbc.Col((
           dbc.Card((
               dbc.CardHeader(" Returns Distribution"),
               dbc.CardBody((
                   dcc.Graph(id='returns-chart', fashion={'top': '300px'})
               ))
           ))
       ), width=6)
   ), className="mb-4"),
  
   dbc.Row((
       dbc.Col((
           dbc.Card((
               dbc.CardHeader(" Newest Inventory Information"),
               dbc.CardBody((
                   dash_table.DataTable(
                       id='data-table',
                       columns=(
                           {'title': 'Inventory', 'id': 'Inventory'},
                           {'title': 'Date', 'id': 'Date'},
                           {'title': 'Value ($)', 'id': 'Value', 'kind': 'numeric',
                            'format': {'specifier': '.2f'}},
                           {'title': 'Quantity', 'id': 'Quantity', 'kind': 'numeric',
                            'format': {'specifier': ',.0f'}},
                           {'title': 'Every day Return (%)', 'id': 'Returns', 'kind': 'numeric',
                            'format': {'specifier': '.2%'}}
                       ),
                       style_cell={'textAlign': 'middle', 'fontSize': '14px', 'padding': '10px'},
                       style_header={'backgroundColor': 'rgb(230, 230, 230)', 'fontWeight': 'daring'},
                       style_data_conditional=(
                           {
                               'if': {'filter_query': '{Returns} > 0'},
                               'backgroundColor': '#d4edda'
                           },
                           {
                               'if': {'filter_query': '{Returns} < 0'},
                               'backgroundColor': '#f8d7da'
                           }
                       ),
                       page_size=15,
                       sort_action="native",
                       filter_action="native"
                   )
               ))
           ))
       ))
   ))
), fluid=True)

Bild von Editor | Chatgpt

# Einführung

Daten sind die wichtigste Ressource eines Unternehmens, und Einblicke aus Daten könnten den Unterschied zwischen Gewinn und Misserfolg ausmachen. Rohdaten sind jedoch schwer zu verstehen, daher visualisieren wir sie in Dashboards, sodass nichttechnische Menschen sich besser navigieren können.

Das Erstellen eines Armaturenbretts ist nicht einfach, insbesondere bei der Arbeit mit JSON -Daten. Glücklicherweise können viele Python -Bibliotheken kombiniert werden, um ein hilfreiches Software zu erstellen.

In diesem Artikel lernen wir, wie Sie ein Dashboard mit Streamlit und Plotly entwickeln, um Duckdb -Abfragen zu Daten aus einer JSON -Datei zu visualisieren.

Neugierig? Lassen Sie uns darauf eingehen.

# Dashboard -Entwicklung

Lassen Sie uns vor der Entwicklung unseres Dashboard ein wenig über die Instruments lernen, die wir verwenden werden.

Zunächst ist JSON oder JavaScript-Objektnotation ein textbasiertes Format zum Speichern und Übertragen von Daten mithilfe von Schlüsselwertpaaren und -Arrays. Es ist ein häufig verwendetes Format für APIs und Datenaustausch zwischen Systemen.

Nächste, Duckdb ist ein Open-Supply-RDBMS (Relational Database Administration System) für analytische Workloads. Es handelt sich um eine SQL-Datenbank (On-line Analytical Processing) in Course of, die direkt im Python-Prozess ausgeführt wird, ohne dass ein separater Server verwaltet werden muss. Es ist auch für die schnelle Ausführung optimiert, best für die Datenanalyse mit großen Datensätzen.

Straffung wird oft für die Dashboardentwicklung verwendet. Es ist ein Open-Supply-Framework für die Entwicklung interaktiver Daten-Webanwendungen mithilfe von Python. Um das Dashboard zu entwickeln, müssen wir HTML, CSS oder JavaScript nicht verstehen.

Wir werden auch verwenden Pandaseine leistungsstarke Bibliothek für Datenmanipulation und -analyse in Python.

Schließlich, Handlung ist eine Open-Supply-Bibliothek zur Entwicklung interaktiver Diagramme und Diagramme. Es kann in das Dashboard -Entwicklungsbibliotheken wie Streamlit integriert werden.

Das ist die grundlegende Erklärung der Instruments, die wir verwenden werden. Beginnen wir mit der Entwicklung unseres JSON -Dashboards. Wir werden die folgende Struktur verwenden. Versuchen Sie additionally, sie wie folgt zu erstellen.

JSON_Dashboard/
├── information/
│   └── pattern.json
├── app.py
└── necessities.txt

Füllen wir als nächstes die Dateien mit allen erforderlichen Informationen aus. Lassen Sie uns zunächst unsere JSON -Beispieldaten wie die folgenden haben. Sie können immer Ihre eigenen Daten verwenden, aber hier ist ein Beispiel, das Sie verwenden können.

(
  {"id": 1, "class": "Electronics", "area": "North", "gross sales": 100, "revenue": 23.5, "date": "2024-01-15"},
  {"id": 2, "class": "Furnishings", "area": "South", "gross sales": 150, "revenue": 45.0, "date": "2024-01-18"},
  {"id": 3, "class": "Electronics", "area": "East", "gross sales": 70, "revenue": 12.3, "date": "2024-01-20"},
  {"id": 4, "class": "Clothes", "area": "West", "gross sales": 220, "revenue": 67.8, "date": "2024-01-25"},
  {"id": 5, "class": "Furnishings", "area": "North", "gross sales": 130, "revenue": 38.0, "date": "2024-02-01"},
  {"id": 6, "class": "Clothes", "area": "South", "gross sales": 180, "revenue": 55.2, "date": "2024-02-05"},
  {"id": 7, "class": "Electronics", "area": "West", "gross sales": 90, "revenue": 19.8, "date": "2024-02-10"},
  {"id": 8, "class": "Furnishings", "area": "East", "gross sales": 160, "revenue": 47.1, "date": "2024-02-12"},
  {"id": 9, "class": "Clothes", "area": "North", "gross sales": 200, "revenue": 62.5, "date": "2024-02-15"},
  {"id": 10, "class": "Electronics", "area": "South", "gross sales": 110, "revenue": 30.0, "date": "2024-02-20"}
)

Als nächstes werden wir die füllen necessities.txt Datei mit den Bibliotheken, die wir für unsere Dashboard -Entwicklung verwenden.

streamlit
duckdb
pandas
plotly

Führen Sie dann den folgenden Code aus, um die erforderlichen Bibliotheken zu installieren. Es wird empfohlen, eine virtuelle Umgebung bei der Einrichtung der Umgebung zu nutzen.

pip set up -r necessities.txt

Sobald alles fertig ist, werden wir unser Dashboard entwickeln. Wir werden den Anwendungscode schrittweise untersuchen, damit Sie der Logik befolgen können.

Beginnen wir zunächst die erforderlichen Bibliotheken für unser Dashboard importieren.

import streamlit as st
import duckdb
import pandas as pd
import plotly.specific as px

Als nächstes werden wir die Verbindung einrichten, die wir brauchen, um sich zu duckdb zu machen.

@st.cache_resource
def get_conn():
    return duckdb.join()

Der obige Code wird die Duckdb -Verbindung zwischengespeichert, sodass das Streamlit -Dashboard bei der Wiederholung des Dashboards nicht wieder verbunden werden muss, was eine Leistungsverzögerung vermeidet.

Anschließend bereiten wir den Code vor, um die JSON -Daten mit dem folgenden Code zu lesen.

@st.cache_data
def load_data(path):
    df = pd.read_json(path, convert_dates=("date"))
    return df

Im obigen Code transformieren wir die JSON -Datei in ein Pandas DataFrame und zwischen den Daten zwischenstrahlen, damit wir sie nicht erneut lesen müssen, wenn sich der Filter ändert.

Nachdem das Laden und die Verbindung der Daten fertig sind, stellen wir eine Verbindung zu Duckdb her, um die JSON -Daten zu speichern. Sie können jederzeit den Datenort und den Tabellennamen ändern.

conn = get_conn()
df_full = load_data("information/pattern.json")
conn.execute("CREATE OR REPLACE TABLE gross sales AS SELECT * FROM df_full")

Im obigen Code registrieren wir die DataFrame als SQL -Tabelle benannt gross sales Inside Duckdb. Die Tabelle wird in jedem Wiederholungsverkauf aus dem Speicher aktualisiert, da wir keine Persistenz in einem separaten Skript einrichten.

Das ist alles für das Backend; Bereiten wir das stromlitische Dashboard vor. Bereiten wir zunächst den Dashboard -Titel und die Seitenleistenfilter vor.

st.title("From JSON to Dashboard: DuckDB SQL Visualizer")

st.sidebar.header("Filter Choices")
class = st.sidebar.multiselect("Choose Class:", df_full('class').distinctive())
area = st.sidebar.multiselect("Choose Area:", df_full('area').distinctive())
date_range = st.sidebar.date_input("Choose Date Vary:", (df_full('date').min(), df_full('date').max()))

Die obige Seitenleiste wird zu einem dynamischen Filter für die geladenen Daten, bei denen wir die SQL -Abfrage basierend auf diesen Filtern ändern können.

Wir erstellen dann die SQL -Abfrage gemäß den Filtern mit dem folgenden Code.

question = "SELECT * FROM gross sales WHERE TRUE"
if class:
    question += f" AND class IN {tuple(class)}"
if area:
    question += f" AND area IN {tuple(area)}"
question += f" AND date BETWEEN '{date_range(0)}' AND '{date_range(1)}'"

Die obige Abfrage ist dynamisch auf der Grundlage der Auswahl des Benutzers erstellt. Wir beginnen mit einem WHERE TRUE Bedingung zur Vereinfachung der Anhänge zusätzliche Filter mit AND.

Mit der Abfragegenerierung werden wir die Abfrage und die resultierenden Daten mit dem folgenden Code zeigen.

st.subheader("Generated SQL Question")
st.code(question, language="sql")

df = conn.execute(question).df()
st.subheader(f"Question Outcomes: {len(df)} rows")
st.dataframe(df)

Der obige Code zeigt die SQL -Abfrage zum Abrufen von Daten aus Duckdb und konvertiert das Ergebnis in ein Pandas DataFrame zum Anzeigen der gefilterten Tabelle.

Zuletzt werden wir die Plotly -Visualisierungen anhand der gefilterten Daten vorbereiten.

if not df.empty:
    col1, col2 = st.columns(2)

    with col1:
        st.markdown("### Scatter Plot: Gross sales vs Revenue by Area")
        scatter_fig = px.scatter(df, x="gross sales", y="revenue", colour="area", hover_data=("class", "date"))
        st.plotly_chart(scatter_fig, use_container_width=True)

    with col2:
        st.markdown("### Bar Chart: Whole Gross sales by Class")
        bar_fig = px.bar(df.groupby("class", as_index=False)("gross sales").sum(), x="class", y="gross sales", text_auto=True)
        st.plotly_chart(bar_fig, use_container_width=True)

    st.markdown("### Line Chart: Each day Gross sales Development")
    line_fig = px.line(df.groupby("date", as_index=False)("gross sales").sum(), x="date", y="gross sales")
    st.plotly_chart(line_fig, use_container_width=True)
else:
    st.warning("No information discovered for the chosen filters.")

Im obigen Code erstellen wir drei verschiedene Diagramme: ein Streudiagramm, ein Balkendiagramm und ein Zeilendiagramm. Sie können den Diagrammtyp jederzeit entsprechend Ihren Anforderungen wechseln.

Mit all dem Code werden wir den folgenden Befehl ausführen, um unser Streamlit -Dashboard zu starten.

Sie können jetzt auf das Dashboard zugreifen, das wie das Bild unten aussieht.

Die Diagramme sehen wie das Bild unten aus.

Da die Visualisierungen Plotly verwenden, können Sie sie interaktiv navigieren, wie in der folgenden Zeilenkarte gezeigt.

Das ist alles, was Sie wissen müssen. Sie können dem Dashboard immer mehr Komplexität verleihen und es sogar in Ihrem Unternehmen einsetzen.

# Abschluss

Daten sind die wertvollste Ressource, die ein Unternehmen haben kann, und die Visualisierung in einem Dashboard ist eine Möglichkeit für Geschäftsleute, Einblicke zu gewinnen. In diesem Artikel haben wir gelernt, wie man ein einfaches Dashboard mit Strom und Handlung entwickelt und gleichzeitig eine Verbindung zu Daten aus einer in Duckdb gespeicherten JSON -Datei herstellt.

Ich hoffe das hat geholfen!

Cornellius Yudha Wijaya ist ein Knowledge Science Assistant Supervisor und Datenautor. Während er in Vollzeit bei Allianz Indonesien arbeitet, liebt er es, Python- und Datentipps über soziale Medien und das Schreiben von Medien zu teilen. Cornellius schreibt über eine Vielzahl von KI- und maschinellen Lernthemen.

Bild von Editor | Chatgpt

# Einführung

Ein Google Sheets Dashboard ist eine leistungsstarke Möglichkeit, den Projektfortschritt zu visualisieren, Aufgaben zu vergleichen und schnell etwas Ernstes zu identifizieren, das Ihre Aufmerksamkeit erfordern. Sie können Ihre Arbeit problemlos priorisieren, Engpässe verfolgen und in Echtzeit Maßnahmen ergreifen. Wenn Sie Google Sheets -Dashboards mit Ressourcen wie Google Analytics, Salesforce oder GitHub verknüpfen, können sich Ihre Dashboards effektiv aktualisieren, wenn die Daten geändert oder geändert werden.

In diesem Artikel werde ich Sie mit dem Erstellen eines grundlegenden Dashboards mit Google Sheets nutzen.

# Warum sollten Sie ein Dashboard für Ihre Google -Blätter in Betracht ziehen?

Ein Google Sheets Dashboard ist ein sehr nützliches Device, mit dem Sie Daten auf verschiedenen Plattformen visualisieren und verfolgen können. Durch einfaches Klicken auf einen Botton können Sie Daten aus verschiedenen Tabellen zusammenbringen, um Daten in Diagrammen, Tabellen und Grafiken anzuzeigen, damit wir unser Geschäft oder Projekt analysieren können.

Sie können sogar Warnungen erstellen, die automatisch verschickt werden, damit Sie Änderungen an den Dashboards im Auge behalten und beobachten können, ob sich Developments entwickeln, die möglicherweise Korrekturmaßnahmen erfordern.

Das Erstellen eines funktionalen und visuell attraktiven Dashboards in Google Sheets besteht aus einigen einfachen Schritten. Schauen wir sie uns jetzt an.

# 1. Importieren und Organisieren Ihrer Daten

Beginnen Sie damit, Ihre Daten in einem klaren, tabellarischen Format zu organisieren. Um loszulegen, verwenden wir einen Blumenverkaufsdummy -Datensatz. Um es zu bekommen, können Sie kopieren Diese Blattvorlage mit der bereits enthaltenen Datenbank (und der Lösung!).

Falls Sie eine andere Datenquelle verwenden möchten, können Sie eine CSV -Datei problemlos hochladen oder Google Sheet mit ihren Anschlüssen mit einer bestimmten Datenquelle anschließen. Sobald die Daten in unserer Umgebung sind, gibt es einige Tipps zu beachten:

• Stellen Sie sicher, dass Ihre Daten sauber und konsistent sind (z. B. keine leeren Zellen oder gemischten Formate).
• Verwenden Sie die Datenvalidierung, um Dropdowns für Kategorien oder Standing zu erstellen
• Fügen Sie eine Zeitstempelspalte hinzu, wenn Sie vorhaben, Developments im Laufe der Zeit zu verfolgen

# 2. Generieren Sie ein Diagramm

Sobald Ihre Daten fertig sind, markieren Sie den Teil, den Sie analysieren möchten, und navigieren Sie zum Einfügen und dann zum Diagramm. Google Sheets fügt ein Diagramm auf Ihr Blatt ein, zunächst als leere Leinwand.

Sie arbeiten mit zwei Hauptregisterkarten, um Ihr Diagramm zu konfigurieren:

• Setup: Wo Sie den Diagrammtyp (z. B. Zeile, Balken, Kuchen) auswählen und den Datenbereich definieren. Stellen Sie sicher, dass Sie alle notwendigen Spalten einbeziehen, die Ihre Achsen oder Variablen darstellen.
• Anpassen: Wo Sie das Erscheinungsbild, die Beschriftungen, die Farben und das Format so anpassen, dass Sie Ihren Stil- oder Berichtsanforderungen entsprechen. Verwenden Sie diesen Abschnitt, um Ihr Diagramm für Klarheit, Lesbarkeit und Auswirkungen zu maßnen.

Denken Sie daran: Die Anzahl der Spalten, die Sie in Ihren Datenbereich aufnehmen, bestimmt, wie viele Abmessungen (z. B. Achsen x und y) Ihr Diagramm angezeigt werden können.

Screenshot von Google Sheets

// 2.1 Scorecards oder Messdiagramme

Scorecards eignen sich perfekt zum Hervorheben von wichtigen Leistungsindikatoren (KPIs) oder Einzelwertmetriken wie Gesamtumsatz oder Durchschnittsrabatt.

Um eines zu erstellen, können Sie zunächst ein neues Diagramm einfügen und den Scorecard -Diagramm -Typ auswählen.

Gehen Sie dann zur Registerkarte „Setup“ und definieren Sie den Datenbereich, die Ordertotal -Spalte, um den Gesamtumsatz anzuzeigen.

Danach erscheint eine einfache Scorecard sofort. Als nächstes können Sie es dann auf der Registerkarte „Anpassen“ anpassen:

• Passen Sie die Skala an. Wir werden Millionen für dieses Beispiel auswählen.
• Fügen Sie ein Präfix oder Suffix hinzu.
• Legen Sie einen Titel fest, z. B. „Umsatzerlöse“, und richten Sie sowohl den Titel als auch den Metrikwert auf das Zentrum aus.

So könnte die letzte Scorecard aussehen:

Sie können diesen Vorgang wiederholen, um andere KPIs anzuzeigen:

1. Gesamteinheiten verkauft durch Summieren der Menge der Menge Spalte
2. Durchschnittlicher Rabatt durch Berechnung des Durchschnitts der Rabattspalte

Diese Scorecards geben eine schnelle Zusammenfassung Ihrer wichtigsten Metriken mit einer Glanzübersicht.

// 2.2 Zeilendiagramme

Zeilendiagramme sind superb für die Verfolgung von Developments und Änderungen im Laufe der Zeit. Um einen zu erstellen:

• Fügen Sie ein neues Diagramm ein und wählen Sie den Zeilendiagrammtyp aus
• Wählen Sie auf der Registerkarte „Setup“ zwei Datenbereiche, eine für die X-Achse (wie die Zeit- oder Datumsspalte) und eine für die Y-Achse (wie die Gesamtbestellungen oder Umsatzerlöse)

Mit diesem Setup können Sie sich vorstellen, wie sich Ihre Metrik im Laufe der Zeit entwickelt. Fügen Sie einen beschreibenden Titel wie zeitliche Entwicklung der Einnahmen hinzu, um das Diagramm leicht zu interpretieren. Nach der Konfiguration sollte Ihr Diagramm den Umsatztrend in Ihrem ausgewählten Zeitraum deutlich anzeigen. Hier ist mein Endergebnis:

// 2,3 Bar- und Spaltendiagramme

Balken- und Spaltendiagramme sind die beste Choice, um Werte über verschiedene Kategorien hinweg zu vergleichen. In diesem Beispiel möchten wir feststellen, welche Produktkategorien die höchsten durchschnittlichen Rabatte bieten:

• Fügen Sie ein neues Diagramm ein und wählen Sie den Balkendiagetyp aus.
• Wählen Sie auf der Registerkarte „Setup“ zwei Datenbereiche. Eine für die Kategorieachse (Produktkategorie). Eine andere für die Wertachse (Rabattspalte, unter Verwendung der durchschnittlichen Aggregation)
• Passen Sie das Diagramm an, indem Sie jedem Balken unterschiedliche Farben zuweisen, um die visuelle Klarheit zu verbessern.

// 2,4 Bar- und Spaltendiagramme

Kreisdiagramme sind nützlich, um Proportionen anzuzeigen und zu verstehen, wie unterschiedliche Teile zu einem Ganzen beitragen. In diesem Fall visualisieren wir die Umsatzverteilung nach Produktkategorie:

1. Fügen Sie ein neues Diagramm ein und wählen Sie den Kreisdiagramm -Typ.
2. Wählen Sie auf der Registerkarte „Setup“ die entsprechenden Datenbereiche aus. Eine für die Kategorien (wie Produktkategorie), eine andere für die Werte (wie Gesamtumsatz professional Kategorie)
3. Passen Sie das Diagramm an, indem Sie jedem Slice unterschiedliche Farben zuweisen, um eine bessere Lesbarkeit zu erhalten.

Dies erzeugt eine klare, proportionale Einnahme von Einnahmen über Kategorien hinweg und hilft Ihnen, schnell zu erkennen, welche Segmente das meiste Einkommen erzielen.

Jetzt haben wir alle unsere Diagramme! Wir sind kurz davor, die endgültige Model unseres Dashboards zu erhalten. Der nächste natürliche Schritt besteht additionally darin, dass Benutzer auswählen können, welche Daten zu sehen sind und dazu führen.

# 3.. Hinzufügen von Slicern zum Filtern von Daten

Um Flexibilität und dynamischen Zugriff auf Ihr Dashboard zu bieten, wenn die Datenmenge wächst, können Sie Slicer nutzen. Slicer sind interaktive Filter, mit denen Benutzer ihre eigenen spezifischen Filter basierend auf bestimmten Spalten erstellen können.

Gehen Sie zunächst zu Daten und wählen Sie die Choice Slicer hinzufügen.

Wählen Sie dann Ihren gesamten Datensatz als Slicer -Bereich aus und wählen Sie die Spalte aus, die der Slicer nach (wie Area, Produktkategorie oder Datum) filtern soll.

Der Slicer filtert automatisch alle Dashboards, Diagramme und Visualisierungen, die anhand der von den Benutzer ausgewählten Werten angeschlossen sind.

In unserem Beispiel werden wir zwei aktivierbare Slicer hinzufügen, die es uns ermöglichen, gefilterte Dashboards zu erstellen, einen für OrderType und das andere für ProductCategory, um einen leichteren Datensatz zu erforschen.

# 4. Generieren Sie ein Dashboard mit mehreren Diagrammen

Nachdem Sie Ihre Diagramme erstellt und aktivierbare Slicer erstellt haben, werden wir alles für ein letztes Dashboard zusammenstellen. Um dies zu tun, müssen wir:

• Erstellen Sie ein weiteres Blatt für Ihr Dashboard
• Geben Sie oben auf dem neuen Blatt einen klaren Titel ein, um den Inhalt des Dashboards zusammenzufassen
• Organisieren und gruppieren Sie Ihre Visualisierungen in ähnliche oder verwandte Abschnitte
• Richten Sie Ihre Diagramme aus und schneiden Sie zusammen, um ein einigermaßen ordentliches und professionelles Dashboard zu erhalten

Mit nur wenigen Format-Optimierungen verwandeln Sie eine Sammlung von Diagrammen in ein interaktives, leicht zu lesenes Dashboard, das für Entscheidungsfindung und Präsentation bereit ist.

# Abschluss

Google Sheets bietet eine vielseitige und zugängliche Möglichkeit, Dashboards zu erstellen, mit denen Sie die Leistung verfolgen, Developments erkunden und datengesteuerte Entscheidungen treffen können, ohne Ihren Browser zu verlassen.

Wenn Sie diesem Leitfaden folgen, haben Sie gelernt, Ihre Daten effektiv zu strukturieren und zu importieren. Erstellen Sie verschiedene Arten von Diagrammen für verschiedene Erkenntnisse; Fügen Sie Interaktivität durch Slicer hinzu; und entwerfen Sie ein poliertes, professionelles Dashboard -Format.

Unabhängig davon, ob Sie Projekte verwalten, Verkäufe verfolgen oder KPIs überwachen, können Google Sheets-Dashboards zu Ihrem Anlaufwerk für Echtzeit-Erkenntnisse werden, ohne Codierung erforderlich.

Josep Ferrer ist ein Analyseingenieur aus Barcelona. Er absolvierte das Physik -Engineering und arbeitet derzeit im Bereich Information Science, der für die menschliche Mobilität angewendet wurde. Er ist ein Teilzeit-Inhaltsersteller, der sich auf Datenwissenschaft und -technologie konzentriert. Josep schreibt über alle Dinge KI und deckt die Anwendung der laufenden Explosion vor Ort ab.

Warst du jemals in einer Scenario festgefahren, in der du einen riesigen Datensatz hast und wolltest Einblicke davon? Klingt beängstigend, oder? Nützliche Erkenntnisse zu erhalten, insbesondere aus einem riesigen Datensatz, ist eine große Bestellung. Stellen Sie sich vor, Sie verwandeln Ihren Datensatz in eine interaktive Webanwendung ohne Frontend -Experience für die Datenvisualisierung. Gradio bietet diese Funktionalität mit minimaler Codierung, wenn sie neben Python verwendet wird. Die Datenvisualisierung ist ein leistungsstarkes Instrument, um Datenerblicke effektiv zu präsentieren. In diesem Leitfaden werden wir untersuchen, wie moderne interaktive Daten -Dashboards erstellt werden, wobei der Schwerpunkt auf der Visualisierung von Gradio -Daten und der Erstellung einer GUI mit Python liegt. Fangen wir an.

Gradio verstehen

Gradio ist eine Open-Supply-Python-Bibliothek zum Erstellen webbasierter Schnittstellen. Es wurde speziell für die Vereinfachung der Entwicklung von Benutzeroberflächen für die Bereitstellung maschineller Lernmodelle und Datenanwendungen erstellt. Sie benötigen keinen umfangreichen Hintergrund in Internet -Technologien wie HTML, JavaScript und CSS. Gradio kümmert sich intern um alle Komplexitäten und andere Dinge. Auf diese Weise können Sie sich nur auf den Python -Code konzentrieren.

Gradio gegen stromlit

Streamlit und Gradio ermöglichen beide die Entwicklung von Webanwendungen mit minimalen Codezeilen. Sie unterscheiden sich beide völlig voneinander. Das Verständnis der Unterschiede kann daher helfen, das richtige Framework für das Erstellen von Webanwendungen auszuwählen.

Beide Instruments können verwendet werden, um interaktive Dashboards zu erstellen. Die Wahl von einem hängt von den spezifischen Anforderungen des Projekts ab.

Mehr lesen: Gradio gegen stromlit detaillierter Vergleich

Schritte zum Erstellen eines interaktiven Armaturenbretts

Schauen wir uns die entscheidenden Schritte an, die für den Aufbau dieses interaktiven Armaturenbretts erforderlich sind.

1. Erhalten Sie die Daten

Einer der entscheidenden Schritte vor dem Erstellen des Dashboards besteht darin, die zugrunde liegenden Daten zu haben, die für die Visualisierung verwendet werden. Unsere Daten für die Python Gradio Dashboard ist eine synthetische CSV -Datei. Es enthält 100.000 Datensätze, die das Engagement der Web site des Web site -Benutzers simulieren. Jeder Datensatz stellt eine Benutzersitzung oder eine signifikante Interaktion dar.

Hier ist ein Beispiel, wie unser CSV aussehen wird:

Sie können den folgenden Python -Code verwenden, um diese Artwork von Daten zu generieren. Hier generieren wir einen zu Demonstrationszwecken. Stellen Sie sicher, dass Sie Numpy und Pandas installiert haben.

import numpy as np

import pandas as pd

from datetime import datetime, timedelta

def generate_website_data(nrows: int, filename: str):

   # Potential values for categorical fields

   pages = ("/residence", "/merchandise", "/companies", "/about", "/contact", "/weblog")

   international locations = ("USA", "Canada", "UK", "Germany", "France", "India", "Australia")

   device_types = ("Desktop", "Cellular", "Pill")

   browsers = ("Chrome", "Firefox", "Safari", "Edge", "Opera")

   # Generate random knowledge

   user_ids = (f"User_{i}" for i in np.random.randint(1000, 2000, dimension=nrows))

   page_visited_data = np.random.selection(pages, dimension=nrows)

   session_durations = np.random.randint(30, 1800, dimension=nrows) # Session length between 30s and 30min

   country_data = np.random.selection(international locations, dimension=nrows)

   device_type_data = np.random.selection(device_types, dimension=nrows)

   browser_data = np.random.selection(browsers, dimension=nrows)

   # Generate random timestamps during the last two years

   end_t = datetime.now()

   start_t = end_t - timedelta(days=730)

   time_range_seconds = int((end_t - start_t).total_seconds())

   timestamps_data = ()

   for _ in vary(nrows):

       random_seconds = np.random.randint(0, time_range_seconds)

       timestamp = start_t + timedelta(seconds=random_seconds)

       timestamps_data.append(timestamp.strftime('%Y-%m-%d %H:%M:%S'))

   # Outline columns for the DataFrame

   columns = {

       "timestamp": timestamps_data,

       "user_id": user_ids,

       "page_visited": page_visited_data,

       "session_duration_seconds": session_durations,

       "nation": country_data,

       "device_type": device_type_data,

       "browser": browser_data,

   }

   # Create Pandas DataFrame

   df = pd.DataFrame(columns)

   # Kind by timestamp

   df('timestamp') = pd.to_datetime(df('timestamp'))

   df = df.sort_values(by="timestamp").reset_index(drop=True)

   # Write to CSV

   df.to_csv(filename, index=False)

   print(f"{nrows} rows of knowledge generated and saved to {filename}")

# Generate 100,000 rows of knowledge

generate_website_data(100_000, "website_engagement_data.csv")

# print("Please uncomment the above line to generate the information.")

Ausgabe:

100000 rows of knowledge generated and saved to website_engagement_data.csv

Nachdem Sie diesen Code ausgeführt haben, sehen Sie eine Ausgabe, und eine CSV -Datei, die die Daten enthält, wird generiert.

2. Installieren von Gradio

Die Set up von Gradio ist mit PIP sehr unkompliziert. Es wird empfohlen, eine dedizierte Python -Umgebung zu verwenden. Instruments wie Venv und Conda können verwendet werden, um eine isolierte Umgebung zu schaffen. Gradio benötigt Python 3.8 oder eine neuere Model.

python -m venv gradio_env

supply gradio_env/bin/activate  # On Linux/macOS

.gradio_envScriptsactivate  # On Home windows

Set up der erforderlichen Bibliotheken

pip set up gradio pandas plotly cachetools

Jetzt haben wir alle Abhängigkeiten installiert. Lassen Sie uns Schritt für Schritt das Dashboard erstellen.

3.. Importieren der notwendigen Bibliotheken

Erstellen Sie zunächst eine App.py -Datei und importieren Sie die erforderlichen Bibliotheken zum Erstellen des interaktiven Dashboards. Wir werden Plotly für die Gradio -Datenvisualisierung verwenden. Und Cachetools zum Erstellen eines Cache für teure Funktionsaufrufe zur Verbesserung der Leistung.

import gradio as gr

import pandas as pd

import plotly.categorical as px

import plotly.graph_objects as go

from datetime import datetime, date

from cachetools import cached, TTLCache

import warnings

warnings.filterwarnings("ignore", class=FutureWarning, module="plotly")

warnings.filterwarnings("ignore", class=UserWarning, module="plotly")

4. Laden Sie die CSV -Daten

Laden wir die generierte CSV -Datei. Stellen Sie sicher, dass sich die CSV -Datei im selben Verzeichnis wie Ihre App.py befindet.

# --- Load CSV knowledge ---

DATA_FILE = "website_engagement_data.csv" # Ensure that this file is generated and in the identical listing or present full path

raw_data = None

def load_engagement_data():

   international raw_data

   attempt:

       # Generate knowledge if it does not exist (for first-time run)

       import os

       if not os.path.exists(DATA_FILE):

           print(f"{DATA_FILE} not discovered. Producing artificial knowledge...")

           print(f"Please generate '{DATA_FILE}' utilizing the offered script first if it is lacking.")

           return pd.DataFrame()

       dtype_spec = {

           'user_id': 'string',

           'page_visited': 'class',

           'session_duration_seconds': 'int32',

           'nation': 'class',

           'device_type': 'class',

           'browser': 'class'

       }

       raw_data = pd.read_csv(

           DATA_FILE,

           parse_dates=("timestamp"),

           dtype=dtype_spec,

           low_memory=False

       )

       # Guarantee timestamp is datetime

       raw_data('timestamp') = pd.to_datetime(raw_data('timestamp'))

       print(f"Information loaded efficiently: {len(raw_data)} rows.")

   besides FileNotFoundError:

       print(f"Error: The file {DATA_FILE} was not discovered.")

       raw_data = pd.DataFrame() # Return empty dataframe if file not discovered

   besides Exception as e:

       print(f"An error occurred whereas loading knowledge: {e}")

       raw_data = pd.DataFrame()

   return raw_data

# Load knowledge at script startup

load_engagement_data()

5. Caching- und Versorgungsfunktionen

Diese Funktionen werden verwendet, um einen Cache für das schnelle Laden von Daten zu erstellen, wodurch die Berechnungszeit verkürzt wird.

# Caching and Utility Capabilities ---

# Cache for costly perform calls to enhance efficiency

ttl_cache = TTLCache(maxsize=100, ttl=300) # Cache as much as 100 gadgets, expire after 5 minutes

@cached(ttl_cache)

def get_unique_filter_values():

   if raw_data is None or raw_data.empty:

       return (), (), ()

   pages = sorted(raw_data('page_visited').dropna().distinctive().tolist())

   units = sorted(raw_data('device_type').dropna().distinctive().tolist())

   international locations = sorted(raw_data('nation').dropna().distinctive().tolist())

   return pages, units, international locations

def get_date_range_from_data():

   if raw_data is None or raw_data.empty:

       return date.at this time(), date.at this time()

   min_dt = raw_data('timestamp').min().date()

   max_dt = raw_data('timestamp').max().date()

   return min_dt, max_dt

6. Datenfilterung und wichtige Metrikenfunktionen

Die folgende Funktion wird verwendet, um die Daten basierend auf den Eingaben oder Aktionen des Benutzers auf dem Dashboard zu filtern.

# Information Filtering Operate ---

def filter_engagement_data(start_date_dt, end_date_dt, selected_page, selected_device, selected_country):

   international raw_data

   if raw_data is None or raw_data.empty:

       return pd.DataFrame()

   # Guarantee dates are datetime.date objects if they're strings

   if isinstance(start_date_dt, str):

       start_date_dt = datetime.strptime(start_date_dt, '%Y-%m-%d').date()

   if isinstance(end_date_dt, str):

       end_date_dt = datetime.strptime(end_date_dt, '%Y-%m-%d').date()

   # Convert dates to datetime for comparability with timestamp column

   start_datetime = datetime.mix(start_date_dt, datetime.min.time())

   end_datetime = datetime.mix(end_date_dt, datetime.max.time())

   filtered_df = raw_data(

       (raw_data('timestamp') >= start_datetime) &

       (raw_data('timestamp') <= end_datetime)

   ).copy()

   if selected_page != "All Pages" and selected_page just isn't None:

       filtered_df = filtered_df(filtered_df('page_visited') == selected_page)

   if selected_device != "All Gadgets" and selected_device just isn't None:

       filtered_df = filtered_df(filtered_df('device_type') == selected_device)

   if selected_country != "All Nations" and selected_country just isn't None:

       filtered_df = filtered_df(filtered_df('nation') == selected_country)

   return filtered_df

Die nächste Funktion wird verwendet, um die wichtigsten Kennzahlen wie Gesamtsitzungen, eindeutige Benutzer und Prime -Seite nach Anzahl der Besucher zu berechnen.

#Operate to Calculate Key Metrics ---

@cached(ttl_cache)

def calculate_key_metrics(start_date_dt, end_date_dt, web page, machine, nation):

   df = filter_engagement_data(start_date_dt, end_date_dt, web page, machine, nation)

   if df.empty:

       return 0, 0, 0, "N/A"

   total_sessions = df('user_id').depend() # Assuming every row is a session/interplay

   unique_users = df('user_id').nunique()

   avg_session_duration = df('session_duration_seconds').imply()

   if pd.isna(avg_session_duration): # Deal with case the place imply is NaN (e.g., no periods)

       avg_session_duration = 0

   # Prime web page by variety of visits

   if not df('page_visited').mode().empty:

       top_page_visited = df('page_visited').mode()(0)

   else:

       top_page_visited = "N/A"

   return total_sessions, unique_users, spherical(avg_session_duration, 2), top_page_visited

7. Diagramm -Plotfunktionen

Jetzt werden wir einige Diagramm -Plotfunktionen mithilfe von Plotly erstellen. Dadurch wird unser Dashboard detaillierter und ansprechender aussehen.

# Capabilities for Plotting with Plotly ---

def create_sessions_over_time_plot(start_date_dt, end_date_dt, web page, machine, nation):

   df = filter_engagement_data(start_date_dt, end_date_dt, web page, machine, nation)

   if df.empty:

       fig = go.Determine().update_layout(title_text="No knowledge for chosen filters", xaxis_showgrid=False, yaxis_showgrid=False)

       return fig

   sessions_by_date = df.groupby(df('timestamp').dt.date)('user_id').depend().reset_index()

   sessions_by_date.rename(columns={'timestamp': 'date', 'user_id': 'periods'}, inplace=True)

   fig = px.line(sessions_by_date, x='date', y='periods', title="Person Classes Over Time")

   fig.update_layout(margin=dict(l=20, r=20, t=40, b=20))

   return fig

def create_engagement_by_device_plot(start_date_dt, end_date_dt, web page, machine, nation):

   df = filter_engagement_data(start_date_dt, end_date_dt, web page, machine, nation)

   if df.empty:

       fig = go.Determine().update_layout(title_text="No knowledge for chosen filters", xaxis_showgrid=False, yaxis_showgrid=False)

       return fig

   device_engagement = df.groupby('device_type')('session_duration_seconds').sum().reset_index()

   device_engagement.rename(columns={'session_duration_seconds': 'total_duration'}, inplace=True)

   fig = px.bar(device_engagement, x='device_type', y='total_duration',

                title="Complete Session Period by Gadget Sort", shade="device_type")

   fig.update_layout(margin=dict(l=20, r=20, t=40, b=20))

   return fig

def create_page_visits_distribution_plot(start_date_dt, end_date_dt, web page, machine, nation):

   df = filter_engagement_data(start_date_dt, end_date_dt, web page, machine, nation)

   if df.empty:

       fig = go.Determine().update_layout(title_text="No knowledge for chosen filters", xaxis_showgrid=False, yaxis_showgrid=False)

       return fig

   page_visits = df('page_visited').value_counts().reset_index()

   page_visits.columns = ('page_visited', 'visits')

   fig = px.pie(page_visits, names="page_visited", values="visits",

                title="Distribution of Web page Visits", gap=0.3)

   fig.update_layout(margin=dict(l=20, r=20, t=40, b=20))

   return fig

8. Tabellenanzeige- und Datenaktualisierungsfunktionen

Die folgenden Funktionen werden verwendet, um die Daten für die tabellarische Anzeige zu erstellen und die Dashboard -Werte nach Funktionen oder Eingaben des Benutzers zu aktualisieren.

# Operate to Put together Information for Desk Show ---

def get_data_for_table_display(start_date_dt, end_date_dt, web page, machine, nation):

   df = filter_engagement_data(start_date_dt, end_date_dt, web page, machine, nation)

   if df.empty:

       return pd.DataFrame(columns=('timestamp', 'user_id', 'page_visited', 'session_duration_seconds', 'nation', 'device_type', 'browser'))

   # Choose and order columns for show

   display_columns = ('timestamp', 'user_id', 'page_visited', 'session_duration_seconds', 'nation', 'device_type', 'browser')

   df_display = df(display_columns).copy()

   df_display('timestamp') = df_display('timestamp').dt.strftime('%Y-%m-%d %H:%M:%S') # Format date for show

   return df_display.head(100) # Show prime 100 rows for efficiency

#Essential Replace Operate for the Dashboard ---

def update_full_dashboard(start_date_str, end_date_str, selected_page, selected_device, selected_country):

   if raw_data is None or raw_data.empty: # Deal with case the place knowledge loading failed

       empty_fig = go.Determine().update_layout(title_text="Information not loaded", xaxis_showgrid=False, yaxis_showgrid=False)

       empty_df = pd.DataFrame()

       return empty_fig, empty_fig, empty_fig, empty_df, 0, 0, 0.0, "N/A"

   # Convert date strings from Gradio enter to datetime.date objects

   start_date_obj = datetime.strptime(start_date_str, '%Y-%m-%d').date() if isinstance(start_date_str, str) else start_date_str

   end_date_obj = datetime.strptime(end_date_str, '%Y-%m-%d').date() if isinstance(end_date_str, str) else end_date_str

   # Get key metrics

   periods, customers, avg_duration, top_page = calculate_key_metrics(

       start_date_obj, end_date_obj, selected_page, selected_device, selected_country

   )

   # Generate plots

   plot_sessions_time = create_sessions_over_time_plot(

       start_date_obj, end_date_obj, selected_page, selected_device, selected_country

   )

   plot_engagement_device = create_engagement_by_device_plot(

       start_date_obj, end_date_obj, selected_page, selected_device, selected_country

   )

   plot_page_visits = create_page_visits_distribution_plot(

       start_date_obj, end_date_obj, selected_page, selected_device, selected_country

   )

   # Get knowledge for desk

   table_df = get_data_for_table_display(

       start_date_obj, end_date_obj, selected_page, selected_device, selected_country

   )

   return (

       plot_sessions_time,

       plot_engagement_device,

       plot_page_visits,

       table_df,

       periods,

       customers,

       avg_duration,

       top_page

   )

9. Gradio -Schnittstelle erstellen

Schließlich erstellen wir die Gradio -Schnittstelle mit allen oben erstellten Nutzfunktionen.

# Create Gradio Dashboard Interface ---

def build_engagement_dashboard():

   unique_pages, unique_devices, unique_countries = get_unique_filter_values()

   min_data_date, max_data_date = get_date_range_from_data()

   # Set preliminary dates as strings for Gradio parts

   initial_start_date_str = min_data_date.strftime('%Y-%m-%d')

   initial_end_date_str = max_data_date.strftime('%Y-%m-%d')

   with gr.Blocks(theme=gr.themes.Mushy(), title="Web site Engagement Dashboard") as dashboard_interface:

       gr.Markdown("# Web site Person Engagement Dashboard")

       gr.Markdown("Discover person exercise traits and engagement metrics to your web site. This **Python Gradio dashboard** helps with **Gradio knowledge visualization**.")

       # --- Filters Row ---

       with gr.Row():

           start_date_picker = gr.Textbox(label="Begin Date (YYYY-MM-DD)", worth=initial_start_date_str, kind="textual content")

           end_date_picker = gr.Textbox(label="Finish Date (YYYY-MM-DD)", worth=initial_end_date_str, kind="textual content")

       with gr.Row():

           page_dropdown = gr.Dropdown(decisions=("All Pages") + unique_pages, label="Web page Visited", worth="All Pages")

           device_dropdown = gr.Dropdown(decisions=("All Gadgets") + unique_devices, label="Gadget Sort", worth="All Gadgets")

           country_dropdown = gr.Dropdown(decisions=("All Nations") + unique_countries, label="Nation", worth="All Nations")

       # --- Key Metrics Show ---

       gr.Markdown("## Key Metrics")

       with gr.Row():

           total_sessions_num = gr.Quantity(label="Complete Classes", worth=0, precision=0)

           unique_users_num = gr.Quantity(label="Distinctive Customers", worth=0, precision=0)

           avg_duration_num = gr.Quantity(label="Avg. Session Period (s)", worth=0, precision=2)

           top_page_text = gr.Textbox(label="Most Visited Web page", worth="N/A", interactive=False)

       # --- Visualizations Tabs ---

       gr.Markdown("## Visualizations")

       with gr.Tabs():

           with gr.TabItem("Classes Over Time"):

               sessions_plot_output = gr.Plot()

           with gr.TabItem("Engagement by Gadget"):

               device_plot_output = gr.Plot()

           with gr.TabItem("Web page Go to Distribution"):

               page_visits_plot_output = gr.Plot()

       # --- Uncooked Information Desk ---

       gr.Markdown("## Uncooked Engagement Information (Pattern)")

       # Corrected: Eliminated max_rows. The variety of rows displayed might be managed

       # by the DataFrame returned by get_data_for_table_display (which returns head(100)).

       # Gradio will then paginate or scroll this.

       data_table_output = gr.DataFrame(

           label="Person Classes Information",

           interactive=False,

           headers=('Timestamp', 'Person ID', 'Web page Visited', 'Period (s)', 'Nation', 'Gadget', 'Browser')

           # For show peak, you should use the `peak` parameter, e.g., peak=400

       )

       # --- Outline Inputs & Outputs for Replace Operate ---

       inputs_list = (start_date_picker, end_date_picker, page_dropdown, device_dropdown, country_dropdown)

       outputs_list = (

           sessions_plot_output, device_plot_output, page_visits_plot_output,

           data_table_output,

           total_sessions_num, unique_users_num, avg_duration_num, top_page_text

       )

       # --- Occasion Dealing with: Replace dashboard when filters change ---

       for filter_component in inputs_list:

           if isinstance(filter_component, gr.Textbox):

                filter_component.submit(fn=update_full_dashboard, inputs=inputs_list, outputs=outputs_list)

           else:

                filter_component.change(fn=update_full_dashboard, inputs=inputs_list, outputs=outputs_list)

       # --- Preliminary load of the dashboard ---

       dashboard_interface.load(

           fn=update_full_dashboard,

           inputs=inputs_list,

           outputs=outputs_list

       )

   return dashboard_interface

10. Hauptausführungsfunktion zum Ausführen des Gradio

Hier führen wir die Hauptfunktion, Build_Engagement_Dashboard aus, mit der die Schnittstelle für den Begin der Webanwendung vorbereitet wird.

# --- Essential execution block ---

if __name__ == "__main__":

   if raw_data is None or raw_data.empty:

       print("Halting: Information couldn't be loaded. Please guarantee 'website_engagement_data.csv' exists or might be generated.")

   else:

       print("Constructing and launching the Gradio dashboard...")

       engagement_dashboard = build_engagement_dashboard()

       engagement_dashboard.launch(server_name="0.0.0.0") # Makes it accessible on native community

       print("Dashboard is operating. Open your browser to the offered URL.")

Führen Sie jetzt die Python app.py im Terminal zur Ausführung der Webanwendung.

Ausgabe:

Klicken Sie auf den lokalen URL -Hyperlink, um die Gradio -Schnittstelle zu starten.

Ausgabe:

Es wurde ein interaktives Dashboard erstellt. Wir können diese Schnittstelle verwenden, um unseren Datensatz zu analysieren und auf interaktive Weise leicht daraus zu erkennen.

Wir können die Visualisierungen anhand verschiedener Filter sehen.

Abschluss

Gradio kann effektiv eingesetzt werden, um Einblicke aus einem massiven Datensatz zu erhalten. Durch das Erstellen eines interaktiven Visualisierungs -Dashboards kann der Prozess der Datenanalyse engagiert werden. Wenn Sie diese detaillierte Anleitung abgeschlossen haben, können Sie mit Gradio ein interaktives Dashboard effizient erstellen. Wir haben die Datenerzeugung, das Laden, das Zwischenspeichern, die Definition der Filterlogik, die Berechnung der Metriken und das Erstellen von Diagrammen mit Plotly behandelt. Um dies aufzubauen, conflict keine Kenntnis der Entrance-Finish-Programmierung und -technologien erforderlich. Während wir CSV in diesem Handbuch verwendet haben, können Sie bei Bedarf jede andere Datenquelle verwenden. Gradio erwies sich als wertvolles Instrument zum Erstellen dynamischer und benutzerfreundlicher Dashboards.

Harsh Mishra ist ein KI/ML -Ingenieur, der mehr Zeit damit verbringt, mit großen Sprachmodellen zu sprechen als mit tatsächlichen Menschen. Leidenschaft über Genai, NLP und Maschinen schlauer (damit sie ihn noch nicht ersetzen). Wenn er Fashions nicht optimiert, optimiert er wahrscheinlich seine Kaffeeaufnahme.

Bild von Editor | Midjourney

Während Python-basierte Instruments wie Streamlit für das Erstellen von Daten-Dashboards beliebt sind, bleibt Excel eine der zugänglichsten und leistungsstärksten Plattformen für das Erstellen interaktiver Datenvisualisierungen. Mithilfe der integrierten Excel-Funktionen können Sie ein interaktives Dashboard erstellen, das mit den beliebten Datenwissenschafts-Internet-Apps konkurriert.

In diesem Tutorial zeigen wir, wie ein interaktives Knowledge Science Dashboard in Excel in wenigen Minuten ohne Strom erstellt wird. Wir werden mithilfe eines einfachen E-Commerce-Verkaufsdatensatzes demonstrieren.

Schritt 1: Vorbereitung Ihres Datensatzes

Wir werden diesen Schritt in Unterkomponenten aufteilen und uns jeweils einzeln angehen.

Richten Sie Ihre Daten ein

Befolgen Sie die folgenden Schritte, um das Excel -Arbeitsbuch einrichten, das wir verwenden werden:

1. Eröffnen Sie ein neues Excel -Arbeitsbuch
2. Importieren Sie Ihre Daten in Excel
3. Gehe zum Daten Registerkarte >> auswählen Daten abrufen >> Wählen Sie Ihren Dateityp aus
4. Führen Sie eine Datensatzreinigung oder -wartung durch, die möglicherweise erforderlich sein kann

In Excel Desk konvertieren

Konvertieren wir unsere Daten als nächstes in eine Excel -Tabelle. Mit Tabellen können Formeln, Pivottable und dynamische Bereiche einfach erstellt werden.

1. Wählen Sie Ihren gesamten Datensatz aus
2. Gehe zum Einfügen Registerkarte >> auswählen Tisch (oder drücken Sie Strg+t)
3. Sicherstellen Mein Tisch hat Header wird geprüft
4. Klicken OK

5. Nennen Sie Ihre Tabelle SalesData:
   • Klicken Sie in der Tabelle überall
   • Gehe zum Tischdesign Registerkarte >> auswählen Tabellenname >> Typ SalesData

Schritt 2: Erstellen Sie interaktive Pivot -Tabellen

Pivot -Tabelle erstellen:

• Wählen Sie eine beliebige Zelle in der SalesData -Tabelle aus.
• Gehe zum Einfügen Registerkarte >> auswählen Pivottierbar.
• Lokalisierung auswählen: Neues Arbeitsblatt.
• Klicken OK.

Umsatz bis Monat:

• Im Pivottable Fieldlist:
  • Reihen: Datum (Gruppe nach Monaten).
  • Werte: Verkaufsbetrag.

Regionale Leistung:

• Fügen Sie einen weiteren Pivotsable ein.
• Im Pivottable Fieldlist:
  • Reihen: Area.
  • Werte: Verkaufsbetrag, verkaufte Einheiten.
  • Format: Währung für den Verkaufsbetrag.

Produktkategorieanalyse:

• Fügen Sie einen weiteren Pivotsable ein.
• Im Pivottable Fieldlist:
  • Reihen: Kategorie.
  • Werte: Verkaufsbetrag.
  • Sortieren: Nach Verkaufsbetrag absteigern.

KPIS Pivot Tabelle:

• Fügen Sie einen weiteren Pivotsable ein.
• Im Pivottable Fieldlist:
• Werte:
  • Summe des Verkaufsbetrags.
  • Summe der verkauften Einheiten.
  • Kostensumme.
  • Anzahl der Verkaufsbetrag (für durchschnittliche Berechnung).
  • Fügen Sie keine Zeilen oder Spalten hinzu (dies gibt uns Summen).

Schritt 3: Erstellen Sie dynamische Diagramme

Income Pattern Line Diagramm:

• Wählen Sie die monatliche Einnahmen -Pivot -Tabelle.
• Gehe zum Pivottierbar analysieren Registerkarte >> auswählen Pivot -Diagramm >> auswählen Zeilendiagramm.
• Formatieren Sie die Tabelle:
  • Chartentitel: Monatlicher Umsatztrend.
  • Datenbezeichnungen hinzufügen: Erweitern Sie erweitern Diagrammelemente >> klicken Datenetiketten.

Regionaler Leistungsspaltendiagramm

• Wählen Sie die regionale Pivot -Tabelle aus.
• Gehe zum Pivottierbar analysieren Registerkarte >> auswählen Pivot -Diagramm >> auswählen Cluster -Säule.
• Format:
  • Titel: Umsatz nach Area.
  • Verschiedene Farben für jede Area.
  • Datenbezeichnungen über Spalten.

Produktkategorie -Kreisdiagramm

• Wählen Sie die Produktkategorie -Pivot -Tabelle aus.
• Gehe zum Pivottierbar analysieren Registerkarte >> auswählen Pivot -Diagramm >> auswählen Kreisdiagramm.
• Format:
  • Titel: Umsatz nach Produktkategorie.
  • Prozentsätze zeigen.
  • Verwenden Sie unterschiedliche Farben.

Schritt 4: Interaktive Slicer hinzufügen

Slicer einfügen:

• Klicken Sie auf eine Pivot -Tabelle.
• Gehe zum Pivottierbar analysieren Registerkarte >> auswählen Slicer einfügen.
• Wählen Sie diese Felder aus:
• Klicken OK.

Zeitleiste einfügen:

• Klicken Sie auf eine Pivot -Tabelle.
• Gehe zum Pivottierbar analysieren Registerkarte >> auswählen Timeline einfügen.
• Wählen Datum.
• Klicken OK.

Schließen Sie Slicer mit allen Drehstabetischen an:

• Klicken Sie mit der rechten Maustaste auf jeden Slicer >> auswählen Verbindungen melden.

• Überprüfen alle Pivot -Tische.
• Klicken OK.

Wiederholen Sie dies für jeden Slicer, um sicherzustellen, dass sie alle alle Diagramme steuern.

Schritt 5: Erstellen Sie dynamische KPI -Karten

Sie können KPI -Metriken direkt im Dashboard berechnen oder später in das Armaturenbrettblatt platzieren.

Erstellen Sie nun KPIs, die auf diese Pivot -Tabelle verweisen:

Gesamtumsatz:

• Wählen Sie eine Zelle aus und fügen Sie die folgende Formel ein.

=GETPIVOTDATA("Sum of Gross sales Quantity",'KPIs from Pivot Desk Knowledge'!$A$3)

Durchschnittlicher Bestellwert:

• Wählen Sie eine Zelle aus und fügen Sie die folgende Formel ein.

=GETPIVOTDATA("Sum of Gross sales Quantity",'KPIs from Pivot Desk Knowledge'!$A$3)/GETPIVOTDATA("Rely of Gross sales Quantity",'KPIs from Pivot Desk Knowledge'!$A$3)

Gesamteinheiten verkauft:

• Wählen Sie eine Zelle aus und fügen Sie die folgende Formel ein.

=GETPIVOTDATA("Sum of Models Bought",'KPIs from Pivot Desk Knowledge'!$A$3)

Gewinnmarge %:

• Wählen Sie eine Zelle aus und fügen Sie die folgende Formel ein.

=(GETPIVOTDATA("Sum of Gross sales Quantity",'KPIs from Pivot Desk Knowledge'!$A$3)-GETPIVOTDATA("Sum of Value",'KPIs from Pivot Desk Knowledge'!$A$3))/GETPIVOTDATA("Sum of Gross sales Quantity",'KPIs from Pivot Desk Knowledge'!$A$3)

Gesamtreihenfolge:

• Wählen Sie eine Zelle aus und fügen Sie die folgende Formel ein.

=GETPIVOTDATA("Rely of Gross sales Quantity",'KPIs from Pivot Desk Knowledge'!$A$3)

Format KPI -Karten:

• Wenden Sie Grenzen und Ausrichtung an.
• Formatnummern:
  • Einnahmen: Währung Format.
  • Prozentsatz: Prozentsatz Format mit 2 Dezimalstellen.
• Fett die Beschriftungen und fügen Sie Hintergrundfarbe hinzu.

Schritt 6: Erstellen Sie die Dashboard -Struktur

• Erstellen Sie ein neues Blatt und nennen Sie es das Dashboard.
• Gitterlinien verstecken:
  • Gehe zum Sicht Registerkarte >> auswählen Zeigen >> Deaktivieren Gitterlinien.
• Das Dashboard -Titel einfügen.
• Platzieren Sie KPI -Metriken nach oben.
• Setzen Sie Slicer und eine Zeitleiste ein.
• Platzieren Sie die Diagramme unten.
• Fügen Sie bei Bedarf eine Datentabelle ein.

Aktualisieren und automatisieren: Klicken Sie mit der rechten Maustaste Pivottables/Diagramme >> auswählen Aktualisieren.

Schritt 7: Testen Sie Ihr Dashboard

Funktionalitätstests:

• Wählen Sie Bücher Kategorie + North Area + Bob -Verkäufer von Slicers.
• Wählen Sie Jan 2025 aus der Zeitleiste.
  • Stellen Sie sicher, dass alle Diagramme gleichzeitig aktualisieren.
  • Überprüfen Sie, ob KPIs korrekt neu berechnet werden.
  • Stellen Sie sicher, dass keine Fehler angezeigt werden.

Fehlerbehebung bei gemeinsamen Problemen

• Diagramme nicht aktualisieren: Überprüfen Sie die Slicer-Verbindungen (klicken Sie mit der rechten Maustaste von Slicer> Report Connections). Stellen Sie sicher, dass alle Pivot -Tabellen ausgewählt werden.
• Formelfehler: #REF! oder #Worth! Fehler in KPIs. Überprüfen Sie die Tabellenreferenzen (stellen Sie sicher, dass der Identify des Verkaufsdata korrekt ist).
• Leistungsprobleme: Dashboard ist langsam zu aktualisieren:
  • Reduzieren Sie die Anzahl der Pivot -Tabellen.
  • Vereinfachen Sie komplexe Formeln.
  • Verwenden Sie manuelle Berechnung (Formeln> Berechnung Optionen> Handbuch).

Abschluss

Wenn Sie die oben genannten Schritte befolgen, können Sie in wenigen Minuten ein interaktives Knowledge Science Dashboard in Excel erstellen. Diese Schritte helfen Ihnen dabei, anspruchsvolle Dashboards zu erstellen, die einen echten Geschäftswert bieten, ohne eine einzige Zeile von Python -Code zu berühren. Das Beste daran ist, dass Ihre Stakeholder mit dem Dashboard selbst interagieren und es ändern können, was es zu einem wirklich kollaborativen Enterprise Intelligence -Instrument macht.

Shamima Sultana Arbeitet als Projektmanagerin bei Exceldemy, wo sie zu Microsoft Excel recherchiert und Artikel zu ihrer Arbeit schreibt. Shamima hat einen BSC in Informatik und Ingenieurwesen und hat ein großes Interesse an Forschung und Entwicklung. Shamima liebt es, neue Dinge zu lernen, und versucht, angereicherte Qualitätsinhalte in Bezug auf Excel bereitzustellen, während er immer versucht, Wissen aus verschiedenen Quellen zu sammeln und modern Lösungen zu erstellen.