(MySQL-) Datenbankeinträge visualisieren

Hallo Gemeinde.

Ich habe gerade eine MariaDB-Datenbank erfolgreich auf meinen Webserver eingerichtet.

Die dort enthaltenen Daten (Messwerte) würde ich gerne graphisch darstellen bzw. daraus Diagramme erstellen, damit ich sie komfortable von überall aus abrufen kann (PC, Smartphone, Tablet, etc.).

Ich habe mir bisher PHP mit der pChart-Library angesehen und erste Gehversuche gestartet:
Diagramme lassen damit in JPG dynamisch aus den Werten aus der Datenbank erstellen und in HTML einbetten. Das läuft auch prinzipiell ganz gut.

Welche anderen Technologien lassen sich noch hierfür einsetzen? Wie sieht es da mit HTML5 aus? Man kann doch neuerdings direkt in ein Canvas-Element zeichnen...

Es wäre nämlich wünschenswerter, die Diagramme interaktiver zu haben als ein recht unflexible JPG-Bilddatei.

Ich habe im Netz noch etwas von einem JavaScript-Ansatz gelesen und bin schnell bei http://www.chartjs.org/ gelandet...
Der große Vorteil ist hier, dass man die einzelnen Punkte im Diagramm mit dem Mauszeiger berühren/anklicken kann und es werden zu dem Messpunkt detaillierte Informationen angezeigt. Das ist ja in einem JPG nicht möglich.

Wie würdet ihr da vorgehen? Läuft JavaScript / Chart.js auf jedem Webserver?

Danke und viele Grüße!

TuxuT schrieb:

Läuft JavaScript / Chart.js auf jedem Webserver?

Zum Vergrößern anklicken....

JavaScript läuft auf dem Client.

Hi,

chart.js wäre in jedem Fall mein Mittel der Wahl. Wenn du das hinbekommst ist es natürlich sinnvoller als "tote" JPG Dateien.

VG,
Mad

Yuuri schrieb:

JavaScript läuft auf dem Client.

Zum Vergrößern anklicken....

Es gibt auch serverseitiges JavaScript ... von Node.js hast Du ja vielleicht schon einmal gehört.


Für die Interaktivität ist vermutlich ein serverseitig generiertes JPG-Bild zusammen mit einem Imagemap einfacher zu generieren, als das ganze in einem Canvas Element aufzubauen. Je nachdem, wie stark Interaktivität angeboten werden soll, besteht auch die Möglichkeit SVG einzusetzen.

Ich würde daher vermutlich auf Chart.js oder Canvas verzichten. Canvas haben wir eigentlich nur dann eingesetzt, wenn der Nutzer das Bild in irgend einer Weise bearbeiten können sollte.

Als Alternative zu chartjs gibts noch d3.js: https://d3js.org/
Das ist nochmal wesentlich flexibler, aber auch komplexer als chartjs

Andreas_ schrieb:

Es gibt auch serverseitiges JavaScript ... von Node.js hast Du ja vielleicht schon einmal gehört.

Zum Vergrößern anklicken....

Ja, bringt nur nix wenn er dynamische Diagramme beim Client haben will - Hovern der Messpunkte und eine Anzeige des Wertes bspw.

Mal angenommen ich entscheide mich tatsächlich dafür Chart.js zu verwenden.
Wie komme ich dann an meine SQL-Datenbank heran, wenn das Script client-seitig ausgeführt wird?

(Ich möchte natürlich in keinem Javascript die Logindaten zu meiner Datenbakverbindung in Klartext stehen haben.)

Muss ich dann irgendwie per JavaScript ein PHP, das die DB Verbindung herstellt und die Daten abruft, anwerfen und dann die Daten zum Client übertragen, der mir wiederum die Daten per Chart.js darstellt?

Fragen über Fragen...

Hi,

Muss ich dann irgendwie per JavaScript ein PHP, das die DB Verbindung herstellt und die Daten abruft, anwerfen und dann die Daten zum Client übertragen, der mir wiederum die Daten per Chart.js darstellt?

Zum Vergrößern anklicken....

exakt so kann man es machen. Entweder man ruft direkt eine PHP Seite auf, die die Datenbankanbindung und das Auslesen übernimmt und dann im Anschluß die Daten an Chart.JS übergibt oder man lädt erst die Seite und ruft dann anschließend per AJAX eine PHP Datei auf, die die Daten im gewünschten bzw. benötigten Format zurückliefert.

Hast du denn Erfahrung in dem Bereich? Das sind nämlich schon eher Grundlagen.

VG,
Mad

Yuuri schrieb:

Ja, bringt nur nix wenn er dynamische Diagramme beim Client haben will - Hovern der Messpunkte und eine Anzeige des Wertes bspw.

Zum Vergrößern anklicken....

Das ist schon wieder Unsinn. Dem auch bei Chart.js benutzten Canvas ist es egal. ob die Daten zur Visualisierung lokal oder serverseitig erstellt werden. Bisher wurden in diesem Thread keine Gründe benannt, die eine clientseitige Erstellung erforderlich machen.

Gründe dafür wären zum Beispiel:
- Der Server kennt die Daten gar nicht (Client dient zur Datenerfassung)
- Auf jedem Client sollen die Daten individuell dargestellt werden
- Clients sind sehr schmalbandig angebunden

Gründe dagegen wären:
- Eine große Anzahl von Clients soll die Daten gleich darstellen
- Die Berechnung der Darstellung ist rechenintensiv

Wenn es nur darum geht, sich mit den Technologien vertraut zu machen, spielen diese Gründe natürlich keine Rolle.

Es gibt übrigens neben Chart.js auch Chartjs-Node, bei dem die Diagramme serverseitig mit JavaScript erstellt werden ...