Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Material Design Widgets: Bar Chart Widget

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    Material Design Widgets: Bar Chart Widget

    This topic has been deleted. Only users with topic management privileges can see it.
    • Scrounger
      Scrounger Developer last edited by Scrounger

      Bar Chart Widget

      barChart.png

      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!

      ub.privat 1 Reply Last reply Reply Quote 0
      • ub.privat
        ub.privat @Scrounger last edited by

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

        Scrounger 1 Reply Last reply Reply Quote 0
        • Scrounger
          Scrounger Developer @ub.privat last edited by 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.privat 1 Reply Last reply Reply Quote 0
          • ub.privat
            ub.privat @Scrounger last edited by ub.privat

            @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 Reply Last reply Reply Quote 0
            • MeinzIsAs
              MeinzIsAs last edited by

              @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

              Scrounger 1 Reply Last reply Reply Quote 0
              • Scrounger
                Scrounger Developer @MeinzIsAs last edited by 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

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

                  @scrounger Besten Dank. Das mit den Bindings hat super funktioniert. 👍

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

                    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.

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

                      @bostil
                      Das geht nur mit dem JSON Chart

                      1 Reply Last reply Reply Quote 1
                      • Bostil
                        Bostil last edited by 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

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

                          @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 Reply Quote 1
                          • S
                            stefu87_CH @Scrounger last edited by

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

                            1 Reply Last reply Reply Quote 0
                            • I
                              IOBaer last edited by

                              Hallo zusammen,

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

                              Vielen Dank.

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

                                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,

                                Ro75 1 Reply Last reply Reply Quote 0
                                • Ro75
                                  Ro75 @Marc9025 last edited by

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

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

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

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

                                      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.

                                      Ro75 1 Reply Last reply Reply Quote 0
                                      • Ro75
                                        Ro75 @Marc9025 last edited by 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 1 Reply Last reply Reply Quote 0
                                        • M
                                          Marc9025 @Ro75 last edited by

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

                                          Ro75 1 Reply Last reply Reply Quote 0
                                          • Ro75
                                            Ro75 @Marc9025 last edited by

                                            @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).

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            430
                                            Online

                                            31.8k
                                            Users

                                            80.0k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            10
                                            24
                                            4822
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo