Suche Minimalbeispiel Flask + Charting

  • Hallo Forum,


    mein aktuelles Projekt (Ermittlung der stauärmsten Startzeit für Autofahrt von A nach B an verschiedenen Wochentagen) nimmt langsam Form an. Ermittlung der Daten und Speicherung in SQLite-DB funktioniert.


    Nächster Schritt wäre die Visualisierung (einfache Linecharts, die die Fahrtdauer abhängig von Uhrzeit des Aufbruchs veranschaulichen) auf einer eigenen Website. Dazu arbeite ich mich gerade in Flask ein. Langsam gewinne ich Einblick.


    Was noch überhaupt nicht geklappt hat, anhand diverser Tutorials, die ich gefunden habe, ist entsprechende Grafiken zu produzieren. Zahlreiche Beispiele habe ich zwar gefunden. Diese erklären allerdings wenig, sondern geben eher Copy-Paste-Beispiele, von denen ich keines zum Laufen bringen konnte (die Anwendung läuft zwar fehlerfrei durch, es erscheinen aber keine Grafiken). Da mir der Durchblick fehlt, ist es schwer zu erschließen, woran es hakt.


    Am besten könnte ich mir vermutlich Kenntnisse erarbeiten, wenn ich ein allersimpelstes lauffähiges Beispiel einer Flask-App mit Chart hätte. Ob mit Chart.js, Plotly oder was es sonst noch gibt, wäre mir erstmal egal, solange es einfach ist. Die Daten dürfen gerne hartkodiert im Listing stehen, die spätere Anbindung an meine Datenbank kriege ich bestimmt hin. Hättet Ihr einen Tip, wo soetwas zu finden ist?


    Unter anderem mit diesen Anleitungen hatte ich keinen Erfolg (was vermutlich nur an meinem fehlenden Basiswissen liegt):

    https://pythonspot.com/flask-a…ing-charts-using-chart-js/

    https://github.com/plotly/plotlyjs-flask-example

  • Ein simpler REST-Endpoint, der die Daten als JSON bereitstellt, und AJAX + Chart.JS clientseitig - das dürfte die einfachste und sauberste Lösung sein, von statischen, serverseitig generierten Charts mal abgesehen.

    Wenn du diesen Weg einschlägst, solltest du sich aber nicht auf Flask+Chart.JS konzentrieren, sondern auf den Flask-Teil und dann auf den Chart.JS-Teil, die im Grunde vollkommen unabhängig voneinander sind.


    Dazu müsstest du aber das nicht ganz unwesentliche Problem des fehlenden Basiswissens beseitigen.

  • Google Charts ist vielleicht ein einfacher Einstieg: https://google-developers.apps…ve/docs/gallery/linechart


    Als erstes mal das Beispielfile unveraendert als statisches HTML ausliefern.


    Wenn das klappt, diesen Bereich anpassen:

    Code
           var data = google.visualization.arrayToDataTable([
              ['Year', 'Sales', 'Expenses'],
              ['2004',  1000,      400],
              ['2005',  1170,      460],
              ['2006',  660,       1120],
              ['2007',  1030,      540]
            ]);


    Und wenn das auch geklappt hat, diesen Bereich mit dem Python-Script generieren.


    Und dann langsam hocharbeiten: nur noch die Daten laden und den Chart dynamisch im Browser erstellen...

  • Tell: Super!!! Genau soetwas habe ich gesucht. Ein Beispiel, das mir den Einstieg ermöglicht und auf Anhieb funktioniert! Und das ich auch mit meinen noch begrenzten Möglichkeiten direkt umsetzen kann. Vielen Dank!!


    Linus: Danke auch für die Stichworte zur weiteren Recherche und Einarbeitung. Habe schon einige Projekte im Sinn, für die der von dir skizzierte Weg vermutlich der richtige sein wird. Einen generellen Einstieg in das Thema zu finden, finde ich wegen der Vielzahl der verfügbaren Frameworks und Libraries enorm schwierig. Ein gutes Handbuch, dass gründlich bei "0" anfängt - quasi from Zero to Hero ;) habe ich noch nicht gefunden - was nicht heißt, dass es das nicht gibt und ich für entsprechende Tips für Literatur auf Papier oder online nicht dankbar wäre. :)

  • > entsprechende Tips für Literatur auf Papier

    Eine gruendliche Einfuehrung ist "Interactive Data Visualization for the Web". Das faengt ganz vorne an und ist recht ausfuehrlich.


    Es nutzt aber direkt D3, bietet also lange nicht so viel Komfort wie Google Charts. Und die Line Charts kommen erst auf Seite 200, es braucht also einiges an Durchhaltevermoegen ;)


    Die Barcharts fangen auf Seite 89 an, man muss also nicht das halbe Buch lesen bevor man was machen kann. Scatterplots werden ebenfalls recht frueh behandelt.


    Der Aufbau ist wirklich schoen sauber Schritt fuer Schritt. Er faengt beim DOM an, gibt einen Ueberblick von SVG und dann legt er los mit den Diagrammen.

  • Hallo,


    Quote

    Ein gutes Handbuch, dass gründlich bei "0" anfängt - quasi from Zero to Hero

    Macht IMHO keinen Sinn. Weil egal ob du Python oder JavaScript oder ... einsetzt, du musst die Grundlagen der Sprache drauf haben. Und davon gehen die dort in den Dokus der Grafikframeworks halt aus, dass du Datenstrukturen, Klassen, Methode oder was auch immer auf die Sprache zutrifft, kennst.


    Gruß, noisefloor

  • Linus: Nein, die Neuauflage von 2017.


    Das Ist mit D3 V4 recht aktuell.


    Ich bin mir allerdings nicht ganz sicher ob es die Beschreibung der Fetch-API schon richtig darstellt. Die ist eventuell spaeter dazugekommen.

  • @ Tell: Nach Lektüre des Inhaltsverzeichnis' und einer Leseprobe muss ich sagen: Ein sehr guter Tip! Genau soetwas habe ich gesucht. Hast mir mit deinen beiden Anregungen schnell und gut weitergeholfen! Danke nochmal dafür! :)