Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Material Design Widgets: JSON Chart Widget

    NEWS

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Material Design Widgets: JSON Chart Widget

    This topic has been deleted. Only users with topic management privileges can see it.
    • T
      tourer4778 @Oli last edited by

      @oli
      Hat leider nicht funktioniert

      1 Reply Last reply Reply Quote 0
      • Boronsbruder
        Boronsbruder @Oli last edited by Boronsbruder

        @oli
        ich hab bei mir unter xAxis_timeFormats

        day: "dd[\\n]DD.MM"
        

        also bei dir wahrscheinlich dann

        day: "DD.MM"
        

        Moment Time Formats
        Da findest du die passenden Tokens

        O T 2 Replies Last reply Reply Quote 0
        • O
          Oli @Boronsbruder last edited by

          @boronsbruder
          Du hast natürlich recht, so muss es eingetragen werden

          1 Reply Last reply Reply Quote 0
          • E
            Einwurf22 last edited by

            Hallo.
            Ich bin noch am Anfang was diesen Adapter betrifft.
            Ich habe auch kaum Erfahrung was JSON angeht.

            Besteht die Möglichkeit mit dem Bar Chart Widget mit Datenpunkten ohne JSON das links oben abgebildete Widget nachzubilden.
            2022-04-23_10-10-06.png

            Mir fehlt zum einen die Einstellung, abstand von Balken zu Balken und dann auch noch abstand als Doppelbalken (gelb/grau wie abgebildet).
            Zum anderen, wenn ich versuche einen Rahmen Farbe und Rahmenbreite einzustellen, passiert nichts.
            160b20e1-a028-46f1-857c-3748652a7bd5-image.png
            kann mir bitte jemand behilflich sein.
            Danke!
            Gruß

            1 Reply Last reply Reply Quote 0
            • T
              tourer4778 @Boronsbruder last edited by

              @boronsbruder
              @Oli
              Erst einmal Danke für die Hilfe.
              Da ich momentan meine ganze Strucktur ändere, ist mir aufgefallen, das meine History DP alle so abgespeichert werden.

                {
                  "val": 9.4,
                  "ack": 0,
                  "ts": 1698902401480,
                  "q": 0,
                  "c": "script.js.Keller.Heizung",
                  "user": "system.user.admin",
                  "from": "system.adapter.history.0"
                },
                {
                  "val": 9.4,
                  "ack": 0,
                  "ts": 1698894000262,
                  "q": 0,
                  "c": "script.js.Keller.Heizung",
                  "user": "system.user.admin"
                }
              usw...
              ]
              

              Das ist doch schon eine arte Json. Ist es möglich, diese direkt mit dem JsonChart aufzurufen?

              O 1 Reply Last reply Reply Quote 0
              • O
                Oli @tourer4778 last edited by

                @tourer4778
                es wurde mal ein Skript erstellt, wie du History Datenpunkte in das JSON Chart Widget bringst.

                siehe:
                https://forum.iobroker.net/topic/31871/material-design-widgets-json-chart-widget/5

                T 1 Reply Last reply Reply Quote 0
                • T
                  tourer4778 @Oli last edited by

                  @oli
                  id: 'CPU.Auslastung',
                  id: 'CPU.Durchschnitt',
                  Das sind ja die beiden History Datenpunkte
                  Hier kann ich dann meine eintragen, zum beispiel
                  0_userdata.0.Haus.Stromzähler.History.Verbrauch_Tag

                  Genau so wie der Ziel DP idTarget: 'IoBroker',
                  oder ?

                  Boronsbruder 1 Reply Last reply Reply Quote 0
                  • Boronsbruder
                    Boronsbruder @tourer4778 last edited by Boronsbruder

                    @tourer4778
                    nope...

                    idChannel: 'linkeddevices.0.System.LXC.IoBroker' -> '0_userdata.0.Haus.Stromzähler.History'
                    
                    id: 'CPU.Auslastung' -> 'Verbrauch_Tag'
                    

                    idTarget ist in Kombination mit strukturchannel ( // Name Eures Ziel Datenpunktes, wird aus 'strukturChannel' + 'idDatenpunkt' zusammengesetzt) der Datenpunkt in dem der Json gespeichert wird.
                    strukturchannel ist auch der Pfad in dem Controlelemente entnommen werden, wie z.B. let idTimeIntervalDatenpunkt = ${strukturChannel}.Control.timeInterval` // Datenpunkt um Zeitinterval bei Graph zu ändern

                    Anmerkung: Ich habe das Skript nur kurz überflogen... deswegen können die Informationen auch fehlerhaft sein

                    1 Reply Last reply Reply Quote 0
                    • V
                      Vippis last edited by

                      Hallo,
                      wie stelle ich es ein, dass die xAxis bei allen JSON Graphs die gleichen Intervalle hat? Ich möchte immer einen Tag von 0 Uhr bis 23 Uhr in 1h Intervallen darstellen. Aber leider werden die Achsen-Intervalle immer nach den Daten erstellt und sind dann immer unterschiedlich?

                      1 Reply Last reply Reply Quote 0
                      • S
                        stenmic @frank2604 last edited by

                        @frank2604
                        Hallo, und danke für dein influx2-Script

                        Ist es möglich, dass das Cahrt eine waagrechte Linie anzeigt mit nur einem Datenpunkt?
                        Ich möchte mir den max Wert zeichnen lassen.

                        Falls es über das Widget nicht geht, könnte man eventuell das Script so anpassen, dass es Ergebnisse aus dem Query mit nur einem Datenpunkt nochmals weiterverarbeitet?

                        So in etwa...

                        // folgender query erzeugt einen Datenpunkt
                                    fluxQuery: 
                                        'from(bucket: "'+buket_Name+'") \
                                            |> range(start: -1d) \
                                            |> filter(fn: (r) => r["_measurement"] == "'+measurement_Name+'") \
                                            |> filter(fn: (r) => r["_field"] == "value") \
                                            |> max()'
                        					
                        // Das ist das Ergebnis im JSON
                        
                              "data": [
                                {
                                  "t": 1720065360568,
                                  "y": 16.6
                                }
                              ]
                        	  
                        // Leider Zeigt das Json Chart keine Linie an mit nur einem Datenpunkt :(
                        // könnte dein Script das Ergbnis nochmal weiterverarbeiten wenn es nur einen Datenpunkt gibt?
                        // Beispiel:
                        
                              "data": [
                                {
                                  "t": ts vom range start (-1d),
                                  "y": 16.6
                                },
                                {
                                  "t": ts (now),
                                  "y": 16.6
                                }		
                              ]
                        	  
                        // das dürfte natürlich nur bei einem Datenpunkt passieren,
                        // Ergebisse mit mehreren Datenpunkte sollen normal verarbeitet werden.
                        

                        Ich kenn mich leider null aus mit JS

                        frank2604 1 Reply Last reply Reply Quote 0
                        • frank2604
                          frank2604 @stenmic last edited by

                          @stenmic

                          Hi, da kann ich leider nicht helfen. Ich kann auch kein JS und habe mir das auch nur aus Codeschnipseln zusammengesucht. Sorry!

                          1 Reply Last reply Reply Quote 0
                          • S
                            stenmic last edited by

                            Moin,
                            kann ich irgendwie beinflussen wo die "Tage" unten in der X Achse platziert werden?
                            Ich hätte sie gerne auf der Posittion 12Uhr.

                            Setze ich xAxis_time_unit auf "day" stehen die Tage auf 0Uhr (wie in der Grafik).
                            Lasse ich xAxis_time_unit weg, stehen die Tage auf irgendeiner Uhrzeit.

                            2024-07-23 06 37 09.jpg

                            E 1 Reply Last reply Reply Quote 0
                            • E
                              ExMatador @stenmic last edited by

                              Re: Material Design Widgets: JSON Chart Widget
                              Ich habe den DP "0_userdata.0.charts.Verbrauch-Gas.Daten-Tag" mit den korrekten JSON Chart Daten erzeugt.

                              JSON Chart.jpg
                              Gebe ich diesen DP als Objekt-ID direkt ein, wird alles auch angezeigt.
                              JSON Chart ohne Fehler.jpg

                              Verwende ich ein Databinding DP, der den korrekten DP enthält, kommt zur Laufzeit der Fehler.
                              JSON Chart Fehler.jpg

                              Jemand eine Idee?
                              Gruß ExMatador

                              Boronsbruder 1 Reply Last reply Reply Quote 0
                              • Boronsbruder
                                Boronsbruder @ExMatador last edited by Boronsbruder

                                @exmatador
                                Ist im Screenshot extrem unleserlich.
                                Aber ist "Datenpunkt nicht vorhanden" und in vis2, oder?
                                Wenn ja mach mal mit der geladenen Seite einen Browser-Refresh, dann stellt er das meist richtig dar.
                                Wenn es vis2 ist, liegt es aber meines Wissens daran, dass die vis1-Widgets nicht mit vis2 kompatibel sind.
                                Habe ein ähnliches "Problem" mit einen Temperaturverlauf

                                E 1 Reply Last reply Reply Quote 0
                                • E
                                  ExMatador @Boronsbruder last edited by

                                  @boronsbruder
                                  Es handelt sich um vis (nicht vis2), der Browserrefresh hat leider auch nichts gebracht.
                                  Ich vermute mal, es gibt ein Problem mit dem Widget - wäre aber auch komisch.
                                  ExMatador

                                  1 Reply Last reply Reply Quote 0
                                  • Boronsbruder
                                    Boronsbruder last edited by

                                    @exmatador Mal eine andere Frage :
                                    Was ist der Grund dafür, ein Bindung anstatt des Datenpunktes direkt zu verwenden?

                                    E 1 Reply Last reply Reply Quote 0
                                    • E
                                      ExMatador @Boronsbruder last edited by

                                      @boronsbruder
                                      Ich habe mehrere Tablets, jedes mit eigener Instanz. Jede Visu hat zwar eine eigene Start-View, die Unter-Views sollen aber einheitlich sein..
                                      Über die Start-View ermittle ich die lokale Variable local_myInstance und setze dort "1" bis "n".

                                      Auf einer Unter-View werden z.B. Tagesabhängige Werte angezeigt, und jede Visu kann ein eigenes Datum verwenden.
                                      Daher liegen die dynamisch erzeugten JSON-Werte in Instanz-abhängigen DPs, dargestellt in der Objekt-ID so:
                                      0_userdata.0.charts.Aktivitaeten.instanz-{local_myInstance}.Daten-Tag

                                      Das Databinding wird sogar aufgelöst, aber dennoch der Fehler angezeigt:
                                      "Datenpunkt 0_userdata.0.charts.Aktivitaeten.instanz-1.Daten-Tag nicht vorhanden.

                                      Ich verwende das Scrounger JSON Chart.
                                      Gruß ExMatador

                                      TbsJah 1 Reply Last reply Reply Quote 0
                                      • TbsJah
                                        TbsJah @ExMatador last edited by

                                        @exmatador hast du zwischenzeitlich eine Lösung gefunden?
                                        Ich habe das selbe Problem.
                                        Ein F5 / Strg+F5 hilft nicht.

                                        Interessanterweise wird jedoch das Chart angezeigt wenn ich etwas Allgemein aktivere oder deaktiviere.
                                        Sollte aber nicht nicht die Lösung sein.

                                        1 Reply Last reply Reply Quote 0
                                        • TbsJah
                                          TbsJah last edited by

                                          Hab es gelöst
                                          dd5569c0-4ab7-4a92-b4bf-92e6644ce43a-image.png

                                          1 Reply Last reply Reply Quote 0
                                          • E
                                            ExMatador last edited by

                                            @tbsjah
                                            Ich hatte es aufgegeben.
                                            Wie hast du es denn geschafft?
                                            Gruß ExMatador

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            1.1k
                                            Online

                                            31.7k
                                            Users

                                            79.7k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            36
                                            190
                                            26922
                                            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