Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • 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

  • Default (No Skin)
  • No Skin
Collapse
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.8k

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

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

[Vorlage] Google Charts Beispiel

Scheduled Pinned Locked Moved Visualisierung
vis
50 Posts 11 Posters 8.0k Views 18 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • MicM Offline
    MicM Offline
    Mic
    Developer
    wrote on last edited by
    #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 Reply Last reply
    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
      wrote on last edited by
      #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 Reply Last reply
      0
      • N Offline
        N Offline
        Nikoxx
        wrote on last edited by
        #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 Reply Last reply
        0
        • H Offline
          H Offline
          hopser2000
          wrote on last edited by
          #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 Reply Last reply
          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
            wrote on last edited by
            #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 Reply Last reply
            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
              wrote on last edited by 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 Reply Last reply
              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
                wrote on last edited by
                #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 Reply Last reply
                0
                • H Offline
                  H Offline
                  hopser2000
                  wrote on last edited by
                  #23

                  Ja genau, verwende das Basic-iFrame Widget.

                  1 Reply Last reply
                  0
                  • MicM Offline
                    MicM Offline
                    Mic
                    Developer
                    wrote on last edited by
                    #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 Reply Last reply
                    0
                    • H Offline
                      H Offline
                      hopser2000
                      wrote on last edited by
                      #25

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

                      1 Reply Last reply
                      0
                      • H Offline
                        H Offline
                        hopser2000
                        wrote on last edited by
                        #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 Reply Last reply
                        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
                          wrote on last edited by
                          #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 Reply Last reply
                          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
                            wrote on last edited by
                            #28

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

                            Agria4800A 1 Reply Last reply
                            0
                            • H hopser2000

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

                              Agria4800A Offline
                              Agria4800A Offline
                              Agria4800
                              wrote on last edited by
                              #29

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

                              1 Reply Last reply
                              0
                              • H Offline
                                H Offline
                                hopser2000
                                wrote on last edited by
                                #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 Reply Last reply
                                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
                                  wrote on last edited by
                                  #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 Reply Last reply
                                  0
                                  • H Offline
                                    H Offline
                                    hopser2000
                                    wrote on last edited by
                                    #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 Reply Last reply
                                    0
                                    • L Offline
                                      L Offline
                                      lastyle
                                      wrote on last edited by Negalein
                                      #33

                                      hallo,

                                      danke für das script, allerdings bekomme ich dieses nicht zum laufen. ich habe den subfolder angelegt und auch das test.txt schreiben getestet - alles wurde angelegt. aber das script in der version 0.2 wirft mir diesen fehler aus

                                      19:24:08.453	error	javascript.0 (11665) script.js.Wetter: script.js.Wetter:100
                                      19:24:08.454	error	javascript.0 (11665) at buildHTML (script.js.Wetter:100:112)
                                      19:24:08.455	error	javascript.0 (11665) at writeGoogleHtml (script.js.Wetter:62:48)
                                      19:24:08.455	error	javascript.0 (11665) at main (script.js.Wetter:44:5)
                                      19:24:08.455	error	javascript.0 (11665) at script.js.Wetter:39:1
                                      

                                      fehlt mir hier ein modul, eine datei am system? sorry für die absolute anfängerfrage

                                      Mod-Edit: Code/Log in Code Tags gepackt. Bitte benutzt die Code Tags Funktion -> </>
                                      Hier gehts zur Hilfe.

                                      MicM 1 Reply Last reply
                                      0
                                      • L lastyle

                                        hallo,

                                        danke für das script, allerdings bekomme ich dieses nicht zum laufen. ich habe den subfolder angelegt und auch das test.txt schreiben getestet - alles wurde angelegt. aber das script in der version 0.2 wirft mir diesen fehler aus

                                        19:24:08.453	error	javascript.0 (11665) script.js.Wetter: script.js.Wetter:100
                                        19:24:08.454	error	javascript.0 (11665) at buildHTML (script.js.Wetter:100:112)
                                        19:24:08.455	error	javascript.0 (11665) at writeGoogleHtml (script.js.Wetter:62:48)
                                        19:24:08.455	error	javascript.0 (11665) at main (script.js.Wetter:44:5)
                                        19:24:08.455	error	javascript.0 (11665) at script.js.Wetter:39:1
                                        

                                        fehlt mir hier ein modul, eine datei am system? sorry für die absolute anfängerfrage

                                        Mod-Edit: Code/Log in Code Tags gepackt. Bitte benutzt die Code Tags Funktion -> </>
                                        Hier gehts zur Hilfe.

                                        MicM Offline
                                        MicM Offline
                                        Mic
                                        Developer
                                        wrote on last edited by
                                        #34

                                        @lastyle
                                        Setze mal im Script const LOG_DEBUG = false; auf const LOG_DEBUG = true;.
                                        Dann Log-Ausgabe hier posten. Aber nicht vom JavaScript-Adapter aus der Ausgabe, sondern vom Log-File selbst. Das bekommst du im ioBroker Admin, im linken Menü auf "Log" klicken.

                                        L 1 Reply Last reply
                                        0
                                        • MicM Mic

                                          @lastyle
                                          Setze mal im Script const LOG_DEBUG = false; auf const LOG_DEBUG = true;.
                                          Dann Log-Ausgabe hier posten. Aber nicht vom JavaScript-Adapter aus der Ausgabe, sondern vom Log-File selbst. Das bekommst du im ioBroker Admin, im linken Menü auf "Log" klicken.

                                          L Offline
                                          L Offline
                                          lastyle
                                          wrote on last edited by
                                          #35

                                          @Mic danke für deine hilfe - das log spuckt folgendes aus
                                          @ mod: sorry für das notwendige edit...

                                          javascript.0	2020-02-04 20:27:49.516	error	(1700) at Script.runInContext (vm.js:133:20)
                                          javascript.0	2020-02-04 20:27:49.516	error	(1700) at script.js.Wetter:39:1
                                          javascript.0	2020-02-04 20:27:49.515	error	(1700) at main (script.js.Wetter:44:5)
                                          javascript.0	2020-02-04 20:27:49.515	error	(1700) at writeGoogleHtml (script.js.Wetter:62:48)
                                          javascript.0	2020-02-04 20:27:49.515	error	(1700) at buildHTML (script.js.Wetter:100:112)
                                          javascript.0	2020-02-04 20:27:49.515	error	(1700) TypeError: Cannot read property 'substr' of null
                                          javascript.0	2020-02-04 20:27:49.515	error	(1700) ^
                                          javascript.0	2020-02-04 20:27:49.514	error	(1700) let day = (i === 1) ? 'Heute' : getState('daswetter.0.NextDays.Location_1.Day_' + i + '.Tag_value').val.substr(0, 2);
                                          javascript.0	2020-02-04 20:27:49.514	error	(1700) script.js.Wetter: script.js.Wetter:100
                                          javascript.0	2020-02-04 20:27:49.511	warn	(1700) at script.js.Wetter:39:1
                                          javascript.0	2020-02-04 20:27:49.511	warn	(1700) at main (script.js.Wetter:44:5)
                                          javascript.0	2020-02-04 20:27:49.511	warn	(1700) at writeGoogleHtml (script.js.Wetter:62:48)
                                          javascript.0	2020-02-04 20:27:49.510	warn	(1700) at buildHTML (script.js.Wetter:100:41)
                                          javascript.0	2020-02-04 20:27:49.510	warn	(1700) getState "daswetter.0.NextDays.Location_1.Day_2.Tag_value" not found (3)
                                          javascript.0	2020-02-04 20:27:49.509	warn	(1700) at script.js.Wetter:39:1
                                          javascript.0	2020-02-04 20:27:49.509	warn	(1700) at main (script.js.Wetter:44:5)
                                          javascript.0	2020-02-04 20:27:49.509	warn	(1700) at writeGoogleHtml (script.js.Wetter:62:48)
                                          javascript.0	2020-02-04 20:27:49.509	warn	(1700) at buildHTML (script.js.Wetter:102:21)
                                          javascript.0	2020-02-04 20:27:49.508	warn	(1700) getState "daswetter.0.NextDays.Location_1.Day_1.Minimale_Temperatur_value" not found (3)
                                          javascript.0	2020-02-04 20:27:49.508	warn	(1700) at script.js.Wetter:39:1
                                          javascript.0	2020-02-04 20:27:49.507	warn	(1700) at main (script.js.Wetter:44:5)
                                          javascript.0	2020-02-04 20:27:49.507	warn	(1700) at writeGoogleHtml (script.js.Wetter:62:48)
                                          javascript.0	2020-02-04 20:27:49.507	warn	(1700) at buildHTML (script.js.Wetter:101:21)
                                          javascript.0	2020-02-04 20:27:49.506	warn	(1700) getState "daswetter.0.NextDays.Location_1.Day_1.Maximale_Temperatur_value" not found (3)
                                          javascript.0	2020-02-04 20:27:49.491	info	(1700) Start javascript script.js.Wetter
                                          
                                          MicM 1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          337

                                          Online

                                          32.4k

                                          Users

                                          81.5k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Home
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe