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
    653

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

  • 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.
  • 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
                              • 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
                                schrieb am zuletzt editiert von
                                #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 Antwort Letzte Antwort
                                0
                                • Z Offline
                                  Z Offline
                                  ZockerFloh7
                                  schrieb am zuletzt editiert von
                                  #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 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

                                  932

                                  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