mit Python und google charts Grafik im Browser darstellen

L I V E Stammtisch ab 20:30 Uhr im Chat
  • Hallo, ich suche Tipps und Tricks zum Darstellen von Stromverbrauchsdaten pro Stunde als dynamische Webseite.

    Meine Verbrauchsdaten sind in einer mariadb per timestamp pro Umdrehung (Ferraris-Scheibe) gespeichert.

    Jetzt sollen diese Daten dynamisch als Webseite im lokalen Netz auf dem Apache visualisiert werden.

    Programmierkenntnisse habe ich in Python, jedoch nicht Java, html, php, ....

    Nun habe ich unter Data Source Python Library eine für mich erstmal praktische Lösung gefunden, welche in einem Python-Programm eine HTML-Vorlage enthält mit Platzhaltern
    für die Daten, welche in der main() - Funktion in die Variablen "description" und "data" aufbereitet werden.

    Am Ende wird dann per print die Vorlage mit % und Varaiable ausgegeben. So mein Verständnis des Beispielprogramms.

    Wenn das funktionieren würde, bräuchte ich nur mit meinen Python- und sql-Kenntnissen die listen "description" und "data" aufbereiten. Das wäre es dann ....

    Allerdings bekomme ich es auf meinem raspi nicht zum Laufen.

    Vielleicht kann sich ja mal ein Profi von Euch den nachfolgenden der Beispiel-Code von Google anschauen :bravo2:

    Bei den print-Befehlen fehlten die öffnende und schließende Klammer sowie die Einrückung nach def ... : und if ... :

    habe ich berichtigt. Thonny sagt, der Code sei in Ordnung :conf:

    Nun noch eine, hoffentlich, letzte Frage:

    Muss dieses Python-Programm dann im Verz. /var/www/html als prog_name.py abgespeichert werden oder als prog_name.html?

  • mit Python und google charts Grafik im Browser darstellen? Schau mal ob du hier fündig wirst!

  • Hallo Tell,

    bin für jeden Tipp dankbar um es richtig zu machen!

    Ich möchte nur verhindern, dass ich mich tief in HTML, Java .... einarbeiten muss.

    Also mein Endziel ist, dass ich 3 Eingabefelder habe:

    1. Datum Ab wann die Daten beginnt werden sollen

    2. Datum Ende der Betrachtung

    3. Intervall (aktuell 1 Std.)

    Dann per Python die Datenselektion mit Übergabe an die Webseite und Präsentation.

    -

    flask - Bin ich mal beim Suchen im Internet drüber gestolpert aber nicht reingezoomt.

    Hast Du damit schon Dinge realisiert?

    Empfehlenswert?

    Lade ich mir die API/Module auf meinen Raspi und die Daten bleiben bei mir im LAN?

    Beispielcodings?

    Deutschsprachige Community?

    Also Du musst mir nicht alles vorkauen, bin des Lesens mächtig ;)

    Aber eben Empfehlung :bravo2:

  • > Intervall (aktuell 1 Std.)

    Wenn das so langsam geht dann kannst du die Seite auch mit Python generieren.

    > Hast Du damit schon Dinge realisiert?

    Ja. Sowohl flask wie auch Google Charts. Noch nicht beides im gleichen Projekt.

    > Empfehlenswert?

    Ich find's gut.

    > Lade ich mir die API/Module auf meinen Raspi und die Daten bleiben bei mir im LAN?

    Der Code fuer die Charts wird ueblicherweise von einem Google-Server geladen. Alles andere ist dir ueberlassen.

    > Beispielcodings

    https://blog.heimetli.ch/google-charts-temperature.html

    > Deutschsprachige Community?

    Keine Ahnung. Charts und flask sind aber gut dokumentiert.

  • Ich hab die Seite mal vereinfacht:

  • Hallo Tell, hallo Herbstmond,

    erstmal vielen Dank für Eure Tipps und Erfahrungen.

    Werde mich nun ein bisschen in FlASK einlesen und dann mal mit der vereinfachten html-Seite die Tell bereitgestellt hat, versuchen meine DB-Daten mit Jinia darin zu rendern.

    Könnte sein, dass ich mich nochmal melde.

  • Die formattierung vom Tooltip ist noch recht uebel, aber du willst ja auch nich was machen :)

  • Hallo Tell,

    vielen Dank für diese tolle Vorlage. Ich hätte mich sonst heute oder morgen gemeldet.

    Ich werde an diesem Projekt allerdings erst wieder übernächste Woche arbeiten können.

    Noch eine Frage hätte ich bezüglich debugging.

    Meine Test-Flask-App sieht so aus und starten tue ich sie über die Thonny-App mit "Ausführen

    1. Frage: In der Entwicklung solch eines Projektes oder einfacher Flask-App.

    Wie startest Du den Server mit der App.

    Auch aus Thonny oder einer anderen Entwicklungsumgebung(wenn ja, welche)?

    Oder über die Kommandozeile und dann mit welchen Parametern?

    Jetzt würde ich einfach gerne im Debugging sehen können,

    1. wie z.B. das Ergebnis meiner Funktion data = energie_funcs.sel_energie_daten(energ....

    aussieht.

    2. Kann ich auch die HTML-Seite, in die die Daten gerendert werden, debuggen?

    Mit breakpoints?

    Also es eilt nicht sehr, aber wenn Du mir entweder Tipps oder ne URL liefern könntest, wäre toll.

    Vielen Dank schon mal

  • > Wie startest Du den Server mit der App.

    Auf der Kommandozeile:

    Code
    export FLASK_APP=app.py
    flask run --host=0.0.0.0

    Und keine Angst wegen der Warnung. So lange du das nur intern benutzt ist es nicht gefaehrlich ;)

    > wie z.B. das Ergebnis meiner Funktion data = energie_funcs.sel_energie_daten(energ.... aussieht.

    Was passiert bei print( data ) ?

    Wenn du Glueck hast gibt das eine formatierte Ausgabe. Ansonsten muss du dich mit der Struktur beschaeftigen und eine passende print-Funktion schreiben.

    > Kann ich auch die HTML-Seite, in die die Daten gerendert werden, debuggen?

    Debuggen geht nicht, weil HTML nur Markup ist (mal angenommen du willst das JavaScript fuer den Graph nicht debuggen). Klicke mit der rechten Maustaste auf die Seite und waehle "Seitenquelltext anzeigen". Dann siehst du was dein Template produziert hat.

  • Hallo Tell,

    sorry, dass ich mich schon wieder melde :blush:

    Ich habe nun "meine" HTML-Seite test.html auf Basis Deines Vorschlages angepasst, sodass ich nun die entsprechenden INPUT-Felder in der Flask-App habe, um dort meine Datenselektion aus der DB vorzunehmen und in eine Liste zu schreiben. Die Ergebnis-Liste die in die test.html gerendert werden soll hat nur noch 2 Werte, energie_daten[von-bis, count]. von-bis ist ein String-wert, count(Anzahl Umdrehungen der Ferraris-Scheibe im Zeitraum) ist ein Integer.

    Ich scheitere immer am Statement

    return render_template("test.html", ..........)

    mit der Fehlermeldung: UnboundLocalError: local Variable 'energie_type' referenced before assignment

    Anbei hier meine test.html

    An der Datenübergabe bei

    data.addRows([..... habe ich noch nicht weitergemacht, weil mir die Datenrückgabe (rendern) noch Probleme macht :conf:

    Jetzt zum Problemkind, der Flask-App:

    Vielleicht kannst Du Dir das Coding mal anschauen. :helpnew:

    Vielen Dank schon mal. Es eilt nicht, kann erst wieder nächsten Sonntag mich damit befassen.

  • Hallo Tell, hallo alle html - flask - Jinia-Profis,

    sorry, aber jetzt steht mir schon wieder jemand auf der Leitung :daumendreh2:

    Bin jetzt soweit, dass ich eine 2-spaltige Liste in die html-Seite übergeben bekomme.

    Allerdings klappt wohl die Übergabe aus der Liste energie_data an data.addRows() NICHT.

    Wenn ich die Übergabe "hardcode", siehe im Quellcode blau, funktioniert es.

    Wenn ich aber versuche die Daten aus energie_data per Loop an data.addRows() zu übergeben funktioniert es nicht! Es wird gar nichts als Grafik ausgegeben.

    Siehe folgenden Code:

    Dann habe ich die html-Seite dahingehend geändert, dass ich NUR die Daten aus energie_daten ausgebe.

    Siehe folgender Code:

    dann erfolgt die Ausgabe der Daten gem. der beiliegenden Hardcopy/Dateianhang

    Also, Daten sind da, ich mache etwas an der Übergabe an data.addRows() falsch :wallbash:

    Hast Du eine Idee oder Tipp, wo mein Fehler liegt?

    Also falls Du oder jemand aus dem Forum eine Idee hat, nur her damit.

    Vielen Dank schon mal für Eure Mühe

  • Poste doch mal dein HTML-Template, damit ich nicht Fragmente zusammensuchen muss :-/

    Code
             {% for row in energie_data -%}
                [{{ row }}]{%- if not loop.last -%},{% endif %}
              {% endfor %}
           ]);

    Hier setzt du den kompletten Eintrag ins Template ein, also 00:00-00:59 21. Das stimmt nicht mit der hart codierten Version ueberein, weil die Quotes und das Komma fehlen. JavaScript kann es so nicht decodieren und wirft eine Exception.

    Jetzt kannst du entweder Quotes und Komma schon in den Eintrag einfuegen (HAESSLICH!), oder wie ich eine Struktur mit zwei Teilen uebergeben und den Eintrag in die Tabelle aus den zwei Teilen zusammensetzen.

  • Hallo an alle html - flask - Jinia-javascript-Profis,

    ich bekomme es nicht hin :wallbash:

    Für alle die diesen Thread bisher nicht verfolgt haben.

    Es soll eine Linien-Grafik mit google charts erstellt werden. Über Python - Flask wird eine 2-spaltige Liste,
    in der Form "00:00-00:59" und ein ganzahliger Wert per render_template an eine html-Seite übergeben.

    Die numerischen Werte werden in der Grafik richtig dargestellt. Was nicht funktioniert ist die Ausgabe der horizontalen Skalierung je Linienpunkt in der

    Form z.B. 00:00-00:59

    Wenn ich in der html-Seite die Daten für 3 Werte hard codiere, funktioniert es!

    Anbei das html-Coding und ein screenshot wie es FUNKTIONIERT!
    Die hardgecodeten Zeilen sind blau markiert.

    Hier habe ich die Skalierung rot umrandet.

    In dem folgende html-Coding werden nun die übergebenen Daten eingefügt. Wie gesagt, die Verbrauchsdaten werden richtig ausgegeben, nur die horizontale Skalierung bleibt leer. Siehe der nachfolgende Screenshot.

    Wie muss ich die Datenübergabe anpassen, dass Google charts die erste Spalte 00:00-00:59 als Skalierung darstellt?

    Anbei noch die Python-flask-app die die Daten zum rendern sammelt und an html übergibt.

    Tell

    Eigentlich habe ich die Datenübergabe, wie von Dir vorgeschlagen, umgesetzt oder?

  • Ich hab dran rumgebastelt, da musst du noch aufraeumen:

  • Hallo Tell,

    hallo Python, Flask und html-Spezialisten.

    Wenn in energie_show_20221221.py die 3 hardgecodeten Zeilen an html übergeben werden, wird

    1. der Graph richtig gezeichnet

    2. zu jedem Messpunkt wird, wenn man ihn mit der Maus anfährt, die Kurzinfo z.B. 00:00-00:59 und Verbrauch: 21 angezeigt.

    3. Die Skalierung auf der x-Achse wird korrekt zu jedem Punkt angezeigt. (siehe Bild)

    Wenn ich energie_daten per for - Schleife aus den DB-Daten fülle, wird ebenfalls:

    1. der Graph richtig gezeichnet

    2. zu jedem Messpunkt wird, wenn man ihn mit der Maus anfährt, die Kurzinfo z.B. 00:00-00:59 und Verbrauch: 21 angezeigt.

    3. Die Skalierung auf der x-Achse wird NICHT angezeigt. (siehe Bild)

    Es muss ein Unterschied zwischen hardgecodetem String "00:00-00:59" und der Stringaufbereitung und Übergabe an die Liste per Programm sein.

    Der Datentyp von energie_data ist <class 'list'

    der print(energie_data) bricht jedesmal mit

    [<__main__.Observation object at 0xb5b84fd0>, <__main__.Observation object at 0xb5b84c10>, <__main__.Observation object at 0xb5b84b80>, <__main__.Observation object at 0xb5b84dd8>, <__main__.Observation object at 0xb5b84ac0>, <__main__.Observation object at 0xb5b848b0>, <__main__.Observation object at 0xb5b848c8>, <__main__.Observation object at 0xb5b84fa0>, <__main__.Observation object at 0xb5b849e8>, <__main__.Observation object at 0xb49c76e8>, <__main__.Observation object at 0xb49c7730>, <__main__.Observation object at 0xb49c75c8>, <__main__.Observation object at 0xb49c70e8>, <__main__.Observation object at 0xb49c7058>, <__main__.Observation object at 0xb49c70d0>, <__main__.Observation object at 0xb49c7070>, <__main__.Observation object at 0xb49c7700>, <__main__.Observation object at 0xb49c7040>, <__main__.Observation object at 0xb49c7208>, <__main__.Observation object at 0xb49c71f0>, <__main__.Observation object at 0xb49c7250>, <__main__.Observation object at 0xb49c71a8>, <__main__.Observation object at 0xb49c7820>, <__main__.Observation object at 0xb49c7100>]

    ab?????

    Hier noch der Code der App:

    Falls Du Tell oder jemand noch eine Idee hat.....

    Bin jetzt dann soweit, dass ich ohne die Skalierung an der x-Achse lebe :@

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!