Einfaches/kostenloses Script zum erstellen von Web/HTML-Diagrammen

[bubu9]

Moin,

ich bin auf der Suche nach einem einfachen, kostenlosen Script zum Erstellen von Web/HTML-Diagrammen. Hab bereits ein wenig gegoogelt, man wird ja erschlagen von gefühlten 100 Tools, die aber fast alle viel zu komplex sind für das, was ich vorhabe...

Der Wechselrichter meiner Solaranlage hat eine Netzwerkschnittstelle und ich habe mir ein einfaches PHP-Script geschrieben, das die Daten des Wechselrichters per HTTP Push im Minutentakt in einer MySQL Datenbank speichert. Die Daten sehen dann so aus:

ID: 1
STROM: 208 (Watt)
TIME: 2020-10-09 09:48:46

Habe ich so einfach gehalten wie möglich. Das ganze möchte ich jetzt Visualisieren mit einem weiteren PHP-Script. Man kann die Daten auch an das Cloud-Portal des Wechselrichters schicken und dort visualisieren lassen. Das möchte ich aber nicht.

 

[xammu]

Erster Gedanke: Grafana, aber einfach ist anders und vermutlich für deinen Zweck übertrieben.

Schau dir mal phpchart an, da hatte ich lange vor Grafana im Einsatz und funktionerte OK
Ein Beispiel mit MYSQL

 

[bubu9]

Erster Gedanke: Grafana

Wenn ich das richtig verstanden habe, ist Grafana ja quasi ein eigenes Betriebssystem. Ja, das wäre übertrieben. Php-Chart gucke ich mir mal an, danke. Mit den Limitierungen der Lite-Version kann ich leben.

 

[xammu]

Eigenes Betriebssystem ist übertrieben, aber mehr als ein einfaches Script defintiv.

Chartphp macht auch einen guten Eindruck https://www.chartphp.com/how-to-create-line-chart-mysql-php/

 

[DonConto]

Ich habe das mit Highcharts gelöst. Ich hole die Daten mittels PHP aus einer SQL DB. Das sieht dann z.B. so aus:

 

[Michael-Menten]

Eine Möglichkeit ist es GnuPlot im Hintergrund zuverwenden.

 

[bubu9]

Chartphp macht auch einen guten Eindruck

Probiere damit gerade rum. Ist schön übersichtlich aufgebaut und kann direkt auf die Datenbank zugreifen. Hab nur noch nicht kapiert welchen Datentyp der für Timestamps haben möchte.

 

[bubu9]

Ich habe das mit Highcharts gelöst.

Habs mit Chartphp aufgegeben. Kein Plan, wie man bei dem Tool Timestamps an die X-Achse übergeben kann. Datum kein Problem aber Uhrzeiten kennt er nicht

In welchem Format hast du die Timestamps bei Highcharts übergeben? Als Unix Timestamp?

 

[DonConto]

Meine DB wird jede Minute mit den Informationen (Solarstrom, Strom Export und Strom Import) gefüllt und mit einem Timestamp versehen. Das Script zur Darstellung liest einfach nur alle Einträge eines Tages und stellt sie grafisch dar. Das Format der Timestamps ist hier nicht relevant. Die kannst du auch umwandeln in ein anderes Format. Der Timestamp ist nur wichtig, wenn ich per SQL Abfrage einen bestimmten Zeitraum herausfiltern möchte ("zeige mir den 28.6.2016" zB).

Auf der Highcharts Seite gibt es dutzende Beispiele für alle möglichen Diagrammtypen. Ebenso einen Live-Editor wo man mit den Einstellungen spielen kann und sofort die Auswirkungen sieht.

Ich habe mich für den Area Spline entschieden:
https://www.highcharts.com/demo/areaspline/dark-unica
Wenn du da mal auf View Options klickst, siehst du die Konfiguration des Charts. Ganz unten sieht du einen Absatz "Series". Dort stehen die Werte drin, die du darstellen willst, in deinem Fall wären das dann eben die "Wattzahlen".

 

[bubu9]

Das Format der Timestamps ist hier nicht relevant.

Interessiert Highcharts nicht? Das ist gut. Dann versuche ich es heute Abend mal mit den Unix-Timestamps aus der Datenbank und übergebe die unkonvertiert an highcharts.

 

[DonConto]

Nö, das ist egal. Der will nur Werte, die er darstellen soll (x1 = 2, x2 = 4 usw).

 

[DubZ]

wenn ein bisschen Javascript Erfahrung da ist: mittels PHP einen kleinen Webservice schreiben und dann bspw. mit chartjs darstellen lassen.

 

[bubu9]

mit chartjs darstellen lassen.

Damit habe ich es jetzt tatsächlich innerhalb von 15 min hinbekommen. Tausend dank! Schön kompakt das script.