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

  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Material Design Widgets: Line History Chart Widget

NEWS

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

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

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

Material Design Widgets: Line History Chart Widget

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
202 Beiträge 61 Kommentatoren 38.6k Aufrufe 62 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.
  • sigi234S sigi234

    @Bostil

    Erhöhe das Diagramm Time Out unter Allgemein
    Edit: geht bei mir auch nicht.

    Welche Version hast du?

    BostilB Offline
    BostilB Offline
    Bostil
    schrieb am zuletzt editiert von
    #127

    @sigi234 Danke dir. Habe Version 0.3.19 der Material Design Widgets.

    1 Antwort Letzte Antwort
    0
    • ScroungerS Scrounger

      Line History Chart Widget

      line_history_chart.gif

      Sämtliche Fragen zu Einstellungen (VIS Editor, Bedienung, JSON strings, etc.) des Widgets hier stellen

      Das ist sicher besser für die Übersichtlichkeit und Dokumentation.

      • Dokumentation
      • Online Beispiel

      Themen zu anderen Widgets findest du hier!

      besterquesterB Offline
      besterquesterB Offline
      besterquester
      Developer
      schrieb am zuletzt editiert von
      #128

      @Scrounger Hi, I am testin the lineHistory Chart. I would like to extend the chart to'bar' mode. I would like to support you in the development. I tried to fork and change the properties. Maybe you can give me a hint where to start.
      With the json chart i developed a javascript class but would be better to have it as widget available
      regards Chris

      ScroungerS 1 Antwort Letzte Antwort
      0
      • besterquesterB besterquester

        @Scrounger Hi, I am testin the lineHistory Chart. I would like to extend the chart to'bar' mode. I would like to support you in the development. I tried to fork and change the properties. Maybe you can give me a hint where to start.
        With the json chart i developed a javascript class but would be better to have it as widget available
        regards Chris

        ScroungerS Offline
        ScroungerS Offline
        Scrounger
        Developer
        schrieb am zuletzt editiert von
        #129

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

        @Scrounger Hi, I am testin the lineHistory Chart. I would like to extend the chart to'bar' mode. I would like to support you in the development.

        That would be great!
        The code of the line chart history can be found here https://github.com/Scrounger/ioBroker.vis-materialdesign/blob/f72f81203c23cbb6e750d7033052d27605f9017e/widgets/materialdesign/js/widgets/materialdesign.chart.js#L334.
        Think this is a good point to start. Please note that some functions are used by all charts, so you always have to test this too.

        I use Minify to merge all widgets *.js files into one minifed file.
        Im using VS Code as IDE and there it has a plugin Minify that will do this automatically.

        If you have further questions, just contact me.

        <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

        <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

        besterquesterB 2 Antworten Letzte Antwort
        1
        • SteffS Offline
          SteffS Offline
          Steff
          schrieb am zuletzt editiert von
          #130

          Hallo,
          gibt es eine Möglichkeit in den Tooltips die Einheit des entsprechenden Datenpunkts anzuzeigen?
          Ich kann im Tooltip Layout unter Text Anhang eine Einheit angeben, die gilt dann aber für alle Linien.

          Gruß Steffen

          ioBroker auf Intel NUC 7CJYH / Debian 11 / States in Redis / Objects in JSONL / Repo --> Beta / HM CCU2 V2.61.7 / Siemens LOGO! (0BA7 / 0BA8)
          Admin V7.4.7 / Node V20.18.1 / NPM V10.8.2 / JSC V7.0.6 / JSE V8.8.3

          1 Antwort Letzte Antwort
          0
          • ScroungerS Scrounger

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

            @Scrounger Hi, I am testin the lineHistory Chart. I would like to extend the chart to'bar' mode. I would like to support you in the development.

            That would be great!
            The code of the line chart history can be found here https://github.com/Scrounger/ioBroker.vis-materialdesign/blob/f72f81203c23cbb6e750d7033052d27605f9017e/widgets/materialdesign/js/widgets/materialdesign.chart.js#L334.
            Think this is a good point to start. Please note that some functions are used by all charts, so you always have to test this too.

            I use Minify to merge all widgets *.js files into one minifed file.
            Im using VS Code as IDE and there it has a plugin Minify that will do this automatically.

            If you have further questions, just contact me.

            besterquesterB Offline
            besterquesterB Offline
            besterquester
            Developer
            schrieb am zuletzt editiert von
            #131

            @Scrounger Thanks i try to start to extend the history chart also used to visualize bar charts. I will get in contact when i have a ready version

            regards Chris

            1 Antwort Letzte Antwort
            0
            • ScroungerS Scrounger

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

              @Scrounger Hi, I am testin the lineHistory Chart. I would like to extend the chart to'bar' mode. I would like to support you in the development.

              That would be great!
              The code of the line chart history can be found here https://github.com/Scrounger/ioBroker.vis-materialdesign/blob/f72f81203c23cbb6e750d7033052d27605f9017e/widgets/materialdesign/js/widgets/materialdesign.chart.js#L334.
              Think this is a good point to start. Please note that some functions are used by all charts, so you always have to test this too.

              I use Minify to merge all widgets *.js files into one minifed file.
              Im using VS Code as IDE and there it has a plugin Minify that will do this automatically.

              If you have further questions, just contact me.

              besterquesterB Offline
              besterquesterB Offline
              besterquester
              Developer
              schrieb am zuletzt editiert von besterquester
              #132

              @Scrounger said in Material Design Widgets: Line History Chart Widget:

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

              @Scrounger Hi, I am testin the lineHistory Chart. I would like to extend the chart to'bar' mode. I would like to support you in the development.

              That would be great!
              The code of the line chart history can be found here https://github.com/Scrounger/ioBroker.vis-materialdesign/blob/f72f81203c23cbb6e750d7033052d27605f9017e/widgets/materialdesign/js/widgets/materialdesign.chart.js#L334.
              Think this is a good point to start. Please note that some functions are used by all charts, so you always have to test this too.

              I use Minify to merge all widgets *.js files into one minifed file.
              Im using VS Code as IDE and there it has a plugin Minify that will do this automatically.

              If you have further questions, just contact me.

              Just one question. I installed minify and what is to do in order to test the adapter. I am using visual code remote so i am directly on the adapter (RASPI PI). It seems the adapter do not accept changes I make in the code. The minify works but there is no change. Restarting adapter stop and start also is not working.

              Maybe you can give a hint. :)

              regards Chris

              ScroungerS 1 Antwort Letzte Antwort
              0
              • besterquesterB besterquester

                @Scrounger said in Material Design Widgets: Line History Chart Widget:

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

                @Scrounger Hi, I am testin the lineHistory Chart. I would like to extend the chart to'bar' mode. I would like to support you in the development.

                That would be great!
                The code of the line chart history can be found here https://github.com/Scrounger/ioBroker.vis-materialdesign/blob/f72f81203c23cbb6e750d7033052d27605f9017e/widgets/materialdesign/js/widgets/materialdesign.chart.js#L334.
                Think this is a good point to start. Please note that some functions are used by all charts, so you always have to test this too.

                I use Minify to merge all widgets *.js files into one minifed file.
                Im using VS Code as IDE and there it has a plugin Minify that will do this automatically.

                If you have further questions, just contact me.

                Just one question. I installed minify and what is to do in order to test the adapter. I am using visual code remote so i am directly on the adapter (RASPI PI). It seems the adapter do not accept changes I make in the code. The minify works but there is no change. Restarting adapter stop and start also is not working.

                Maybe you can give a hint. :)

                regards Chris

                ScroungerS Offline
                ScroungerS Offline
                Scrounger
                Developer
                schrieb am zuletzt editiert von Scrounger
                #133

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

                Just one question. I installed minify and what is to do in order to test the adapter. I am using visual code remote so i am directly on the adapter (RASPI PI). It seems the adapter do not accept changes I make in the code. The minify works but there is no change. Restarting adapter stop and start also is not working.

                Maybe you can give a hint. :)

                regards Chris

                To see the changes immideatly, change the files in iobroker\iobroker-data\files\vis\widgets\materialdesign and make a reload of the page. After you are finished with the changes dont forget to copy these into your project folder.

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

                Hallo,
                gibt es eine Möglichkeit in den Tooltips die Einheit des entsprechenden Datenpunkts anzuzeigen?
                Ich kann im Tooltip Layout unter Text Anhang eine Einheit angeben, die gilt dann aber für alle Linien.

                Gruß Steffen

                Stimmt für tooltip geht das nur global. Schreib bitte nen issue auf github, dann bau ich das mit ein.

                <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                1 Antwort Letzte Antwort
                0
                • C Coffeelover

                  @Scrounger Funktioniert auf den ersten Test hin perfekt. Der nächste Kaffee geht auf mich.

                  Vorher sah meine Heizungskurve so aus:
                  28668d61-d97b-456e-8831-be718173ee59-grafik.png

                  Und jetzt so. Damit lässt sich sinnvoll etwas ablesen! (Ja - es sind unterschiedliche Heizkreise auf den Screenshots.)
                  07f3c1e0-7ef6-4e62-8eda-39ed784dde1e-grafik.png

                  VG

                  werner2000xW Online
                  werner2000xW Online
                  werner2000x
                  schrieb am zuletzt editiert von
                  #134

                  @Coffeelover Wie kann man die Zahlen der Datenpunkte entfernen?
                  dac1377f-8757-4cc3-ae06-c45fde32fd5c-image.png
                  Mit "Linien zwischen Punkten ohne Daten" geht es nicht.
                  1870296d-577e-488e-ac80-f75e3ac6aacb-image.png

                  Raspi4 8 GB mit Aqara Zigbee USB, iob und PI-hole
                  Innogy Smarthome
                  Bosch Bridge 2
                  HUE Bridge
                  OpenWB Wallbox mit EVU Kit
                  Google Nest Pro Hub

                  sigi234S 1 Antwort Letzte Antwort
                  0
                  • werner2000xW werner2000x

                    @Coffeelover Wie kann man die Zahlen der Datenpunkte entfernen?
                    dac1377f-8757-4cc3-ae06-c45fde32fd5c-image.png
                    Mit "Linien zwischen Punkten ohne Daten" geht es nicht.
                    1870296d-577e-488e-ac80-f75e3ac6aacb-image.png

                    sigi234S Online
                    sigi234S Online
                    sigi234
                    Forum Testing Most Active
                    schrieb am zuletzt editiert von
                    #135

                    @werner2000x

                    Screenshot (2771)_LI.jpg

                    Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                    Immer Daten sichern!

                    werner2000xW 1 Antwort Letzte Antwort
                    0
                    • sigi234S sigi234

                      @werner2000x

                      Screenshot (2771)_LI.jpg

                      werner2000xW Online
                      werner2000xW Online
                      werner2000x
                      schrieb am zuletzt editiert von
                      #136

                      @sigi234 Danke, hat geklappt :-)

                      Raspi4 8 GB mit Aqara Zigbee USB, iob und PI-hole
                      Innogy Smarthome
                      Bosch Bridge 2
                      HUE Bridge
                      OpenWB Wallbox mit EVU Kit
                      Google Nest Pro Hub

                      1 Antwort Letzte Antwort
                      0
                      • CKMartensC Offline
                        CKMartensC Offline
                        CKMartens
                        schrieb am zuletzt editiert von
                        #137

                        Hallo,

                        ich versuche das Widget mit Daten von influx zu füttern.
                        Leider kommt nur die Meldung Error: [0] [object Object], [1] [object Object]
                        44880d76-1538-4a0e-bc56-f408119498c8-image.png
                        Eingestellt habe ich als Adapterinstanz influxdb.0
                        4b0e5af5-0b98-44ff-9177-e8138b6fefd3-image.png
                        Bei Datensätze habe ich die OIDs der Datenpunkte angegeben die in mittels influxdb gespeichert werden.
                        79d9fbf5-8d4e-4099-b568-1b024d231458-image.png
                        Was muss ich wo einstellen damit es funktioniert? Danke für eure Hilfe.
                        Carsten

                        1 Antwort Letzte Antwort
                        0
                        • S Offline
                          S Offline
                          Snapergy
                          schrieb am zuletzt editiert von Snapergy
                          #138
                          1. Gibt es eventuell ne Möglichkeit den Min- und den Max-Wert für den angezeigten Zeitraum hervorheben zu lassen?

                          2. Gibt es ne Möglichkeit die History-Daten zeitlich zu shiften? Ich würde gerne pro Tag den Max- und Min-Wert loggen und dann am Ende des Tages in einen Datenpunkt eintragen, der history-mäßig dann gespeichert wird. Wenn ich mir dann aber eine gestufte Grafik ausgeben lasse, ist der Sprung ja immer erst am Ende des Tages, ich bräuchte ihn aber ja 24h eher

                          1 Antwort Letzte Antwort
                          0
                          • A Offline
                            A Offline
                            Andi81
                            schrieb am zuletzt editiert von
                            #139

                            Guten Morgen,
                            ich finde die Widgets echt genial.

                            Ich experimentiere gerade mit dem Line History Chart. Da kommt mir folgende Frage: Kann man die Object ID's auch dynamisieren?
                            Ich hätte gerne nur ein Chart und möchte die anzuzeigenden Variablen dynamisch hinzufügen und entfernen, um mir in der vis.runtime das Diagramm so zu gestalten wie ich es in dem Moment benötige.

                            Danke
                            Andi

                            S ScroungerS 2 Antworten Letzte Antwort
                            0
                            • A Andi81

                              Guten Morgen,
                              ich finde die Widgets echt genial.

                              Ich experimentiere gerade mit dem Line History Chart. Da kommt mir folgende Frage: Kann man die Object ID's auch dynamisieren?
                              Ich hätte gerne nur ein Chart und möchte die anzuzeigenden Variablen dynamisch hinzufügen und entfernen, um mir in der vis.runtime das Diagramm so zu gestalten wie ich es in dem Moment benötige.

                              Danke
                              Andi

                              S Offline
                              S Offline
                              Snapergy
                              schrieb am zuletzt editiert von
                              #140

                              @Andi81

                              Sowas habe ich mit nem ViewInWidget8 umgesetzt

                              1 Antwort Letzte Antwort
                              0
                              • A Andi81

                                Guten Morgen,
                                ich finde die Widgets echt genial.

                                Ich experimentiere gerade mit dem Line History Chart. Da kommt mir folgende Frage: Kann man die Object ID's auch dynamisieren?
                                Ich hätte gerne nur ein Chart und möchte die anzuzeigenden Variablen dynamisch hinzufügen und entfernen, um mir in der vis.runtime das Diagramm so zu gestalten wie ich es in dem Moment benötige.

                                Danke
                                Andi

                                ScroungerS Offline
                                ScroungerS Offline
                                Scrounger
                                Developer
                                schrieb am zuletzt editiert von Scrounger
                                #141

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

                                Guten Morgen,
                                ich finde die Widgets echt genial.

                                Ich experimentiere gerade mit dem Line History Chart. Da kommt mir folgende Frage: Kann man die Object ID's auch dynamisieren?
                                Ich hätte gerne nur ein Chart und möchte die anzuzeigenden Variablen dynamisch hinzufügen und entfernen, um mir in der vis.runtime das Diagramm so zu gestalten wie ich es in dem Moment benötige.

                                Danke
                                Andi

                                Ja das geht anscheinend, wenn man als Objekt ID nen Binding verwendet und in das Objekt dann die Id der verschiedenen DPs zum anzeigen schreibt (z.B. mittels Select Widget). Das hatten wir auch schon mal diskutiert, entweder hier oder in den verschiedenen testing threads des MDW Adapters. Musst mal suchen. Ich selber hab das aber nicht in Verwendung.

                                <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                                <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                                K 1 Antwort Letzte Antwort
                                0
                                • ScroungerS Scrounger

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

                                  Guten Morgen,
                                  ich finde die Widgets echt genial.

                                  Ich experimentiere gerade mit dem Line History Chart. Da kommt mir folgende Frage: Kann man die Object ID's auch dynamisieren?
                                  Ich hätte gerne nur ein Chart und möchte die anzuzeigenden Variablen dynamisch hinzufügen und entfernen, um mir in der vis.runtime das Diagramm so zu gestalten wie ich es in dem Moment benötige.

                                  Danke
                                  Andi

                                  Ja das geht anscheinend, wenn man als Objekt ID nen Binding verwendet und in das Objekt dann die Id der verschiedenen DPs zum anzeigen schreibt (z.B. mittels Select Widget). Das hatten wir auch schon mal diskutiert, entweder hier oder in den verschiedenen testing threads des MDW Adapters. Musst mal suchen. Ich selber hab das aber nicht in Verwendung.

                                  K Offline
                                  K Offline
                                  kristina.da
                                  schrieb am zuletzt editiert von
                                  #142

                                  Hallo zusammen,

                                  ich bin gerade dabei meine Handy Visualiserung umzusetzen und habe ein Skalierungsproblem.
                                  Ich habe auf meine iPhone X nur 375x770px zur Verfügung und schaffe es nicht ein Diagramm mit Temperaturen in meiner
                                  View unterzubringen, ohne das es mir die Beschriftung der Y-Achse "wegschneidet" (siehe Screenshot).

                                  Screenshot.jpg

                                  Anbei das exportierte Widget:

                                  [{"tpl":"tplVis-materialdesign-Chart-Line-History","data":{"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","dataCount":"4","aggregate":"average","timeIntervalToShow":"1 hour","refreshMethod":"timeInterval","refreshTimeInterval":"1 minute","chartTimeout":"2","pointStyle":"circle","showLegend":true,"legendPosition":"bottom","legendPointStyle":true,"showTooltip":false,"tooltipTimeFormats":"{\"millisecond\":\"lll:ss\",\"second\":\"lll:ss\",\"minute\":\"lll\",\"hour\":\"lll\",\"day\":\"lll\",\"week\":\"lll\",\"month\":\"lll\",\"quarter\":\"lll\",\"year\":\"lll\"}","tooltipShowColorBox":false,"lineSpanGaps0":"true","lineSpanGaps1":"true","xAxisPosition":"bottom","xAxisBounds":"dataSet","xAxisTimeFormats":"{\"minute\":\"H:mm [Uhr\\\\n] DD.MM[.]\",\"hour\":\"H:00 [Uhr\\\\n] DD.MM[.]\"} ","xAxisValueDistanceToAxis":"0","xAxisShowAxis":true,"xAxisShowAxisLabels":true,"xAxisShowGridLines":true,"xAxisShowTicks":"true","xAxisMinRotation":"0","xAxisMaxRotation":"0","yAxisValueDistanceToAxis":"10","showYAxis0":"true","yAxisPosition0":"left","yAxisShowGridLines0":"true","yAxisShowTicks0":"true","yAxisShowAxisBorder0":"true","showYAxis1":"true","yAxisPosition1":"left","yAxisShowGridLines1":"true","yAxisShowTicks1":"true","yAxisShowAxisBorder1":"true","showValues0":false,"valuesPositionAnchor0":"end","valuesPositionAlign0":"top","valuesTextAlign0":"center","showValues1":false,"valuesPositionAnchor1":"end","valuesPositionAlign1":"top","valuesTextAlign1":"center","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,"historyAdapterInstance":"sql.0","lineSpanGaps2":"true","lineSpanGaps3":"true","lineSpanGaps4":"true","showYAxis2":"true","yAxisPosition2":"left","yAxisShowGridLines2":"true","yAxisShowTicks2":"true","yAxisShowAxisBorder2":"true","showYAxis3":"true","yAxisPosition3":"left","yAxisShowGridLines3":"true","yAxisShowTicks3":"true","yAxisShowAxisBorder3":"true","showYAxis4":"true","yAxisPosition4":"left","yAxisShowGridLines4":"true","yAxisShowTicks4":"true","yAxisShowAxisBorder4":"true","showValues2":false,"valuesPositionAnchor2":"end","valuesPositionAlign2":"top","valuesTextAlign2":"center","showValues3":false,"valuesPositionAnchor3":"end","valuesPositionAlign3":"top","valuesTextAlign3":"center","showValues4":false,"valuesPositionAnchor4":"end","valuesPositionAlign4":"top","valuesTextAlign4":"center","oid0":"zigbee.0.00158d000272e8b2.temperature","oid1":"zigbee.0.00158d000272ffb6.temperature","oid2":"zigbee.0.00158d0002774718.temperature","oid3":"zigbee.0.00158d0002797b32.temperature","oid4":"zigbee.0.00158d0002797b32.temperature","commonYAxis0":"4","commonYAxis1":"4","commonYAxis2":"4","commonYAxis3":"4","commonYAxis4":"","legendFontColor":"#FFFFFF","legendFontSize":"12","legendFontFamily":"helvetica","legendBoxWidth":"5","lineThikness0":"3","dataColor0":"#FFA500","useFillColor0":true,"lineThikness1":"3","dataColor1":"#21833b","dataColor2":"#1410bc","lineThikness2":"3","useFillColor2":true,"dataColor3":"#e51010","lineThikness3":"3","useFillColor3":true,"dataColor4":"#fc1df5","lineThikness4":"3","useFillColor4":true,"xAxisTitle":"","xAxisTitleColor":"#FFFFFF","xAxisTitleFontFamily":"helvetica","xAxisTitleFontSize":"10","xAxisValueLabelColor":"#FFFFFF","xAxisValueFontFamily":"helvetica","xAxisValueFontSize":"10","xAxisGridLinesColor":"#FFFFFF","xAxisGridLinesWitdh":"0.5","yAxisTitleColor":"#FFFFFF","yAxisTitleFontFamily":"helvetica","yAxisTitleFontSize":"","yAxisValueLabelColor":"#FFFFFF","yAxisValueFontFamily":"helvetica","legendText0":"Wohnzimmer","legendText1":"Küche","legendText2":"Bad","legendText3":"Schlafzimmer","lineTension3":"0","lineTension2":"0","lineTension1":"0","lineTension0":"0","lineTension4":"0","yAxisGridLinesWitdh4":"0.5","yAxisGridLinesColor4":"#FFFFFF","g_layoutForData_§5":false,"lineSpanGaps5":"true","g_lineValuesLayout_§5":false,"showValues5":"true","valuesPositionAnchor5":"end","valuesPositionAlign5":"top","valuesTextAlign5":"center","yAxisValueFontSize":"10","g_yAxisLayoutForData_§5":false,"showYAxis5":"true","yAxisPosition5":"left","yAxisShowGridLines5":"true","yAxisShowTicks5":"true","yAxisShowAxisBorder5":"true","yAxisValueMaxDigits1":"","yAxisValueMaxDigits4":"0","yAxisMaxLabel4":"","yAxisValueAppendText4":" °C","maxDataPoints":"","xAxisTickLength":"","xAxisOffsetGridLines":false,"xAxisMaxLabel":"","yAxisMinValue4":"","yAxisMaxValue4":"","yAxisStep4":"","valuesSteps0":"","valuesMaxDecimals0":"","valuesMaxDecimals4":""},"style":{"left":"12px","top":"326px","width":"471px","height":"430px"},"widgetSet":"materialdesign"}]
                                  

                                  Habt Ihr dazu ein Idee, wie ich das Diagramm evtl. noch zusammenschrumpfen könnte?

                                  Danke und Grüße,
                                  Kristina

                                  M 1 Antwort Letzte Antwort
                                  0
                                  • K kristina.da

                                    Hallo zusammen,

                                    ich bin gerade dabei meine Handy Visualiserung umzusetzen und habe ein Skalierungsproblem.
                                    Ich habe auf meine iPhone X nur 375x770px zur Verfügung und schaffe es nicht ein Diagramm mit Temperaturen in meiner
                                    View unterzubringen, ohne das es mir die Beschriftung der Y-Achse "wegschneidet" (siehe Screenshot).

                                    Screenshot.jpg

                                    Anbei das exportierte Widget:

                                    [{"tpl":"tplVis-materialdesign-Chart-Line-History","data":{"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","dataCount":"4","aggregate":"average","timeIntervalToShow":"1 hour","refreshMethod":"timeInterval","refreshTimeInterval":"1 minute","chartTimeout":"2","pointStyle":"circle","showLegend":true,"legendPosition":"bottom","legendPointStyle":true,"showTooltip":false,"tooltipTimeFormats":"{\"millisecond\":\"lll:ss\",\"second\":\"lll:ss\",\"minute\":\"lll\",\"hour\":\"lll\",\"day\":\"lll\",\"week\":\"lll\",\"month\":\"lll\",\"quarter\":\"lll\",\"year\":\"lll\"}","tooltipShowColorBox":false,"lineSpanGaps0":"true","lineSpanGaps1":"true","xAxisPosition":"bottom","xAxisBounds":"dataSet","xAxisTimeFormats":"{\"minute\":\"H:mm [Uhr\\\\n] DD.MM[.]\",\"hour\":\"H:00 [Uhr\\\\n] DD.MM[.]\"} ","xAxisValueDistanceToAxis":"0","xAxisShowAxis":true,"xAxisShowAxisLabels":true,"xAxisShowGridLines":true,"xAxisShowTicks":"true","xAxisMinRotation":"0","xAxisMaxRotation":"0","yAxisValueDistanceToAxis":"10","showYAxis0":"true","yAxisPosition0":"left","yAxisShowGridLines0":"true","yAxisShowTicks0":"true","yAxisShowAxisBorder0":"true","showYAxis1":"true","yAxisPosition1":"left","yAxisShowGridLines1":"true","yAxisShowTicks1":"true","yAxisShowAxisBorder1":"true","showValues0":false,"valuesPositionAnchor0":"end","valuesPositionAlign0":"top","valuesTextAlign0":"center","showValues1":false,"valuesPositionAnchor1":"end","valuesPositionAlign1":"top","valuesTextAlign1":"center","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,"historyAdapterInstance":"sql.0","lineSpanGaps2":"true","lineSpanGaps3":"true","lineSpanGaps4":"true","showYAxis2":"true","yAxisPosition2":"left","yAxisShowGridLines2":"true","yAxisShowTicks2":"true","yAxisShowAxisBorder2":"true","showYAxis3":"true","yAxisPosition3":"left","yAxisShowGridLines3":"true","yAxisShowTicks3":"true","yAxisShowAxisBorder3":"true","showYAxis4":"true","yAxisPosition4":"left","yAxisShowGridLines4":"true","yAxisShowTicks4":"true","yAxisShowAxisBorder4":"true","showValues2":false,"valuesPositionAnchor2":"end","valuesPositionAlign2":"top","valuesTextAlign2":"center","showValues3":false,"valuesPositionAnchor3":"end","valuesPositionAlign3":"top","valuesTextAlign3":"center","showValues4":false,"valuesPositionAnchor4":"end","valuesPositionAlign4":"top","valuesTextAlign4":"center","oid0":"zigbee.0.00158d000272e8b2.temperature","oid1":"zigbee.0.00158d000272ffb6.temperature","oid2":"zigbee.0.00158d0002774718.temperature","oid3":"zigbee.0.00158d0002797b32.temperature","oid4":"zigbee.0.00158d0002797b32.temperature","commonYAxis0":"4","commonYAxis1":"4","commonYAxis2":"4","commonYAxis3":"4","commonYAxis4":"","legendFontColor":"#FFFFFF","legendFontSize":"12","legendFontFamily":"helvetica","legendBoxWidth":"5","lineThikness0":"3","dataColor0":"#FFA500","useFillColor0":true,"lineThikness1":"3","dataColor1":"#21833b","dataColor2":"#1410bc","lineThikness2":"3","useFillColor2":true,"dataColor3":"#e51010","lineThikness3":"3","useFillColor3":true,"dataColor4":"#fc1df5","lineThikness4":"3","useFillColor4":true,"xAxisTitle":"","xAxisTitleColor":"#FFFFFF","xAxisTitleFontFamily":"helvetica","xAxisTitleFontSize":"10","xAxisValueLabelColor":"#FFFFFF","xAxisValueFontFamily":"helvetica","xAxisValueFontSize":"10","xAxisGridLinesColor":"#FFFFFF","xAxisGridLinesWitdh":"0.5","yAxisTitleColor":"#FFFFFF","yAxisTitleFontFamily":"helvetica","yAxisTitleFontSize":"","yAxisValueLabelColor":"#FFFFFF","yAxisValueFontFamily":"helvetica","legendText0":"Wohnzimmer","legendText1":"Küche","legendText2":"Bad","legendText3":"Schlafzimmer","lineTension3":"0","lineTension2":"0","lineTension1":"0","lineTension0":"0","lineTension4":"0","yAxisGridLinesWitdh4":"0.5","yAxisGridLinesColor4":"#FFFFFF","g_layoutForData_§5":false,"lineSpanGaps5":"true","g_lineValuesLayout_§5":false,"showValues5":"true","valuesPositionAnchor5":"end","valuesPositionAlign5":"top","valuesTextAlign5":"center","yAxisValueFontSize":"10","g_yAxisLayoutForData_§5":false,"showYAxis5":"true","yAxisPosition5":"left","yAxisShowGridLines5":"true","yAxisShowTicks5":"true","yAxisShowAxisBorder5":"true","yAxisValueMaxDigits1":"","yAxisValueMaxDigits4":"0","yAxisMaxLabel4":"","yAxisValueAppendText4":" °C","maxDataPoints":"","xAxisTickLength":"","xAxisOffsetGridLines":false,"xAxisMaxLabel":"","yAxisMinValue4":"","yAxisMaxValue4":"","yAxisStep4":"","valuesSteps0":"","valuesMaxDecimals0":"","valuesMaxDecimals4":""},"style":{"left":"12px","top":"326px","width":"471px","height":"430px"},"widgetSet":"materialdesign"}]
                                    

                                    Habt Ihr dazu ein Idee, wie ich das Diagramm evtl. noch zusammenschrumpfen könnte?

                                    Danke und Grüße,
                                    Kristina

                                    M Offline
                                    M Offline
                                    micklafisch
                                    schrieb am zuletzt editiert von
                                    #143

                                    @kristina-da
                                    Hallo,
                                    versuch mal unter Diagramm Layout -> Abstand von links zu setzen. Hatte mal mit dem oberen Rand Schwierigkeiten und das hatte geholfen.

                                    K 1 Antwort Letzte Antwort
                                    0
                                    • M MarEhg

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

                                      O Offline
                                      O Offline
                                      oranggila
                                      schrieb am zuletzt editiert von
                                      #144

                                      @MarEhg Unter group_yAxisLayoutForData[0] die Werte yAxisValueMinDigits[0] und yAxisValueMaxDigits[0]=3 setzen:
                                      0720f424-b670-4522-afea-fa98e1b00184-grafik.png

                                      Intel NUC - ioBroker in Proxmox-VM, Zigbee TCP CC2652P2, MG4 Trophy (e-Auto)

                                      1 Antwort Letzte Antwort
                                      0
                                      • S sveni_lee

                                        @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 Offline
                                        O Offline
                                        oranggila
                                        schrieb am zuletzt editiert von
                                        #145

                                        @sveni_lee Das interessiert mich auch. Kann man für yAxisMin/MaxValue keine Kommazahl eingeben?

                                        Intel NUC - ioBroker in Proxmox-VM, Zigbee TCP CC2652P2, MG4 Trophy (e-Auto)

                                        1 Antwort Letzte Antwort
                                        0
                                        • M micklafisch

                                          @kristina-da
                                          Hallo,
                                          versuch mal unter Diagramm Layout -> Abstand von links zu setzen. Hatte mal mit dem oberen Rand Schwierigkeiten und das hatte geholfen.

                                          K Offline
                                          K Offline
                                          kristina.da
                                          schrieb am zuletzt editiert von
                                          #146

                                          @micklafisch: Danke Dir...Die Einstellung hat geholfen. Schöne Feiertage!

                                          K 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

                                          750

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          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