Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Material Design Widgets: Line History 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: Line History Chart Widget

    This topic has been deleted. Only users with topic management privileges can see it.
    • E
      exv2 @Coffeelover last edited by

      @Coffeelover Also mal ein Beispiel
      Sekunden in Minuten umrechnen
      30s / 60 = 0,5 min.
      und jetzt mach das mal mit Multiplikation.

      C 1 Reply Last reply Reply Quote 0
      • C
        Coffeelover @exv2 last edited by

        @exv2 In dem Fall (also von Sekunden auf Minuten ) musst du als Faktor 0.01666666666666666666666666666667‬ eintragen.

        1 Reply Last reply Reply Quote 0
        • M
          MarEhg @MarEhg last edited by

          @MarEhg sagte in Material Design Widgets: Line History Chart Widget:

          ich muss das nochmal ausgraben!

          Hat jemand einen Tipp wie ich die Beschriftung der Y-Achse mit drei Kommastellen hinbekomme?
          Der Wert ist für die Tankstellen-Dieselpreis z.B. 1.099
          Es wird aber in der Achsenbeschriftung ... , 1.09 , 1.10 , ... anggezeigt.

          keiner eine Idee?

          S O 2 Replies Last reply Reply Quote 0
          • S
            sveni_lee @MarEhg last edited by

            @MarEhg

            wie hast Du die Achsbeschriftung für die Dieselpreise eingerichtet? Ich kann leider nur ganze Zahles als Minimum und Maximum eintragen, was bei Spritpreisen nicht so gut funktioniert.
            Ich würde gern als Minimum 0,90 und als Maximum 1,30 eintragen.

            Gruß
            Sveni_lee

            O 1 Reply Last reply Reply Quote 0
            • S
              stockics6 last edited by Scrounger

              Hi,

              ich habe mittels "Line History Chart" erfolgreich merhere Graphen anlegen können und funktioniert auch perfekt.

              Jetzt würde ich das ganze gerne um eine Zeit- u. Datumsauswahl erweitern.

              • Datenpunkt angelegt
              • Select Widget in VIS implementiert und die Werteliste adaptiert
              • Der Wert aus dem Select-Widget wird auch in den Datenpunkt geschrieben

              Wie bekomme ich die Verknüpfng zwischen Datenpunkt und der Aktualisierung des Charts hin?

              7d11bcc0-7adf-48d7-af89-f50d2ba9e47a-grafik.png
              7b7b0fa0-6a44-4269-93a7-9cd520604434-grafik.png

              Danke!!

              Edit: verschoben, da Frage Widget Einstellung betrifft

              C 1 Reply Last reply Reply Quote 0
              • C
                Coffeelover @stockics6 last edited by Scrounger

                @stockics6
                Bei mir funktioniert es, indem ich in dem Select Widget bei Werteliste das hier:

                1 hour,12 hours,1 day,2 days,7 days,14 days,1 month,2 months

                Und in der Beschreibung das hier: (beliebig anpassbar)

                1 Stunde,12 Stunden,1 Tag,2 Tage,7 Tage,14 Tage,1 Monat,2 Monate

                eingetragen habe.

                Edit: verschoben, da Frage Widget Einstellung betrifft

                S M 2 Replies Last reply Reply Quote 0
                • S
                  stockics6 @Coffeelover last edited by Scrounger

                  @Coffeelover

                  Vielen vielen Dank 🙂 genau so funktiert es 🙂

                  Edit: verschoben, da Frage Widget Einstellung betrifft

                  1 Reply Last reply Reply Quote 1
                  • M
                    Michi_Pi last edited by

                    Hallo zusammen,
                    ich bekomm das mit den Zeitintervallen nicht gebacken. Bei mir werden irgenwie Jahre statt Sekunden angezeigt.

                    Hier mein View: Test.txt

                    DP ist manuell angelegt
                    6fed3039-ba85-4776-82b5-5a945d63c505-grafik.png

                    sigi234 1 Reply Last reply Reply Quote 0
                    • sigi234
                      sigi234 Forum Testing Most Active @Michi_Pi last edited by

                      @Michi_Pi sagte in Material Design Widgets: Line History Chart Widget:

                      Hallo zusammen,
                      ich bekomm das mit den Zeitintervallen nicht gebacken. Bei mir werden irgenwie Jahre statt Sekunden angezeigt.

                      Hier mein View: Test.txt

                      DP ist manuell angelegt
                      6fed3039-ba85-4776-82b5-5a945d63c505-grafik.png

                      Hast du auch ein MDW Select gemacht?

                      1 Reply Last reply Reply Quote 0
                      • M
                        Michi_Pi last edited by

                        jap hab ich und auch hier den DP angegeben.
                        bf0e13ea-2437-4d05-99c1-4587b5d6ad95-grafik.png
                        7e36e33b-bf12-4844-a15a-b63d109b6d06-grafik.png
                        6d8c3b0c-5e52-4e02-90fe-edac838f6289-grafik.png

                        Chris Tailor M 2 Replies Last reply Reply Quote 0
                        • liv-in-sky
                          liv-in-sky @Scrounger last edited by Scrounger

                          @Scrounger hast du noch einen tipp für mich?

                          die beschriftung der x achse wird abgeschnitten - ist schon ohne setting änderung so

                          Image 3.png

                          Edit: verschoben, da Frage Widget Einstellung betrifft

                          Scrounger 1 Reply Last reply Reply Quote 0
                          • Scrounger
                            Scrounger Developer @liv-in-sky last edited by Scrounger

                            @liv-in-sky sagte in Test Adapter Material Design Widgets v0.2.x:

                            die beschriftung der x achse wird abgeschnitten - ist schon ohne setting änderung so

                            Abstand von unten einstellen:
                            7b76d607-a2a0-4352-a2a1-705a1f8b0dd7-grafik.png

                            Edit: verschoben, da Frage Widget Einstellung betrifft

                            liv-in-sky 1 Reply Last reply Reply Quote 0
                            • M
                              Michi_Pi @Michi_Pi last edited by

                              Habs jetzt doch noch hinbekommen, allerdings mit dem JSON-Format.
                              Auserdem hab ich das nicht überrissen, dass ich nicht willkürlich Intervalle festlegen kann, sondern dass ich genau diese Werte verwenden muss
                              a2af21d8-1c76-4c00-be31-067d2bc5ef87-grafik.png

                              Scrounger 1 Reply Last reply Reply Quote 0
                              • Scrounger
                                Scrounger Developer @Michi_Pi last edited by Scrounger

                                @Michi_Pi sagte in Material Design Widgets: Line History Chart Widget:

                                Auserdem hab ich das nicht überrissen, dass ich nicht willkürlich Intervalle festlegen kann, sondern dass ich genau diese Werte verwenden muss

                                Du kannst die Startzeit für den Chart auch per Datenpunkt übergeben, anstatt der vordefinierten Intervalle -> geht ab MDW >= 0.3.0

                                siehe https://github.com/Scrounger/ioBroker.vis-materialdesign#line-history-chart

                                0697d97b-4c7d-4f0d-a9dc-f17845bac78a-grafik.png

                                Den Timestamp muss du dir dann per skript entsprechend basteln und z.B. auf die Auswahl des Select Widgets reagieren.

                                hier mal exemplarisch wie das geht:

                                function getChartStart() {
                                    let startDateTime = moment();
                                
                                    if (existsState(idTimeIntervalDatenpunkt)) {
                                        let val = getState(idTimeIntervalDatenpunkt).val;
                                
                                        if (val === '1 day') {
                                            startDateTime.add('-1', 'days');
                                        } else if (val === '3 days') {
                                            startDateTime.add('-3', 'days');
                                            startDateTime = startDateTime.startOf('day');
                                        } else if (val === '7 days') {
                                            startDateTime.add('-7', 'days');
                                            startDateTime = startDateTime.startOf('day');
                                        } else if (val === '14 days') {
                                            startDateTime.add('-14', 'days');
                                            startDateTime = startDateTime.startOf('day');
                                        } else if (val === '1 month') {
                                            startDateTime.add('-1', 'months');
                                            startDateTime = startDateTime.startOf('day');
                                        } else if (val === '2 months') {
                                            startDateTime.add('-2', 'months');
                                            startDateTime = startDateTime.startOf('day');
                                        } else if (val === '3 months') {
                                            startDateTime.add('-3', 'months');
                                            startDateTime = startDateTime.startOf('day');
                                        } else if (val === '6 months') {
                                            startDateTime.add('-6', 'months');
                                            startDateTime = startDateTime.startOf('day');
                                        } else if (val === '1 year') {
                                            startDateTime.add('-1', 'years');
                                            startDateTime = startDateTime.startOf('day');
                                        } else {
                                            startDateTime.add('-7', 'days');
                                            startDateTime = startDateTime.startOf('day');
                                        }
                                    } else {
                                        startDateTime.add('-7', 'days');
                                        startDateTime = startDateTime.startOf('day');
                                    }
                                
                                    return startDateTime;
                                }
                                

                                Ich schreibe per Select Widget in den Datenpunkt idTimeIntervalDatenpunkt z.B. den String 3 days.
                                Darauf kann man reagieren und dann in einen weiteren Datenpunkt den timestamp für 3 days, der per Skript erstellt wird, schreiben Dieser muss dann dem chart zugewiesen werden.

                                Im obigen Beispiel bringt es auch noch den Vorteil, dass der Chart dann immer um 0:00h beginnt

                                1 Reply Last reply Reply Quote 0
                                • sigi234
                                  sigi234 Forum Testing Most Active @Scrounger last edited by sigi234

                                  @Scrounger

                                  Hallo, was ist eigentlich die Option chartTimeout ?

                                  Screenshot (2283).png

                                  Scrounger 1 Reply Last reply Reply Quote 0
                                  • Scrounger
                                    Scrounger Developer @sigi234 last edited by

                                    @sigi234
                                    D.h.D.h. bevor Daten kamen kam ein timeout. Wenn dir Meldung kommt timeout unter allgemein solange erhöhen bis die Meldung nicht mehr kommt

                                    1 Reply Last reply Reply Quote 0
                                    • D
                                      danreh23 last edited by

                                      Hallo, wie bekommt man hin das ein boolean Datenpunkt, bei Änderung, im Widget als senkrechte Linie dargestellt wird. Bin langsam am verzweifeln.

                                      Gelbe Linie ist mein "Lüften an"
                                      b4fd0f02-dbb4-4877-b4af-7df602995307-image.png

                                      Gruß danreh23

                                      C Scrounger 2 Replies Last reply Reply Quote 0
                                      • C
                                        Coffeelover @danreh23 last edited by

                                        @danreh23 Ich kenne da leider auch keine Option - wäre aber auch interessiert.

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

                                          Erstmal cool, was du da auf die Beine gestellt hast, mit den Material Design Widgets - wirklich beeindruckend!

                                          Ich haben noch ein paar Fragen dazu, versuche grad, für mich etwas aufzusetzen.

                                          • Ich hab den Thread durchgelesen, und gesehen, das die Frage, wie man in der X-Achse ein Format wie z.b. 28.04. verwenden kann, umsetzen kann. Hat da jemand eine Idee?
                                          • Ich bin am versuchen, ein Diagramm für Wechselkurse zu erstellen. Dazu hab ich jeder Währung eine Farbe für die Linie gegeben. Ist es irgendwie möglich, das die Währungen in der Legende die selbe Farbe haben wie die Linien, damit ich weiß, welche Linie welche Währung ist?
                                            35dc558d-8e31-41be-ad1e-ceca9f8b0090-grafik.png
                                          • Und dann hab ich noch ein sehr komisches Verhalten, was das Zeitinterval betrifft, wo ich wirklich nicht verstehe, was hier passiert..hab mal ein Video davon gemacht. Hat jemand sowas schon mal?
                                            MaterialButton.mp4
                                            Hab euch das Objekt noch hochgeladen. Wenn ich z.B. auf 1 Monat klicke, ändert er das Objekt richtig ab - aber am Button steht noch 1 Woche. Das selbe nochmal, und es passt...total verrückt.
                                            Objekt:
                                          [{"tpl":"tplVis-materialdesign-Select","data":{"oid":"vis.0.datapoints.AuswahlCurrency","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","inputType":"text","inputLayout":"regular","showInputMessageAlways":false,"showInputCounter":false,"clearIconShow":false,"listDataMethod":"inputPerEditor","countSelectItems":"6","listPosition":"auto","showSelectedIcon":"no","showValue":false,"signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"value0":"2 days","value1":"1 week","label1":"1 Woche","label0":"2 Tage","value2":"1 month","label2":"1 Monat","value3":"3 months","label3":"3 Monate","value4":"6 months","label4":"6 Monate","value5":"1 year","label5":"1 Jahr","value6":"3 years","label6":"3 Jahre","inputLabelText":"Zeitinterval"},"style":{"left":"868px","top":"426px"},"widgetSet":"materialdesign"}]
                                          

                                          Version vom Adapter ist übrigens 0.3.4, hab heute aktualisiert, da es mit 0.3.1 die selben Probleme gab...

                                          1 Reply Last reply Reply Quote 0
                                          • Scrounger
                                            Scrounger Developer @danreh23 last edited by

                                            @danreh23 sagte in Material Design Widgets: Line History Chart Widget:

                                            Hallo, wie bekommt man hin das ein boolean Datenpunkt, bei Änderung, im Widget als senkrechte Linie dargestellt wird. Bin langsam am verzweifeln.

                                            Wahrscheinlich gar nicht, weil ich das nicht explizit eingebaut habe und auch noch nie ausprobiert habe. Bitte schreib auf github ein Feature Request, dann bau ich das vielleicht mal ein.

                                            @jackblackson sagte in Material Design Widgets: Line History Chart Widget:

                                            • Ich hab den Thread durchgelesen, und gesehen, das die Frage, wie man in der X-Achse ein Format wie z.b. 28.04. verwenden kann, umsetzen kann. Hat da jemand eine Idee?

                                            Schau bitte in die Doku
                                            https://github.com/Scrounger/ioBroker.vis-materialdesign#line-history-chart

                                            Du musst das time format für die x-achse anpassen. Das muss für jedes interval day, week, month etc. einzeln gemacht werden.

                                            • Ich bin am versuchen, ein Diagramm für Wechselkurse zu erstellen. Dazu hab ich jeder Währung eine Farbe für die Linie gegeben. Ist es irgendwie möglich, das die Währungen in der Legende die selbe Farbe haben wie die Linien, damit ich weiß, welche Linie welche Währung ist?

                                            Die Farbe für den datensatz wird eigentlich auch für die legende übernommen. Wie sehen deine Widget Einstellungen aus?

                                            • Und dann hab ich noch ein sehr komisches Verhalten, was das Zeitinterval betrifft, wo ich wirklich nicht verstehe, was hier passiert..hab mal ein Video davon gemacht. Hat jemand sowas schon mal?

                                            Ja ich 😁
                                            Hab ich gestern auch festgestellt, ist ein Bug im Select Widget und bereits behoben.

                                            jackblackson C 2 Replies Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            639
                                            Online

                                            31.7k
                                            Users

                                            79.7k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            61
                                            202
                                            26057
                                            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