Graph darstellen mittels Chart.js

  • Hallo zusammen :shy:


    Eine Frage bezüglich der Library Chart.js in Verbindung mit Bottle.:denker:


    Ich ich habe ein exempel chart exempel.zip von Chart.js das funktioniert so weit lokal (PC) auch ohne Probleme. Nun habe ich die Dateien in meine Bottle Umgebung eingebunden. Aber das darstellen durch Chart.js geht nicht mehr sprich die Seite wird dargestellt aber ohne einen Ansatz von einer Grafik (Raspi). Wo drückt der Schuh? Wieso wird die Grafik nicht dargestellt?:@

    Hier mal den Code als Ganzes my_web_app.zip


    Muss ich noch was installieren?






    :danke_ATDE:

    Über einen :thumbup: freue ich mich;)

  • Devtools öffnen, in die Konsole schauen, nach Fehlern ausschau halten. Zum Netzwerk-Tab wechseln, Seite neu laden, nach 4xx und 5xx Status codes schauen.


    Edit: im einen Bild siehst du es doch schon lauter 404. Deine Pfade sind falsch. Ohne den gesamten Code zu kennen kann man es nicht sicher sagen, aber von deiner Verzeichnisstruktur ausgehend: /css/style.css und /js/script.js

  • Hey Linus danke für Dein schnellen Tipp.


    Habe mir das angeschaut und es ist die Bestätigung von meiner Vermutung. “Failed to load resource”



    Aber ich Habe die Dateien mit der derselben Struktur wie im Ordner vom Exempel. Also im selben Verzeichnis. Oder muss ich jetzt einen anderen Pfad angeben?


    Beim Versuch die Dateien script.js und/oder style.css zu löschen weist mich PyCharm darauf hin, dass die erwähnten Dateien in der Datei index.tpl Verwendung finden.


    Über einen :thumbup: freue ich mich;)

  • Update:;)

    Ich habe nun Ordnung geschaffen und habe die Dateien in Die entsprechenden Dateien gelegt. In der index.tpl Datei sauber die Pfade angegebenen zu den CSS und JS Dateien.


    Die beiden "Failed to load resource fehler" fürs CSS habe ich nun nicht mehr..

    Aberrr das JS wird dennoch nicht gefunden.:stumm:


    Über einen :thumbup: freue ich mich;)

  • Da hast du definitiv etwas falsch verstanden, so ist das nicht gedacht.

    Ja durch ein wenig probieren kam ich zum Schluss das so die Fehlermeldung vom CSS nicht mehr auftritt. Aber ja war klar falsch. :wallbash:


    Wenn das Verzeichnis htdocs dein Webroot ist, muss der Pfad /js/script.js lauten


    Ich habe das nach Deinem ersten Post schon ausprobiert sorry ich bin da nicht drauf eingegangen. Aber das war leider auch negativ.

    Mittlerweile habe ich die Lösung.

    Mit Devtools habe ich die restlichen Dateien, die geladen werden, genauer angeschaut und nun kann ich sagen, dass ich /static/js/script.js verwenden musste. tadaaaa es funktioniert;)


    Aber wieso der Bezug zu dem Verzeichnis static?

    Über einen :thumbup: freue ich mich;)

  • Ja ich habe mich auf die Verzeichnisstruktur in PyCharm verbissen.:/


    Ich habe viele Beiträge hier im Forum angeschaut. Aber irgendwie kam ich nicht auf den Punkt.

    Das eigentliche Ziel ist ja Das ich die Grafik in Realtime darstellen kann. Nun gut ich versuchte mich da schlauzumachen und kam zum Schluss, Dass ich mit jquery arbeiten kann.;)


    Als Vorlage habe ich dann dieses Video genommen.


    Am Schluss wird gezeigt wie man einen Button erstellt zum die werte zu aktualisieren, ohne die Seite neu zu laden. Ich denke, ich kann den Botten dann einfach ersetzen mit einer schleife (Ajax?).:conf:


    Nun gut aber die Differenz ist, dass ich Bottle anstelle Flask verwende. Die Syntax ist so wie ich gesehen habe fast identisch also sollte doch das kein Problem sein … Ich habe eine neue Route angelegt mit den Namen “value” Das Ziel Eifach werte mit random für json_dumps vorbereiten. das klappt auch soweit wenn ich die URL ..\value öffne erhalte ich {"result": [3, 4, 18, 6, 9, 14, 7, 13, 17, 10]} das sieht doch schon mal ganz gut aus.

    Jetzt habe ich diese werte ins Chart.js übertragen.


    Gemäß Video muss ich zuerst das jquery script ins index.tpl (html) landen auf der Index Seite soll dann die Grafik angezeigt werden.



    In der dazugehörigen Js Datei für das Chart implementieren ich erst mal meine route, wenn ich das so sagen kann. var getData = $.get('value');


    Dort wo der wert eingetragen werden soll setze Ich ein getData.done(function (result) {

    dann übergebe Ich die Daten mit result.result an die Grafik.



    Das schlägt leider fehl wo Könnte das Problem sein? Also Grafik wird nicht angezeigt.:wallbash:

    Oder fahre Ich einen falschen Ansatz? Ich muss dazusagen, dass das meine erste Begegnung mit Javascript ist, und muss mich da noch ziemlich Einarbeiten.


    Ich bin sonst mit Python am Arbeiten.:)


    Könnte mir hier jemand einen Ratschlag geben?:daumendreh2:

    Über einen :thumbup: freue ich mich;)

  • Zum Glück.


    Wo ist nun das konkrete Problem, abgesehen von "geht nicht"? Browser-Console auf Fehlermeldungen kontrolliert?


    Soll es wirklich ein Button werden oder willst du die Daten anzeigen lassen, sobald sie am Server verfügbar sind? Dann heißt das Stichwort nämlich Websocket.


    Und keine Sorge, so kompliziert ist das alles gar nicht. Python, Web-Entwicklung und Charts - alles ganz tolle Dinge... :bravo2:


    Bottle verwende ich aber nicht - nur Flask bzw das mehr oder weniger API-kompatible, aber asynchrone sanic.

  • Hey Linus danke für Deinen Input.;)


    Das effektive Problem liegt darin dass wahrscheinlIch irgendetwas mit der js. Datei nicht passt. SprIch das Saubere implementieren von dem jQuery in die Grafik. Ich habe den Browser aufruf auf Fehler überprüft da wird alles geladen unter anderem script.js Aber eben dargestellt wird NIchts.

    JavaScript: Programm original aus example und funktioniert.
    // Our labels along the x-axis
    var years = [1500,1600,1700,1750,1800,1850,1900,1950,1999,2080];
    // For drawing the lines
    var africa = [86,114,106,106,107,111,133,221,783,2478];
    var asia = [282,350,411,502,635,809,947,1402,3700,5267];

    So nun möchte ich die Zeile var Afrika ersetzen mit meinen selbst erzeugten zehn werten


    Ich weis aber nicht genau wie ich habe es unten mal so versucht wie ich denke, dass es funktionieren sollte(??). Ich ersetze die Zeile Afrika mit meinen neuen zehn werten die ich mit jQuery übergebe.:|


    JavaScript: Programm mit jQuery - funktioniert nicht
    var getData = $.get('value');
    // Our labels along the x-axis
    var years = [1500,1600,1700,1750,1800,1850,1900,1950,1999,2080];
    // For drawing the lines
    getData.done(function (result) {
      var result.result
    });
    //var africa = [86,114,106,106,107,111,133,221,783,2478];
    var asia = [282,350,411,502,635,809,947,1402,3700,5267];



    Das mit dem Websocket habe Ich gelesen. Ich dachte für meine Ansprüche also alle 5 Sekunden eine abfrage an den Server senden das sollte reIchen ohne Websocket. Aber klar, wenn du denkst, das es einfacher/moderner ist via Websocket dann bin Ich offen.;)


    Danke für deine beruhigenden Worte. :)Ich denke auch nicht, dass es kompliziert ist. Es fehlt mir einfach die Routine und eine Idee wie das gesamte Konstrukt aussehen könnte ab Python.

    Über einen :thumbup: freue ich mich;)

  • > var getData = $.get('value');

    Was kommt raus wenn der Browser dieses URL abruft?


    > var result.result

    -> "Uncaught SyntaxError: Unexpected token ."


    (Damit das nicht wieder passiert: Console aufklappen und den Code so lange verbessern bis keine Meldung mehr kommt. Wie schon von Linus im Beitrag #2 geraten wurde)


    An dieser Stelle muesste eine Zuweisung an africa stehen:


    Code
    africa = result.???? ;
  • Hallo Tell Vielen Dank für Deine Zeit.:)


    Wenn ich diesen Link aufrufe, erhalte ich Folgendes:


    Das sollte doch passen?:-/


    Ja danke für den Hinweis. Ich hatte nur Das Netzwerk kontrolliert und gesehen Das die js. Datei heruntergeladen wurde.

    Unter “Sources” habe ich dann Das js. Programm gefunden und habe versucht wie Du gesagt hast alles auszuprobieren, bis es funktioniert.

    Okay Grafik wird dargestellt ohne Fehler aber auch ohne die kurve “africa” irgendWas wird noch nicht sauber übergeben.


    Was ich bis jetzt gemacht habe:


    Die getData.done(function (result) in ein Container gepackt die die komplette Grafik beinhaltet.

    Das result der variabel africa zugeordnet


    und mit dem africa = result.??? Rumgespielt und wenn ich. africa = result schreibe nur dann wird eine Grafik dargestellt aber eben ohne “africa” kurve in der Grafik.


    Ich habe jetzt 2h rumgespielt. Ist ein Fehler bei der Übergabe? Ist der Container so falsch?


    Über einen :thumbup: freue ich mich;)

  • > Das sollte doch passen?

    Sieht nicht schlecht aus. Stimmt der MIME-Type?


    Wenn alles passt, dann muesste die Zuweisung so aussehen:


    Code
    var africa = result.result ;


    Wenn's nicht klappt: ganz oben in die Funktion schreiben:


    Code
    console.log( request ) ;
    console.log( typeof request ) ;

    Auf der Console wird dann der Wert und der Typ von Request ausgegeben.


    Warscheinlich ist es besser $.getJSON( .. ) zu nehmen, dann bekommt der Server Angaben zum erwarteten Datentyp.

  • Hey Tell:bravo2:


    Mit Deinem letztem Hinweis $.getJSON( .. ) hat es geklappt vielen Dank dafür!! Entlieh! So cool:)


    Kannst Du mir einen Hinweis geben wie ich mehrere Datenübergabe? Sprich jetzt habe Afrika, das direkt von Python die Daten abfragt, aber wie mache ich das wenn ich z. B Asien auch implementieren möchte. ich habe da rumgespielt aber ich benötige ja einen weiteren Container getData2.done(function (result2) { für die komplette Grafik das irgendwie nicht sinn macht. :conf:


    In den bestehenden Container getData.done(function (result, result2) anzufügen und dasselbe für den Rückgabewert von bettle ergab auch kein Ergebnis.


    ich habe mir heute Literatur bestellt zum Thema Javascript bin gespannt.:)

    Über einen :thumbup: freue ich mich;)

  • > Sprich jetzt habe Afrika, das direkt von Python die Daten abfragt, aber wie mache

    > ich das wenn ich z. B Asien auch implementieren möchte.

    Am einfachsten die Daten fuer beide Kurven zur Uebertragung in ein Objekt packen:


    Code
    { "africa" : [86,114,106,106,107,111,133,221,783,2478], "asia" : [282,350,411,502,635,809,947,1402,3700,5267] }


    Das Auspacken wird dann auch viel logischer:


    Code
    var africa = result.africa ;
    var asia   = result.asia ;
  • Hey ich melde mich nochmals. Tell Dein Tipp hat supergeholfen danke dafür:)


    Hier den Code/Bild wie es funktioniert ohne automatischen refresh.


    Echt super Cooooooooool und im Nachhinein eigentlich nicht schwierig8) Danke fürs Verständliche erklären:danke_ATDE:

    -------------------------------------------------------


    Soooo: Nun versuchte ich das Ganze in Echtzeit darzustellen mit einer Aktualisierung von 2 sek.

    HTML
    <meta http-equiv="refresh" content="2" />


    Ist aber nicht sauber und nicht schön - klar ... schön Ist es, wenn nur die entsprechende Kurve aktualisiert wird, wie ich in x Beispielen gesehen habe.

    Also vergesse ich das oben Genante Programm gleich wider und schaute mich anderweitig um. Ich habe da Google ausgequetscht und bim auf das gekommen. Ist zwar nicht Chart.js aber nutzt jQuery und refresh.


    Ich habe den Input versucht in mein Code zu implementieren:



    Aber dann wird die Grafik nicht mehr dargestellt auch im Devtool kann ich nicht erkennen, was der Fehler Ist. :@



    Okay google weiter ausfragen nun bin ich zu Folgendem gekommen :huh:

    Chart.js hat ja die Möglichkeit von “update” aber hier kann ich nirgends eine update Zeit angeben.. :wallbash:


    Irgendwie werde ich nicht schlau, wie ich das in meinem Beispiel einsetzen kann.

    ich muss doch irgendwie die Zeit Achse und die Flow kurve aktualisieren mit meinen 2 sek. aber wo/wie mach ich das? :sleeping:

    Über einen :thumbup: freue ich mich;)

  • Da der ganze Code nirgends zu finden ist, ist helfen nicht so einfach...


    Trotzdem:


    1) Den ganzen JavaScript-Code in eine Funktion packen, zum Beispiel update.


    Dann folgenden Code unter update schreiben:


    Code
    update() ;                      // Erster Update, sofort
    setInterval( update, 2000 ) ;   // Und dann alle 2 Sekunden wieder


    Uebrigens: huebsches まっくろくろすけ

    Edited once, last by Tell ().