Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. [Vorlage] Google Charts Beispiel

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    [Vorlage] Google Charts Beispiel

    This topic has been deleted. Only users with topic management privileges can see it.
    • Negalein
      Negalein Global Moderator @Mic last edited by

      @Mic sagte in [Vorlage] Google Charts Beispiel:

      @Negalein
      Ich habe keinen Hintergrund definiert, also transparent gelassen und über einen vorhandenen Hintergrund gelegt.
      Die Wetter-Symbole sind separate Widgets Typ "basic - String img src". Hier ein Export dieser Widgets:

      Danke, das wars!

      Was ich noch nicht geschafft habe, dass ich das Widget auf 441x232px einstellen muss.
      Dadurch habe ich links und rechts sehr viel Rand.
      Edit vis (3).png

      Stell ich es kleiner, kommen die Scrollbalken.
      Die bekomme ich nicht weg.

      Und ich kann das Widget nur von Rechts kleiner schieben.
      Links bleibt immer der Rand.
      Edit vis (4).png

      Hast du einen Tipp?

      Mic 1 Reply Last reply Reply Quote 0
      • Mic
        Mic Developer @Negalein last edited by

        @Negalein
        Ggf. über CSS steuern. D.h. View im Browser öffnen, im Chrome F12 drücken, und damit das CSS ansehen und entsprechend versuchen, das zu verstehen und korrigieren über VIS CSS.

        Negalein 1 Reply Last reply Reply Quote 0
        • Negalein
          Negalein Global Moderator @Mic last edited by

          @Mic sagte in [Vorlage] Google Charts Beispiel:

          @Negalein
          Ggf. über CSS steuern. D.h. View im Browser öffnen, im Chrome F12 drücken, und damit das CSS ansehen und entsprechend versuchen, das zu verstehen und korrigieren über VIS CSS.

          Puhhhh, CSS 😞

          Hast du bei dir noch was spezielles eingestellt, dass es dir so passend angezeigt wird?
          1559077500031-dasw[1].png

          Mic 1 Reply Last reply Reply Quote 0
          • Mic
            Mic Developer @Negalein last edited by Mic

            @Negalein sagte in [Vorlage] Google Charts Beispiel:

            Hast du bei dir noch was spezielles eingestellt, dass es dir so passend angezeigt wird?

            Nein, ich habe es einfach größer gelassen. Da es transparent ist, stört mich das insgesamt nicht.

            1 Reply Last reply Reply Quote 1
            • B
              brain @Mic last edited by

              @Mic
              Danke. Daran scheint es aber nicht zu liegen (hatte ich davor schon so eingestellt).
              Ich habe das Skript nochmal neu kopiert und eingefügt. Nun stürzt meine Javascript aber zumindest nicht mehr ab. Die HTML-Datei wird aber immer noch nicht erzeugt.
              Ich habe die folgende Funktion des Codes im Verdacht. Muss das FS-Modul installiert werden oder ist das eine Standardfunktion von Javascript?

              function writeWeatherHtml() {
                 // Requiring fs module in which writeFile function is defined. 
                 const fs = require('fs');
                 // Write data in 'Output.txt' . 
                 fs.writeFile(FILE_PATH, buildHTML(), (err) => { 
                     if (err) throw err; // In case of a error throw err. 
                 }) 
              }
              
              1 Reply Last reply Reply Quote 0
              • Mic
                Mic Developer last edited by

                @brain
                Gibt es denn auch wirklich das Verzeichnis bei dir, das im Script unter const FILE_PATH steht?

                Falls ja, dann hier den Pfad ebenso korrigieren/setzen und dieses Script mal testen:

                const FILE_PATH = '/opt/iobroker/iobroker-data/files/vis.0/M3/test.txt';
                const fs = require('fs');
                fs.writeFile(FILE_PATH, 'Test-text', (err) => { 
                    if (err) throw err;
                });
                

                Erzeugt Datei "test.txt" im Verzeichnis "'/opt/iobroker/iobroker-data/files/vis.0/M3/", aber nur, wenn dieses Verzeichnis auch existiert.

                B 1 Reply Last reply Reply Quote 0
                • B
                  brain @Mic last edited by

                  @Mic
                  Danke für den Tipp. Die Datei liegt dort, ist nur über ioBroker selbst nicht sichtbar. Habe mich über FTP verbunden und siehe da...

                  1 Reply Last reply Reply Quote 0
                  • N
                    Nikoxx last edited by

                    Guten Abend,

                    danke für das Skript, funktioniert super. Nun wollte ich das gleiche nur mit einem "Donut-Diagramm" machen. Mit Google würde das gehen aber ich bekomme das Skript nicht umgebaut. Würde gerne aus verschiedenen Datenpunkten die Prozentwerte anzeigen lassen. Versuche das jetzt schon seit 2 Stunden und bevor ich noch 3 Stunden rumprobiere hab ich gedacht ich frag hier mal nach. Vieleicht kann mir ja jemand helfen, ist bestimmt keine große Sache für jemanden der Ahnung hat.

                    LG

                    1 Reply Last reply Reply Quote 0
                    • H
                      hopser2000 last edited by

                      Hallo zusammen,

                      ich find die Idee hier super und will mir meine eigenen Charts ebenfalls zusammenbauen. Ich habe nur das Problem, dass die per JS erzeugte Datei nicht angezeigt wird. Im Filesystem wird sie angelegt. So weit alles bestens. Beim Aufruf der VIS zeigt mir die Konsole aber immer
                      "[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (chart.html, line 0)"

                      Gibt's da noch was einzustellen irgendwo??

                      Mic 1 Reply Last reply Reply Quote 0
                      • Mic
                        Mic Developer @hopser2000 last edited by

                        @hopser2000 sagte in [Vorlage] Google Charts Beispiel:

                        status of 404 (Not Found)

                        Aufgrund des 404-Fehlers würde ich zunächst mal prüfen, ob der Pfad auch wirklich korrekt in VIS eingetragen wurde.

                        H 1 Reply Last reply Reply Quote 0
                        • H
                          hopser2000 @Mic last edited by hopser2000

                          @Mic Ja der passt. Wenn ich die durch das JS generierte Datei an die gleiche Stelle Hochlade, dann zeigt er sie in der VIS auch an. Das JS schreibt die Änderungen auch in das File rein, aber diese Änderungen werden dann nicht in der VIS angezeigt (auch nicht nach reload und cache löschen etc).

                          Wie mache ich denn generell Verzeichnisse / Dateien "sichtbar" für die VIS? Gibt's da was, wo ich was einstellen kann/muss?

                          Mic 1 Reply Last reply Reply Quote 0
                          • Mic
                            Mic Developer @hopser2000 last edited by

                            @hopser2000 sagte in [Vorlage] Google Charts Beispiel:

                            diese Änderungen werden dann nicht in der VIS angezeigt (auch nicht nach reload und cache löschen etc).

                            Nimmst du das Widget "basic - iFrame"? Bei "Updatezeit (ms)" habe ich übrigens 3600000 - also alle 60 Minuten, was für meinen Anwendungszweck reicht.

                            1 Reply Last reply Reply Quote 0
                            • H
                              hopser2000 last edited by

                              Ja genau, verwende das Basic-iFrame Widget.

                              1 Reply Last reply Reply Quote 0
                              • Mic
                                Mic Developer last edited by

                                zu den Zugriffsrechten etc. in VIS kann ich leider nicht wirklich helfen, ggf. machst du am besten einen neuen Thread diesbezüglich auf, falls hier keine weitere Hilfe kommt.

                                1 Reply Last reply Reply Quote 0
                                • H
                                  hopser2000 last edited by

                                  Ok, danke. Werd ich dann machen falls ich nicht weiter komme.

                                  1 Reply Last reply Reply Quote 0
                                  • H
                                    hopser2000 last edited by

                                    Hab die Lösung gefunden. Das writeFile musste ich anpassen. Mittels https://github.com/ioBroker/ioBroker.javascript/blob/master/docs/en/javascript.md#writefile funktioniert es!

                                    Mic 1 Reply Last reply Reply Quote 0
                                    • Mic
                                      Mic Developer @hopser2000 last edited by

                                      @hopser2000 sagte in [Vorlage] Google Charts Beispiel:

                                      Hab die Lösung gefunden. Das writeFile musste ich anpassen. Mittels https://github.com/ioBroker/ioBroker.javascript/blob/master/docs/en/javascript.md#writefile funktioniert es!

                                      Cool. Du hast mein obiges Script angepasst, oder? Was denn genau, magst du mal bitte vorher/nachher posten?

                                      H 1 Reply Last reply Reply Quote 0
                                      • H
                                        hopser2000 @Mic last edited by

                                        @Mic ja gerne. Wird aber erst morgen. Auf dem iPad ist der Editor nicht das wahre...

                                        Agria4800 1 Reply Last reply Reply Quote 0
                                        • Agria4800
                                          Agria4800 @hopser2000 last edited by

                                          @hopser2000 Bin auch interessiert, würde mich über Info freuen, was du geändert hast.

                                          1 Reply Last reply Reply Quote 0
                                          • H
                                            hopser2000 last edited by

                                            Hallo zusammen,

                                            also, folgendes habe ich angepasst, um den Inhalt für das iFrame-Widget in VIS sichtbar zu machen.

                                            Ausgehend von dem obigen Code:

                                            const FILE_PATH = '/opt/iobroker/iobroker-data/files/vis.0/M3/test.txt';
                                            const fs = require('fs');
                                            fs.writeFile(FILE_PATH, 'Test-text', (err) => { 
                                                if (err) throw err;
                                            });
                                            

                                            Was nicht benötigt wird ist die Zeile

                                            const fs = require('fs');
                                            

                                            Die Zeile

                                            fs.writeFile(FILE_PATH, 'Test-text', (err) => { 
                                            

                                            muss abgeändert werden in:

                                            writeFile('vis.0', FILE_PATH, buildHTML(), (err) => {
                                            

                                            Dadurch wird die writeFile-Funktion vom Biobroker verwendet. Doku dazu siehe hier

                                            Da ich für den ersten Parameter der writeFile Funktion "vis.0" angegeben habe, wird die Datei in den Pfad FILE_PATH geschrieben, relativ zu /opt/iobroker/iobroker-data/files/vis.0

                                            Ist also FILE_PATH = "mySubfolder/myOutputFile.txt" wird die Datei in folgendes Verzeichnis geschrieben:

                                            /opt/iobroker/iobroker-data/files/vis.0/mySubfolder/myOutputFile.txt

                                            Die Verzeichnisstruktur (folgend auf .../vis.0/ ) muss aber zwingend vorhanden sein.

                                            Im iFrame-Widget wird als Quelle dann angegeben:

                                            /vis.0/mySubfolder/myOutputFile.txt

                                            Hoffe das war so weit verständlich. Ansonsten gern nachfragen.

                                            VG,
                                            Andreas

                                            Mic 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            1.0k
                                            Online

                                            31.7k
                                            Users

                                            79.7k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            11
                                            50
                                            5590
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo