Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

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

NEWS

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    24
    1
    1.3k

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

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    14
    1
    2.6k

Material Design Widgets: Bar Chart Widget

Scheduled Pinned Locked Moved Visualisierung
vis
24 Posts 10 Posters 6.1k Views 11 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • ScroungerS Scrounger

    @meinzisas sagte in Material Design Widgets: Bar Chart Widget:

    @Scrounger
    Guten Morgen. Wir bekomme ich 2 Werte als Anzeige über die Balken? Ich hätte das gerne so angezeigt, wie Du es im ersten Post hast ( Verbrauch und Kosten).

    Vielen Dank

    Entweder mittels Binding im Feld Textanhang[x] für jede einzelne Bar.

    Oder elegant und performanter per Skript ein json string für das chart erstellen:
    https://github.com/Scrounger/ioBroker.vis-materialdesign#dataset-json-properties

    MeinzIsAsM Offline
    MeinzIsAsM Offline
    MeinzIsAs
    wrote on last edited by
    #7

    @scrounger Besten Dank. Das mit den Bindings hat super funktioniert. :+1:

    1 Reply Last reply
    0
    • BostilB Offline
      BostilB Offline
      Bostil
      wrote on last edited by
      #8

      Hallo @Scrounger hast du eine Idee für die Umsetzung eines gestapelten Säulendiagramms ?

      • Möchte gerne die Monate von Januar - Dezember auf der X-Achse zeigen
      • gestapelt übereinander sollen dann gerne Hausverbrauch / Eigenverbrauch der PV-Anlage / Netzbezug übereinander dargestellt werden

      Danke für eine Eingebung.

      ScroungerS 1 Reply Last reply
      0
      • BostilB Bostil

        Hallo @Scrounger hast du eine Idee für die Umsetzung eines gestapelten Säulendiagramms ?

        • Möchte gerne die Monate von Januar - Dezember auf der X-Achse zeigen
        • gestapelt übereinander sollen dann gerne Hausverbrauch / Eigenverbrauch der PV-Anlage / Netzbezug übereinander dargestellt werden

        Danke für eine Eingebung.

        ScroungerS Offline
        ScroungerS Offline
        Scrounger
        Developer
        wrote on last edited by
        #9

        @bostil
        Das geht nur mit dem JSON Chart

        1 Reply Last reply
        0
        • BostilB Offline
          BostilB Offline
          Bostil
          wrote on last edited by Bostil
          #10

          @scrounger Dankeschön. Habe verschiedene Datenpunkte im iobroker liegen, die ich dann wohl in eine JSON-Tabelle konvertieren muss. Habe leider hierzu im Forum noch nichts gefunden.

          Hast du ggf. ein Beispiel vorliegen, das du Teilen kannst? Ggf. auch ein Script / Blockly, wie du eine JSON-Tabelle für das JSON-Chart erstellst ?

          dba9f8f3-5cbf-4ab7-b71a-d6fb651f13c2-image.png

          ScroungerS 1 Reply Last reply
          0
          • BostilB Bostil

            @scrounger Dankeschön. Habe verschiedene Datenpunkte im iobroker liegen, die ich dann wohl in eine JSON-Tabelle konvertieren muss. Habe leider hierzu im Forum noch nichts gefunden.

            Hast du ggf. ein Beispiel vorliegen, das du Teilen kannst? Ggf. auch ein Script / Blockly, wie du eine JSON-Tabelle für das JSON-Chart erstellst ?

            dba9f8f3-5cbf-4ab7-b71a-d6fb651f13c2-image.png

            ScroungerS Offline
            ScroungerS Offline
            Scrounger
            Developer
            wrote on last edited by
            #11

            @bostil

            siehe 2. Beispiel in der Doku:
            https://github.com/Scrounger/ioBroker.vis-materialdesign#example
            42d0cf8f-31a8-4391-b772-1f1eb79da442-grafik.png

            Weitere Beispiele findest du Theme zum JSON Chart:
            https://forum.iobroker.net/topic/31871/material-design-widgets-json-chart-widget

            S 1 Reply Last reply
            1
            • ScroungerS Scrounger

              @bostil

              siehe 2. Beispiel in der Doku:
              https://github.com/Scrounger/ioBroker.vis-materialdesign#example
              42d0cf8f-31a8-4391-b772-1f1eb79da442-grafik.png

              Weitere Beispiele findest du Theme zum JSON Chart:
              https://forum.iobroker.net/topic/31871/material-design-widgets-json-chart-widget

              S Offline
              S Offline
              stefu87_CH
              wrote on last edited by
              #12

              @scrounger Wenn ich das Widget Bar Chart in meine Vis ziehe und nichts anpasse, friert meine ganze Visu ein und reagiert sehr träge. Ist da was bekannt?

              8 x Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
              Gigabyte mit Proxmox
              LXC Container mit Iobroker

              1 Reply Last reply
              0
              • I Offline
                I Offline
                IOBaer
                wrote on last edited by
                #13

                Hallo zusammen,

                gibt es eine Möglichkeit, einen Zeilenumbruch in die Spaltenbeschriftungen einzufügen?

                Vielen Dank.

                1 Reply Last reply
                0
                • M Offline
                  M Offline
                  Marc9025
                  wrote on last edited by
                  #14

                  Hallo @Scrounger
                  erstmal vielen Dank für deine Tolle arbeit mit Material Design. So macht es echt spaß in der Vis was zu erstellen.
                  Jetzt zu meiner Frage.
                  Balken.png

                  Ist es möglich die Abstände zwischen den Balken zu verkleinern ? Ich habe dazu leider keine Einstellung gefunden,

                  Ro75R 1 Reply Last reply
                  0
                  • M Marc9025

                    Hallo @Scrounger
                    erstmal vielen Dank für deine Tolle arbeit mit Material Design. So macht es echt spaß in der Vis was zu erstellen.
                    Jetzt zu meiner Frage.
                    Balken.png

                    Ist es möglich die Abstände zwischen den Balken zu verkleinern ? Ich habe dazu leider keine Einstellung gefunden,

                    Ro75R Offline
                    Ro75R Offline
                    Ro75
                    wrote on last edited by
                    #15

                    @marc9025 Du kannst die Balkenbreite vergrößern oder das Widget von der Höher her verringern. So mache ich das bei mir.

                    SERVER = Beelink U59 16GB DDR4 RAM 512GB SSD, FB 7490, FritzDect 200+301+440, ConBee II, Zigbee Aqara Sensoren + NOUS A1Z, NOUS A1T, Philips Hue ** ioBroker, REDIS, influxdb2, Grafana, PiHole, Plex-Mediaserver, paperless-ngx (Docker), MariaDB + phpmyadmin *** VIS-Runtime = Intel NUC 8GB RAM 128GB SSD + 24" Touchscreen

                    1 Reply Last reply
                    0
                    • M Offline
                      M Offline
                      Marc9025
                      wrote on last edited by
                      #16

                      @ro75
                      super vielen Dank genau das was ich wollte:)

                      1 Reply Last reply
                      0
                      • M Offline
                        M Offline
                        Marc9025
                        wrote on last edited by
                        #17

                        Hallo @Ro75
                        vielleicht kannst du mir ja noch mal helfen.
                        Weißt du ob man die Werte automatisch sortieren lassen kann ? Also der größte wert oben.

                        Ro75R 1 Reply Last reply
                        0
                        • M Marc9025

                          Hallo @Ro75
                          vielleicht kannst du mir ja noch mal helfen.
                          Weißt du ob man die Werte automatisch sortieren lassen kann ? Also der größte wert oben.

                          Ro75R Offline
                          Ro75R Offline
                          Ro75
                          wrote on last edited by Ro75
                          #18

                          @marc9025 Das geht mit dem JSON Chart. Da musst du dir die JSON mit den Daten erstellen und da kannst ja auch sortiert die Daten schreiben. Bei den Widgets gibt es immer ganz oben bei den Eigenschaften einen Link wo alles erklärt wird. Schaue dir das mal an.

                          49a8d9e6-d85c-4e40-8cff-5fe3736cc9d8-image.png

                          Link

                          SERVER = Beelink U59 16GB DDR4 RAM 512GB SSD, FB 7490, FritzDect 200+301+440, ConBee II, Zigbee Aqara Sensoren + NOUS A1Z, NOUS A1T, Philips Hue ** ioBroker, REDIS, influxdb2, Grafana, PiHole, Plex-Mediaserver, paperless-ngx (Docker), MariaDB + phpmyadmin *** VIS-Runtime = Intel NUC 8GB RAM 128GB SSD + 24" Touchscreen

                          M 1 Reply Last reply
                          0
                          • Ro75R Ro75

                            @marc9025 Das geht mit dem JSON Chart. Da musst du dir die JSON mit den Daten erstellen und da kannst ja auch sortiert die Daten schreiben. Bei den Widgets gibt es immer ganz oben bei den Eigenschaften einen Link wo alles erklärt wird. Schaue dir das mal an.

                            49a8d9e6-d85c-4e40-8cff-5fe3736cc9d8-image.png

                            Link

                            M Offline
                            M Offline
                            Marc9025
                            wrote on last edited by
                            #19

                            @ro75
                            bis jetzt nutze ich das nur für Graphen. Aber stimmt, Balken gehen damit ja auch :).

                            Ro75R 1 Reply Last reply
                            0
                            • M Marc9025

                              @ro75
                              bis jetzt nutze ich das nur für Graphen. Aber stimmt, Balken gehen damit ja auch :).

                              Ro75R Offline
                              Ro75R Offline
                              Ro75
                              wrote on last edited by
                              #20

                              @marc9025 Du kannst natürlich auch die jetzige Variante nutzen. Bar Chart mit Datenpunkten. Dann musst du nur, wenn du z.B. 5 Balken hast (jeder Balken ein Datenpunkt), die Daten sortiert in den Datenpunkt schreiben und die Achsenbeschriftung ebenfalls mittels Datenpunkt versuchen (habe ich jetzt nicht getestet ob das mit {Datenpunkt} funktioniert).

                              SERVER = Beelink U59 16GB DDR4 RAM 512GB SSD, FB 7490, FritzDect 200+301+440, ConBee II, Zigbee Aqara Sensoren + NOUS A1Z, NOUS A1T, Philips Hue ** ioBroker, REDIS, influxdb2, Grafana, PiHole, Plex-Mediaserver, paperless-ngx (Docker), MariaDB + phpmyadmin *** VIS-Runtime = Intel NUC 8GB RAM 128GB SSD + 24" Touchscreen

                              1 Reply Last reply
                              0
                              • E Offline
                                E Offline
                                eitljoerggmx.at
                                wrote on last edited by
                                #21

                                Hallo Scrouger,

                                erst mal will ich sagen, dass die Widgets klasse sind! Danke dafür!
                                Ich würde gern in einem Bar Chart einen Wert invertieren (grün) , leider finde ich aber keine multiply Option (-1).
                                Da die Daten aus sourceanalytics kommen ist es auch schwierig die mit nem einfachen Script zu drehen.

                                Hast du vielleicht nen Tip?

                                BarChart.png

                                Danke, LG

                                ScroungerS 1 Reply Last reply
                                0
                                • E eitljoerggmx.at

                                  Hallo Scrouger,

                                  erst mal will ich sagen, dass die Widgets klasse sind! Danke dafür!
                                  Ich würde gern in einem Bar Chart einen Wert invertieren (grün) , leider finde ich aber keine multiply Option (-1).
                                  Da die Daten aus sourceanalytics kommen ist es auch schwierig die mit nem einfachen Script zu drehen.

                                  Hast du vielleicht nen Tip?

                                  BarChart.png

                                  Danke, LG

                                  ScroungerS Offline
                                  ScroungerS Offline
                                  Scrounger
                                  Developer
                                  wrote on last edited by
                                  #22

                                  @eitljoerggmx-at
                                  Gibt mehre Lösungen.
                                  Z.B alias verwenden und Datenpunkt mit -1 multiplizieren. Oder Jason Objekt per Skript blockly etc erstellen

                                  E 1 Reply Last reply
                                  0
                                  • ScroungerS Scrounger

                                    @eitljoerggmx-at
                                    Gibt mehre Lösungen.
                                    Z.B alias verwenden und Datenpunkt mit -1 multiplizieren. Oder Jason Objekt per Skript blockly etc erstellen

                                    E Offline
                                    E Offline
                                    eitljoerggmx.at
                                    wrote on last edited by
                                    #23

                                    @scrounger Daran hatte ich auch gedacht, ich hab aber teils alte Daten in der DB, die müsste ich ja dann alle umrechnen wenn ich diese anzeigen will.
                                    Jahresrückblick der PV Produktion wäre zB so ein Fall.

                                    Ich habs nun mit nem Kreisdiagramm gelöst,
                                    Damit ist die Übersicht eigentlich besser und die Negativen Werte werden trotzdem als Kreissegment dargestellt. Das passt nun so für mich.

                                    LG

                                    1 Reply Last reply
                                    0
                                    • Z Offline
                                      Z Offline
                                      ZockerFloh7
                                      wrote on last edited by
                                      #24

                                      Hey, ich habe das Problem, dass sich mein Diagram nach gewisser Zeit nicht mehr aktualisiert.
                                      Ich bekomme dann folgende Meldung:

                                      dce8b3db-cb8c-44e3-8042-f44383db3588-grafik.png

                                      Wenn ich in der VIS die Seite wechsele und dann wieder auf die Seite mit dem Fehler gehe, dann lädt das Widget wieder korrekt.

                                      Hier meine Einstellungen:

                                      0cdd4bff-608d-4bb5-bb6e-ccb1f4bda477-grafik.png
                                      b4f9915e-2769-41b8-8536-b1fb79c1af37-grafik.png

                                      Das Datenformat stimmt.

                                      [{"label":"Birke","value":6,"dataColor":"rgb(221, 86, 122)","valueColor":"rgb(255, 0, 0)"},{"label":"Esche","value":5,"dataColor":"rgb(221, 86, 122)","valueColor":"rgb(255, 0, 0)"}]
                                      
                                      1 Reply Last reply
                                      0
                                      Reply
                                      • Reply as topic
                                      Log in to reply
                                      • Oldest to Newest
                                      • Newest to Oldest
                                      • Most Votes


                                      Support us

                                      ioBroker
                                      Community Adapters
                                      Donate

                                      312

                                      Online

                                      32.5k

                                      Users

                                      81.7k

                                      Topics

                                      1.3m

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

                                      • Don't have an account? Register

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