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

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

NEWS

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    15
    1
    520

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    619

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    1.9k

Material Design Widgets: Bar Chart Widget

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
24 Beiträge 10 Kommentatoren 6.2k Aufrufe 11 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.
  • ub.privatU ub.privat

    @scrounger

    Moin.moin! Ich versuche als Einsteiger in ähnlicher Art das Balkendiagramm anzuwenden.
    Es soll der tägliche Stromverbrauch visualisiert werden. Die x-Achse soll fortlaufend den Tag schreiben.
    Bisher schaut es so aus:
    b7328153-9b5f-439d-bec5-ba0789c51496-grafik.png
    Ist erst ein Tag in der DB, sollten morgen also Balken hinzukommen.
    Was mir nicht gelingt, an der x-Achse den Tag darzustellen!?
    bcc1bf12-6e34-4fe7-976e-4e2408bd448f-grafik.png

    Hat es ggf. etwas mit der ObjektID unter Allgemein zu tun?
    68551fa4-79e9-4ea2-b654-6cfd6a915f12-grafik.png

    Wo muss ich hand anlegen?

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

    @ub-privat sagte in Material Design Widgets: Bar Chart Widget:

    Ist erst ein Tag in der DB, sollten morgen also Balken hinzukommen.

    Das Bar Chart funktionier nicht mit DB. Dafür musst du das Line History Chart verwenden oder das JSON Chart, wo du per skript die Daten von der DB abrufst.

    Wo muss ich hand anlegen?

    Wenn du es mit dem Bar Chart realisieren willst, brauchst du für jeden Tag / Woche / Monat einen eigenen Datenpunk, wie sie z.B. vom Verbrauchszaehler skript oder SourceAnalytics geliefert werden. Diese kannst du dann im Bar Chart verwenden. DP sehen z.B. so aus:
    48a12e21-b573-4254-a619-82584b21dde7-grafik.png

    Alternativ kannst du auch per skript die Daten aus der DB laden und per JSON dem Bar Chart zuordnen

    ub.privatU 1 Antwort Letzte Antwort
    0
    • ScroungerS Scrounger

      @ub-privat sagte in Material Design Widgets: Bar Chart Widget:

      Ist erst ein Tag in der DB, sollten morgen also Balken hinzukommen.

      Das Bar Chart funktionier nicht mit DB. Dafür musst du das Line History Chart verwenden oder das JSON Chart, wo du per skript die Daten von der DB abrufst.

      Wo muss ich hand anlegen?

      Wenn du es mit dem Bar Chart realisieren willst, brauchst du für jeden Tag / Woche / Monat einen eigenen Datenpunk, wie sie z.B. vom Verbrauchszaehler skript oder SourceAnalytics geliefert werden. Diese kannst du dann im Bar Chart verwenden. DP sehen z.B. so aus:
      48a12e21-b573-4254-a619-82584b21dde7-grafik.png

      Alternativ kannst du auch per skript die Daten aus der DB laden und per JSON dem Bar Chart zuordnen

      ub.privatU Offline
      ub.privatU Offline
      ub.privat
      schrieb am zuletzt editiert von ub.privat
      #4

      @scrounger

      Vielen Dank für deine ausführlihe Antwort. Um das alles umzusetzen bedarf es bei mir noch einer ganzen Menge Lernbedarf!
      Ich habe mich dann doch für das LineHistoryChart entschieden.
      3d7c78d9-ff43-4fea-94c7-3bb75a47c0da-grafik.png

      Bedarf noch der Datensammlung, doch es wird!
      Wo finde ich denn das "Verbrauchszähler-Skript auf deiner Seite?

      ... schon erledigt, habs gefunden! Werde mich dann mal in den SourceAnalytics Adapter reinarbeiten...

      1 Antwort Letzte Antwort
      0
      • MeinzIsAsM Offline
        MeinzIsAsM Offline
        MeinzIsAs
        schrieb am zuletzt editiert von
        #5

        @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

        ScroungerS 1 Antwort Letzte Antwort
        0
        • MeinzIsAsM MeinzIsAs

          @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

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

          @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 1 Antwort Letzte Antwort
          -1
          • 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
            schrieb am zuletzt editiert von
            #7

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

            1 Antwort Letzte Antwort
            0
            • BostilB Offline
              BostilB Offline
              Bostil
              schrieb am zuletzt editiert von
              #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 Antwort Letzte Antwort
              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
                schrieb am zuletzt editiert von
                #9

                @bostil
                Das geht nur mit dem JSON Chart

                1 Antwort Letzte Antwort
                0
                • BostilB Offline
                  BostilB Offline
                  Bostil
                  schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                  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
                    schrieb am zuletzt editiert von
                    #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 Antwort Letzte Antwort
                    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
                      schrieb am zuletzt editiert von
                      #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 Antwort Letzte Antwort
                      0
                      • I Offline
                        I Offline
                        IOBaer
                        schrieb am zuletzt editiert von
                        #13

                        Hallo zusammen,

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

                        Vielen Dank.

                        1 Antwort Letzte Antwort
                        0
                        • M Offline
                          M Offline
                          Marc9025
                          schrieb am zuletzt editiert von
                          #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 Antwort Letzte Antwort
                          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
                            schrieb am zuletzt editiert von
                            #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 Antwort Letzte Antwort
                            0
                            • M Offline
                              M Offline
                              Marc9025
                              schrieb am zuletzt editiert von
                              #16

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

                              1 Antwort Letzte Antwort
                              0
                              • M Offline
                                M Offline
                                Marc9025
                                schrieb am zuletzt editiert von
                                #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 Antwort Letzte Antwort
                                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
                                  schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                                  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
                                    schrieb am zuletzt editiert von
                                    #19

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

                                    Ro75R 1 Antwort Letzte Antwort
                                    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
                                      schrieb am zuletzt editiert von
                                      #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 Antwort Letzte Antwort
                                      0
                                      • E Offline
                                        E Offline
                                        eitljoerggmx.at
                                        schrieb am zuletzt editiert von
                                        #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 Antwort Letzte Antwort
                                        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
                                          schrieb am zuletzt editiert von
                                          #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 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

                                          845

                                          Online

                                          32.6k

                                          Benutzer

                                          81.9k

                                          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