Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Visualisierung mit Node Red erstellen

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    Visualisierung mit Node Red erstellen

    This topic has been deleted. Only users with topic management privileges can see it.
    • mickym
      mickym Most Active @Damrak2022 last edited by mickym

      @damrak2022 Gut aber nun müssen wir die Objekte neu aufbauen. Dazu benutzen wir die map Funktion im JSONATA und erstellen erst mal leere Objekte für jeden Datensatz.
      https://docs.jsonata.org/path-operators

      Der Path-Operator für das mappen ist ein Punkt. Mit diesem wird also durch jedes Array Element durchgegangen und es kann neu definiert werden.

      Wir können also durch die einzelnen Elemente durch iterieren und erstellen also erst mal für jeden Datensatz ein leeres Objekt. Durch iterieren wollen wir durch das Array des Eingangsarrays.

      Also änderst Du mal das $ in $.{}

      Damrak2022 2 Replies Last reply Reply Quote 0
      • Damrak2022
        Damrak2022 @mickym last edited by

        @mickym sagte in Visualisierung mit Node Red erstellen:

        https://docs.jsonata.org/path-operators

        Das was da steht begreife ich nicht. Das ist mir immer irgendwie zu hoch.
        Was muss ich jetzt also machen?

        1 Reply Last reply Reply Quote 0
        • Damrak2022
          Damrak2022 @mickym last edited by

          @mickym So?
          Bildschirm­foto 2023-02-03 um 03.23.21.png

          mickym 1 Reply Last reply Reply Quote 0
          • mickym
            mickym Most Active @Damrak2022 last edited by mickym

            @damrak2022 Sehr gut.

            [{"series":["Küche"],"data":[[$.{}]]}]
            

            Du siehst also für jeden Datensatz ein leeres Objekt:

            87485ad8-47a8-4e2f-a89f-f7e915fab1b4-image.png

            Damrak2022 1 Reply Last reply Reply Quote 0
            • Damrak2022
              Damrak2022 @mickym last edited by

              @mickym Ja, sieht bei mir auch so aus.

              mickym 1 Reply Last reply Reply Quote 0
              • mickym
                mickym Most Active @Damrak2022 last edited by mickym

                @damrak2022 Sehr gut - und welche 2 Eigenschaften haben denn nun die Punkte in unserem Array.

                9ff6e7fc-5e99-4b7b-b6d5-7bab5c3881f0-image.png

                Jeder Punkt in einem Linienchart hat ein ... - Koordinate und ein ... - Koordinate.

                Damrak2022 1 Reply Last reply Reply Quote 0
                • Damrak2022
                  Damrak2022 @mickym last edited by

                  @mickym Ich weiß nicht was Du mit Punkten meinst?

                  Damrak2022 mickym 2 Replies Last reply Reply Quote 0
                  • Damrak2022
                    Damrak2022 @Damrak2022 last edited by

                    @damrak2022 Ach Du meinst X und Y Koordinate

                    mickym 1 Reply Last reply Reply Quote 0
                    • mickym
                      mickym Most Active @Damrak2022 last edited by

                      @damrak2022 sagte in Visualisierung mit Node Red erstellen:

                      @mickym Ich weiß nicht was Du mit Punkten meinst?

                      Na jedes Objekt in dem Array ist ein Datenpunkt - des x und y Koordinaten in dem originalen Datensatz steht.

                      Damrak2022 1 Reply Last reply Reply Quote 0
                      • Damrak2022
                        Damrak2022 @mickym last edited by

                        @mickym Ja, verstanden.

                        1 Reply Last reply Reply Quote 0
                        • mickym
                          mickym Most Active @Damrak2022 last edited by mickym

                          @damrak2022 sagte in Visualisierung mit Node Red erstellen:

                          @damrak2022 Ach Du meinst X und Y Koordinate

                          Genau - Du siehst ja an Steves Screenshot - das jeder Punkt KLEINgeschrieben die Eigenschaft. x und y hat.

                          Nun definierst Du also für alle Objekte die Eigenschaft x und y mit dem Wert 0 erst mal. Also in die neu geschweifte Klammer hinter dem $. eine Eigenschaft "x" : 0 und "y" : 0

                          Damrak2022 1 Reply Last reply Reply Quote 0
                          • Damrak2022
                            Damrak2022 @mickym last edited by

                            @mickym Bildschirm­foto 2023-02-03 um 03.33.08.png

                            mickym 1 Reply Last reply Reply Quote 0
                            • mickym
                              mickym Most Active @Damrak2022 last edited by mickym

                              @damrak2022 sagte in Visualisierung mit Node Red erstellen:

                              @mickym Bildschirm­foto 2023-02-03 um 03.33.08.png

                              Sehr gut - Du solltest also sehen, dass Deine Objekt jetzt überall x und y Eigenschaften haben:

                              9781bc52-974b-4718-932b-d9279f1eced8-image.png

                              Falls wir morgen weiter machen - solltest Du den Code dann wieder in das Codefenster hier aus dem Thread kopieren kannst:

                              [{"series":["Küche"],"data":[[$.{"x":0,"y":0}]]}]
                              
                              Damrak2022 1 Reply Last reply Reply Quote 0
                              • Damrak2022
                                Damrak2022 @mickym last edited by Damrak2022

                                @mickym Habe das nun wieder so hergestellt:

                                Bildschirm­foto 2023-02-04 um 20.06.07.png

                                mickym 1 Reply Last reply Reply Quote 0
                                • mickym
                                  mickym Most Active @Damrak2022 last edited by

                                  @damrak2022 So um zu sehen, dass Du auch alles von vorgestern verstanden hast. Erkläre doch bitte mal Deinen JSONATA Code.

                                  [{"series":["Küche"],"data":[[$.{"x":0,"y":0}]]}]
                                  

                                  Erkläre bitte mal Zeichen für Zeichen.

                                  Also

                                  1. Eckige Klammer - [
                                  2. Geschweifete Klammer .
                                  3. Was ist der String der folgt
                                  4. Was ist der Doppelpunkt
                                  5. Was ist die eckige Klammer [

                                  usw.

                                  also ich würde gerne den Code nochmals von Dir erklärt bekommen. 🙂 - Danke schon mal. 😉

                                  Damrak2022 2 Replies Last reply Reply Quote 0
                                  • Damrak2022
                                    Damrak2022 @mickym last edited by

                                    @mickym Oh Gott, na gut - Moment

                                    mickym 1 Reply Last reply Reply Quote 0
                                    • mickym
                                      mickym Most Active @Damrak2022 last edited by

                                      @damrak2022 sagte in Visualisierung mit Node Red erstellen:

                                      @mickym Oh Gott, na gut - Moment

                                      Lass Dir ruhig Zeit - lieber exakt und richtig - als schnell und schlampig. 😉

                                      1 Reply Last reply Reply Quote 0
                                      • Damrak2022
                                        Damrak2022 @mickym last edited by Damrak2022

                                        @mickym Die eckige Klammer [ stellt die Eröffnung eines Array dar. Darauf folgt die geschweifte Klammer (Objekt) mit der Eigenschaft "series". welche wiederum ein Array beinhaltet, welches in A,B,C (topic) unterteilt ist. Ich weiß das der Doppelpunkt da hin muss, kann ihn aber nicht erklären.
                                        Unter data sind die das x und x jeweils die Koordinaten, welche die Chart node benötigt. Die sind jeweils innerhalb eines Objekts was wiederum in einem Array pro serie ist. Ganz zum Schluss wird das erste Array wieder ] geschlossen.

                                        mickym 1 Reply Last reply Reply Quote 0
                                        • mickym
                                          mickym Most Active @Damrak2022 last edited by mickym

                                          @damrak2022 sagte in Visualisierung mit Node Red erstellen:

                                          Bitte richtig mit Zahlen. Der erste Satz ist zwar richtig . aber dann wirds schlampig.

                                          Ich sehe kein Array mit A,B,C . Ein Array st auch nicht unterteilt sondern enthält ein oder mehrere Elemente. Und was data ist und x und x und die Zeichen dazwischen passt alles nicht.

                                          Bitte wie unten beschrieben jedes Zeichen erklären (gut bei Eigenschaften wie series - darfst Du schreiben es ist eine Eigenschaft als String.=

                                          Also

                                          1. Eckige Klammer - [ ==> Definiert den ersten Datentyp ein Array

                                          2. Geschweifete Klammer - { ==> Definiert das erste Element dieses Arrays - ein Objekt .

                                          3. Was ist der String der folgt . { Legt den Namen der 1. Eigenschaft des Objektes fest, das unter 2. definiert wurde .

                                          4. Was ist der Doppelpunkt

                                          5. Was ist die eckige Klammer [

                                          6. String
                                            6a Eckige Klammer zu.

                                          7. Komma

                                          8. String

                                          9. Doppelpunkt

                                          10. eckige Klammer

                                          11. eckige Klammer

                                          12. $ Zeichen

                                          13. Punkt

                                          14. Geschweifte Klammer

                                          15. String

                                          16. Doppelpunkt

                                          17. Zahl,

                                          18. Komma

                                          19. String

                                          20. Doppelpunkt

                                          21. Zahl

                                          22. Geschweifte Klammer

                                          23. Eckige Klammer

                                          24. Eckige Klammer

                                          25. Geschweifte Klammer

                                          26. Eckige Klammer

                                          Wenn ich Dir nun alle 26 Zeichen aufschreiben konnte, dann kannst Du auch jedes Zeichen erklären.

                                          Kopiere Dir dieser 26 Zeilen und schreibe hinter jeden Punkt die Erklärung.

                                          lerne exakt zu sein.

                                          Damrak2022 1 Reply Last reply Reply Quote 0
                                          • Damrak2022
                                            Damrak2022 @mickym last edited by Damrak2022

                                            @mickym

                                            Eckige Klammer - [ ==> Definiert den ersten Datentyp ein Array

                                            Geschweifete Klammer - { ==> Definiert das erste Element dieses Arrays - ein Objekt .

                                            Was ist der String der folgt . { Legt den Namen der 1. Eigenschaft des Objektes fest, das unter 2. definiert wurde .

                                            Was ist die eckige Klammer [ ist ein Array

                                            String ist eine Zeichenkette und legt den Namen des Objekts fest

                                            Komma - damit werden Elemente oder Eigenschaften voneinander getrennt

                                            eckige Klammer - Array

                                            eckige Klammer - Array

                                            $ Zeichen gibt die Payload unverändert wieder aus

                                            Punkt

                                            Geschweifte Klammer - Objekt

                                            Zahl, - ist der Wert, also z.B. time oder Value

                                            Doppelpunkt - trennt den eigentlichen Wert von der Bezeichnung der Eigenschaft

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            750
                                            Online

                                            31.9k
                                            Users

                                            80.2k
                                            Topics

                                            1.3m
                                            Posts

                                            4
                                            4845
                                            2324588
                                            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