Mit Echarts, Bootstrap und Tabulator zur maßgeschneiderten Datenvisualisierung (3/3)

Im letzten Teil unserer Serie über Bootstrap, Tabulator und ECharts konzentrieren wir uns auf die Integration von ECharts für interaktive Diagramme. Wir zeigen Ihnen, wie Sie Daten aus einer Tabulator-Tabelle als Diagramme darstellen und anpassen können.

ECharts einbinden

Voraussetzungen

Stellen Sie sicher, dass ECharts in Ihrem Projekt eingebunden ist. Fügen Sie die folgende Zeile in den <head> Ihres HTML-Dokuments ein:

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

Chart-Container hinzufügen

Der Chart wird in einem separaten Tab dargestellt. Fügen Sie den folgenden Container zu Ihrem HTML hinzu (falls noch nicht geschehen):

<div id="chart" style="width: 100%; height: 400px;"></div>

Daten-Endpunkt für das Diagramm

Der Daten-Endpunkt liefert JSON-Daten für eine Bestellnummer. Hier ein einfaches PHP-Skript, in dem über einen Zeitraum von 12 Perioden zufällige Werte generiert werden.

<?php
// data-endpoint.php
header('Content-Type: application/json');

// Bestellnummern definieren
$bestellnummern = ["11223", "67890", "12345"];
$data = [];

// Daten für jede Bestellnummer generieren
foreach ($bestellnummern as $nummer) {
    $werte = [];

    // 12 Werte erstellen
    for ($i = 1; $i <= 12; $i++) {
        $werte[] = [
            "nummer" => $i,
            "wert" => rand(1000, 10000)
        ];
    }

    // Daten für die aktuelle Bestellnummer speichern
    $data[$nummer] = $werte;
}

// Überprüfen, ob eine Bestellnummer angefragt wurde
if (isset($_GET['bestellnummer'])) {
    $bestellnummer = $_GET['bestellnummer'];
    if (array_key_exists($bestellnummer, $data)) {
        echo json_encode($data[$bestellnummer]);
    } else {
        http_response_code(404);
        echo json_encode(["error" => "Bestellnummer nicht gefunden"]);
    }
} else {
    http_response_code(400);
    echo json_encode(["error" => "Bestellnummer fehlt"]);
}

Chart initialisieren

Initialisieren Sie das ECharts-Diagramm. Die Darstellung wird erst später mit Daten befüllt:

// Chart Initialisierung
const chart = echarts.init(document.getElementById("chart"));
chart.setOption({
	title: { text: "Daten zum Titel", left: "center" },
	tooltip: { trigger: "axis" },
	xAxis: { type: "category", data: [] },
	yAxis: { type: "value" },
	series: [{ name: "Wert", type: "line", data: [], areaStyle: {} }]
});

Daten in das Diagramm laden

Mit einem Doppelklick auf eine Zeile der Tabelle sollen die entsprechenden Daten im Diagramm angezeigt werden. Fügen Sie den Event-Listener hinzu:

// Event Listener für Doppelklick
table.on("rowDblClick", function (e, row) {
	const data = row.getData();
	const bestellnummer = data.bestellnummer;

	// Zum Chart-Tab wechseln
	const tab2Link = document.getElementById("tab2-link");
	const tab2 = new bootstrap.Tab(tab2Link);
	tab2.show();

	// Sicherstellen, dass der Chart die richtige Größe hat
	setTimeout(() => {
		chart.resize();
	}, 300); // Leichte Verzögerung, um den Wechsel abzuwarten

	// Daten für den Chart laden
	fetch(`data-endpoint.php?bestellnummer=${bestellnummer}`)
		.then(response => {
			if (!response.ok) {
				throw new Error("Fehler beim Laden der Daten");
			}
			return response.json();
		})
		.then(serverData => {
			const labels = serverData.map(item => `Periode ${item.nummer}`);
			const values = serverData.map(item => item.wert);

			// Chart aktualisieren
			chart.setOption({
				title: { text: `Daten für: ${data.produkt}` },
				xAxis: { data: labels },
				series: [{ data: values }]
			});
		})
		.catch(error => {
			alert("Fehler beim Laden der Daten: " + error.message);
		});
});

Finales Ergebnis

Nach diesen Schritten haben Sie:

Eine Bootstrap-Benutzeroberfläche mit Tabs.
Eine Tabulator-Tabelle mit Doppelklick-Events.
Ein interaktives ECharts-Diagramm, das Daten aus der Tabelle visualisiert.

Dieses einfache Beispiel lässt sich leicht erweitern, um weitere Datenquellen, Diagrammtypen und Benutzerinteraktionen zu integrieren.

Viel Erfolg bei Ihrer Datenvisualisierung!

1manfactory.com - Blog of Jürgen Schulze