Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. [Vorlage] Google Charts Beispiel

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.5k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.1k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    2.7k

[Vorlage] Google Charts Beispiel

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
50 Beiträge 11 Kommentatoren 7.9k Aufrufe 18 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • MicM Mic

    @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.

    NegaleinN Offline
    NegaleinN Offline
    Negalein
    Global Moderator
    schrieb am zuletzt editiert von
    #13

    @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

    ° Node.js: 20.17.0 NPM: 10.8.2
    ° Proxmox, Ubuntu 22.04.3 LTS
    ° Fixer ---> iob fix

    MicM 1 Antwort Letzte Antwort
    0
    • NegaleinN Negalein

      @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

      MicM Offline
      MicM Offline
      Mic
      Developer
      schrieb am zuletzt editiert von Mic
      #14

      @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 Antwort Letzte Antwort
      1
      • MicM Mic

        @brain sagte in [Vorlage] Google Charts Beispiel:

        Ich habe gerade mal versucht das Skript zum Laufen zu bekommen. Irgendwo scheint was zu fehlen... Die html-Datei wird nicht erzeugt. Ich vermute, dass mir irgendwelche NPM-Module im Javascript Adapter fehlen. Welche werden denn vorausgesetzt?

        NPM-Module eigentlich keine, ich habe bei mir das aktiviert:
        jsa77.png

        B Offline
        B Offline
        brain
        schrieb am zuletzt editiert von
        #15

        @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 Antwort Letzte Antwort
        0
        • MicM Offline
          MicM Offline
          Mic
          Developer
          schrieb am zuletzt editiert von
          #16

          @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 Antwort Letzte Antwort
          0
          • MicM Mic

            @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 Offline
            B Offline
            brain
            schrieb am zuletzt editiert von
            #17

            @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 Antwort Letzte Antwort
            0
            • N Offline
              N Offline
              Nikoxx
              schrieb am zuletzt editiert von
              #18

              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 Antwort Letzte Antwort
              0
              • H Offline
                H Offline
                hopser2000
                schrieb am zuletzt editiert von
                #19

                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??

                MicM 1 Antwort Letzte Antwort
                0
                • H hopser2000

                  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??

                  MicM Offline
                  MicM Offline
                  Mic
                  Developer
                  schrieb am zuletzt editiert von
                  #20

                  @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 Antwort Letzte Antwort
                  0
                  • MicM Mic

                    @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 Offline
                    H Offline
                    hopser2000
                    schrieb am zuletzt editiert von hopser2000
                    #21

                    @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?

                    MicM 1 Antwort Letzte Antwort
                    0
                    • H 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?

                      MicM Offline
                      MicM Offline
                      Mic
                      Developer
                      schrieb am zuletzt editiert von
                      #22

                      @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 Antwort Letzte Antwort
                      0
                      • H Offline
                        H Offline
                        hopser2000
                        schrieb am zuletzt editiert von
                        #23

                        Ja genau, verwende das Basic-iFrame Widget.

                        1 Antwort Letzte Antwort
                        0
                        • MicM Offline
                          MicM Offline
                          Mic
                          Developer
                          schrieb am zuletzt editiert von
                          #24

                          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 Antwort Letzte Antwort
                          0
                          • H Offline
                            H Offline
                            hopser2000
                            schrieb am zuletzt editiert von
                            #25

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

                            1 Antwort Letzte Antwort
                            0
                            • H Offline
                              H Offline
                              hopser2000
                              schrieb am zuletzt editiert von
                              #26

                              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!

                              MicM 1 Antwort Letzte Antwort
                              0
                              • H hopser2000

                                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!

                                MicM Offline
                                MicM Offline
                                Mic
                                Developer
                                schrieb am zuletzt editiert von
                                #27

                                @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 Antwort Letzte Antwort
                                0
                                • MicM Mic

                                  @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 Offline
                                  H Offline
                                  hopser2000
                                  schrieb am zuletzt editiert von
                                  #28

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

                                  Agria4800A 1 Antwort Letzte Antwort
                                  0
                                  • H hopser2000

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

                                    Agria4800A Offline
                                    Agria4800A Offline
                                    Agria4800
                                    schrieb am zuletzt editiert von
                                    #29

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

                                    1 Antwort Letzte Antwort
                                    0
                                    • H Offline
                                      H Offline
                                      hopser2000
                                      schrieb am zuletzt editiert von
                                      #30

                                      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

                                      MicM 1 Antwort Letzte Antwort
                                      0
                                      • H hopser2000

                                        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

                                        MicM Offline
                                        MicM Offline
                                        Mic
                                        Developer
                                        schrieb am zuletzt editiert von
                                        #31

                                        @hopser2000
                                        Vielen Dank hierfür! :sunglasses:
                                        Ich habe das Script entsprechend aktualisiert mit Version 0.2, ebenso verbessertes Error-Handling und Debug-Ausgaben im Log, falls LOG_DEBUG auf true.

                                        Link zum aktuellen Script

                                        1 Antwort Letzte Antwort
                                        0
                                        • H Offline
                                          H Offline
                                          hopser2000
                                          schrieb am zuletzt editiert von
                                          #32

                                          Gern geschehen.
                                          Bin selbst dabei mir was zusammenzubauen, um Stromzählerstände zu visualisieren mit Google Charts. Mein Ansatz ist, das Grundgerüst des iFrame in ein Template zu packen inkl. Optionen und dann die Daten aus der Datenbank (MySQL) zu selektieren und im Template zu ersetzen.
                                          Funktioniert so weit auch schon im Großen und Ganzen. Nur noch tunen ;-)

                                          1 Antwort Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          476

                                          Online

                                          32.4k

                                          Benutzer

                                          81.5k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Home
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe