Material Design Widgets: JSON Chart Widget

Eggi1234 · 4 Oct 2023, 12:49

@sigi234
Danke. Nun geht's

dos1973 · 8 Nov 2023, 01:37

Hi zusammen,
ich haben mir ein Json für das Chart (materialdesign) formatiert aber ich bekomme 2-3 Sachen nicht hin, wäre dankbar wenn mir jemand ein Tipp geben kann.

so schauts bisher aus.

ich möchte gerne jedem balken eine andere Farbe geben, aber ich bekomme es mit der Linie nicht hin... den Farbverlauf hatte ich hinbekommen aber das gefällt mir nicht, aber individuell klappt einfach nicht
ich möchte die Linien im Diagramm gerne entfernen
ich würde auf den Balken Werte die kw/h anzeigen und die Werte links gerne entfernen.

Herzlichen Dank im voraus


{
    "axisLabels": ["Sa", "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa", "So", "Mo"],
	"graphs": [{
			"type": "line",
			"data": [5.7, 9.5, 7.7, 5.9, 7.4, 5.5, 6.7, 9.8, 2, 7.6],
			"yAxis_id": 0,
            "yAxis_show": false,
            "yAxis_gridLines_border_show": false,
            "yAxis_gridLines_ticks_show": false,
			"yAxis_gridLines_show": false,
			"barIsStacked": true,
            "line_pointSize":3,
            "line_Thickness":4,
			"datalabel_show": true,
            "color": "#ff9900",
            "datalabel_color": "#000000",
			"line_UseFillColor": false,
            "yAxis_gridLines_show": false,
            "yAxis_appendix": " kw/h",
            "datalabel_fontFamily": "RobotoCondensed-Light",
			"datalabel_fontSize": 14

 
            
	}, {
		"type": "bar",
		"barIsStacked": true,
		"data": [5.7, 9.5, 7.7, 5.9, 7.4, 5.5, 6.7, 9.8, 2, 7.6],
		"yAxis_id": 0,
		"barStackId": 0,
        "datalabel_show": false,
		"color": "#4f6765",
		"datalabel_color": "#FFFFFF",
		"datalabel_align": "start"
	}
		]
	}

edit:
das mit den Linien habe ich hinbekommen, ich musste die Werte von der "line" zu "bar" verschieben

            "yAxis_show": false,
            "yAxis_gridLines_border_show": false,
            "yAxis_gridLines_ticks_show": false,
	    "yAxis_gridLines_show": false,

nur noch die Farben...

Boronsbruder · 1 Dec 2023, 10:21

Ich bräuchte auch mal Hilfe:

{
  "graphs": [
    {
      "data": [
        {
          "t": 1699887600000,
          "y": 12
        },
        {
          "t": 1699891200000,
          "y": 13
        },
        {
          "t": 1699894800000,
          "y": 13
        },
        {
          "t": 1699898400000,
          "y": 13
        },
        {
          "t": 1699902000000,
          "y": 13
        },
        {
          "t": 1699905600000,
          "y": 13
        },
        {
          "t": 1699909200000,
          "y": 13
        },
        {
          "t": 1699912800000,
          "y": 13
        },
        {
          "t": 1699916400000,
          "y": 13
        },
        {
          "t": 1699920000000,
          "y": 13
        },
        {
          "t": 1699923600000,
          "y": 12
        },
        {
          "t": 1699927200000,
          "y": 12
        },
        {
          "t": 1699930800000,
          "y": 11
        },
        {
          "t": 1699934400000,
          "y": 11
        },
        {
          "t": 1699938000000,
          "y": 11
        },
        {
          "t": 1699941600000,
          "y": 11
        },
        {
          "t": 1699945200000,
          "y": 10
        },
        {
          "t": 1699948800000,
          "y": 10
        },
        {
          "t": 1699952400000,
          "y": 10
        },
        {
          "t": 1699956000000,
          "y": 11
        },
        {
          "t": 1699959600000,
          "y": 10
        },
        {
          "t": 1699963200000,
          "y": 10
        },
        {
          "t": 1699966800000,
          "y": 10
        },
        {
          "t": 1699970400000,
          "y": 9
        },
        {
          "t": 1699974000000,
          "y": 9
        },
        {
          "t": 1699977600000,
          "y": 9
        },
        {
          "t": 1699981200000,
          "y": 9
        },
        {
          "t": 1699984800000,
          "y": 10
        },
        {
          "t": 1699988400000,
          "y": 10
        },
        {
          "t": 1699992000000,
          "y": 10
        },
        {
          "t": 1699995600000,
          "y": 10
        },
        {
          "t": 1699999200000,
          "y": 10
        },
        {
          "t": 1700002800000,
          "y": 10
        },
        {
          "t": 1700006400000,
          "y": 9
        },
        {
          "t": 1700010000000,
          "y": 9
        }
      ],
      "type": "line",
      "legendText": "",
      "tooltip_title": "Temperatur",
      "tooltip_MaxDigits": 2,
      "tooltip_AppendText": " °C",
      "datalabel_color": [
        "#00731a",
        "#007d06",
        "#007d06",
        "#007d06",
        "#007d06",
        "#007d06",
        "#007d06",
        "#007d06",
        "#007d06",
        "#007d06",
        "#00731a",
        "#00731a",
        "#006a2d",
        "#006a2d",
        "#006a2d",
        "#006a2d",
        "#006040",
        "#006040",
        "#006040",
        "#006a2d",
        "#006040",
        "#006040",
        "#006040",
        "#005653",
        "#005653",
        "#005653",
        "#005653",
        "#006040",
        "#006040",
        "#006040",
        "#006040",
        "#006040",
        "#006040",
        "#005653",
        "#005653"
      ],
      "line_PointColor": [
        "#00731a",
        "#007d06",
        "#007d06",
        "#007d06",
        "#007d06",
        "#007d06",
        "#007d06",
        "#007d06",
        "#007d06",
        "#007d06",
        "#00731a",
        "#00731a",
        "#006a2d",
        "#006a2d",
        "#006a2d",
        "#006a2d",
        "#006040",
        "#006040",
        "#006040",
        "#006a2d",
        "#006040",
        "#006040",
        "#006040",
        "#005653",
        "#005653",
        "#005653",
        "#005653",
        "#006040",
        "#006040",
        "#006040",
        "#006040",
        "#006040",
        "#006040",
        "#005653",
        "#005653"
      ],
      "line_PointColorBorder": [
        "#00731a",
        "#007d06",
        "#007d06",
        "#007d06",
        "#007d06",
        "#007d06",
        "#007d06",
        "#007d06",
        "#007d06",
        "#007d06",
        "#00731a",
        "#00731a",
        "#006a2d",
        "#006a2d",
        "#006a2d",
        "#006a2d",
        "#006040",
        "#006040",
        "#006040",
        "#006a2d",
        "#006040",
        "#006040",
        "#006040",
        "#005653",
        "#005653",
        "#005653",
        "#005653",
        "#006040",
        "#006040",
        "#006040",
        "#006040",
        "#006040",
        "#006040",
        "#005653",
        "#005653"
      ],
      "yAxis_show": "false",
      "yAxis_appendix": " °C",
      "xAxis_timeFormats": {
        "millisecond": "H:mm:ss.SSS",
        "second": "H:mm:ss",
        "minute": "dd.[\\n]H:mm",
        "hour": "dd.[\\n]H:mm",
        "day": "dd[\\n]DD.MM",
        "week": "dd[\\n]DD.MM",
        "month": "MMM[\\n]YYYY",
        "quarter": "[Q]Q - YYYY",
        "year": "YYYY"
      }
    }
  ]
}

Wie bekomme ich da die Tage in Deutsch rein?
Wie man sieht sind die Daten durch ein Skript als Timestamps hinterlegt.
Gibts einen Parameter mit dem ich die Locale übergeben kann oder muss ich das Skript umschreiben, um über die axisLabels die entsprechende Beschriftung zu erreichen?

Edit:

Das "Problem" scheint bei der Darstellung in Vis 2.0 zu liegen...
in der 1er wird es ordnungsgemäß dargestellt...

tourer4778 · 1 Dec 2023, 10:21

Hallo, Das JsonChart ist für mich ganz neu und ich bin etwas am ausprobieren, anhand von Beispielen.
Ich würde gerne unten den Zeitstempen auf Tag.Monat ändern, bekomme es aber nicht hin. Wo müsste ich das machen und wie?

{
  "graphs": [
    {
      "type": "bar",
      "barIsStacked": true,
      "barStackId": 1,
      "color": "#ff0505",
      "legendText": "WW",
      "yAxis_id": 0,
      "yAxis_show": true,
      "yAxis_minimumDigits": 0,
      "yAxis_maximumDigits": 0,
      "yAxis_appendix": " kW",
      "yAxis_min": 0,
      "datalabel_show": true,
      "datalabel_color": "#ff0505",
      "line_pointSize": 13,
      "xAxis_timeFormats": {
        "day": "MM.TT"
      },
      "data": [
        {
          "t": 29.11,
          "y": 2
        },
        {
          "t": 30.11,
          "y": 3
        },
        {
          "t": 31.11,
          "y": 5
        }
      ]
    },
    {
      "type": "bar",
      "barIsStacked": true,
      "barStackId": 1,
      "color": "#05ff31",
      "legendText": "HZz",
      "yAxis_id": 0,
      "yAxis_show": true,
      "yAxis_min": 0,
      "datalabel_show": true,
      "datalabel_color": "#05ff31",
      "line_pointSize": 13,
      "xAxis_timeFormats": {
        "day": "MM.TT"
      },
      "data": [
        {
          "t": 29.11,
          "y": 6
        },
        {
          "t": 30.11,
          "y": 5
        },
        {
          "t": 31.11,
          "y": 3
        }
      ]
    }
  ]
}

Oli · 1 Dec 2023, 17:19

@tourer4778
Versuche mal "MMM.D"

Bin erst wieder nächste Woche am Rechner und könnte erst da nachschauen

tourer4778 · 3 Dec 2023, 05:09

@oli
Hat leider nicht funktioniert

Boronsbruder · 3 Dec 2023, 06:39

@oli
ich hab bei mir unter xAxis_timeFormats

day: "dd[\\n]DD.MM"

also bei dir wahrscheinlich dann

day: "DD.MM"

Moment Time Formats
Da findest du die passenden Tokens

Oli · 3 Dec 2023, 08:34

@boronsbruder
Du hast natürlich recht, so muss es eingetragen werden

Einwurf22 · 3 Dec 2023, 17:13

Hallo.
Ich bin noch am Anfang was diesen Adapter betrifft.
Ich habe auch kaum Erfahrung was JSON angeht.

Besteht die Möglichkeit mit dem Bar Chart Widget mit Datenpunkten ohne JSON das links oben abgebildete Widget nachzubilden.

Mir fehlt zum einen die Einstellung, abstand von Balken zu Balken und dann auch noch abstand als Doppelbalken (gelb/grau wie abgebildet).
Zum anderen, wenn ich versuche einen Rahmen Farbe und Rahmenbreite einzustellen, passiert nichts.

kann mir bitte jemand behilflich sein.
Danke!
Gruß

tourer4778 · 4 Dec 2023, 06:36

@boronsbruder
@Oli
Erst einmal Danke für die Hilfe.
Da ich momentan meine ganze Strucktur ändere, ist mir aufgefallen, das meine History DP alle so abgespeichert werden.

  {
    "val": 9.4,
    "ack": 0,
    "ts": 1698902401480,
    "q": 0,
    "c": "script.js.Keller.Heizung",
    "user": "system.user.admin",
    "from": "system.adapter.history.0"
  },
  {
    "val": 9.4,
    "ack": 0,
    "ts": 1698894000262,
    "q": 0,
    "c": "script.js.Keller.Heizung",
    "user": "system.user.admin"
  }
usw...
]

Das ist doch schon eine arte Json. Ist es möglich, diese direkt mit dem JsonChart aufzurufen?

Oli · 4 Dec 2023, 07:38

@tourer4778
es wurde mal ein Skript erstellt, wie du History Datenpunkte in das JSON Chart Widget bringst.

siehe:
https://forum.iobroker.net/topic/31871/material-design-widgets-json-chart-widget/5

tourer4778 · 4 Dec 2023, 10:41

@oli
id: 'CPU.Auslastung',
id: 'CPU.Durchschnitt',
Das sind ja die beiden History Datenpunkte
Hier kann ich dann meine eintragen, zum beispiel
0_userdata.0.Haus.Stromzähler.History.Verbrauch_Tag

Genau so wie der Ziel DP idTarget: 'IoBroker',
oder ?

Boronsbruder · 4 Dec 2023, 12:19

@tourer4778
nope...

idChannel: 'linkeddevices.0.System.LXC.IoBroker' -> '0_userdata.0.Haus.Stromzähler.History'

id: 'CPU.Auslastung' -> 'Verbrauch_Tag'

idTarget ist in Kombination mit strukturchannel ( // Name Eures Ziel Datenpunktes, wird aus 'strukturChannel' + 'idDatenpunkt' zusammengesetzt) der Datenpunkt in dem der Json gespeichert wird.
strukturchannel ist auch der Pfad in dem Controlelemente entnommen werden, wie z.B. let idTimeIntervalDatenpunkt = ${strukturChannel}.Control.timeInterval` // Datenpunkt um Zeitinterval bei Graph zu ändern

Anmerkung: Ich habe das Skript nur kurz überflogen... deswegen können die Informationen auch fehlerhaft sein

Vippis · 9 Apr 2024, 04:00

Hallo,
wie stelle ich es ein, dass die xAxis bei allen JSON Graphs die gleichen Intervalle hat? Ich möchte immer einen Tag von 0 Uhr bis 23 Uhr in 1h Intervallen darstellen. Aber leider werden die Achsen-Intervalle immer nach den Daten erstellt und sind dann immer unterschiedlich?

stenmic · 5 Jul 2024, 04:14

@frank2604
Hallo, und danke für dein influx2-Script

Ist es möglich, dass das Cahrt eine waagrechte Linie anzeigt mit nur einem Datenpunkt?
Ich möchte mir den max Wert zeichnen lassen.

Falls es über das Widget nicht geht, könnte man eventuell das Script so anpassen, dass es Ergebnisse aus dem Query mit nur einem Datenpunkt nochmals weiterverarbeitet?

So in etwa...

// folgender query erzeugt einen Datenpunkt
            fluxQuery: 
                'from(bucket: "'+buket_Name+'") \
                    |> range(start: -1d) \
                    |> filter(fn: (r) => r["_measurement"] == "'+measurement_Name+'") \
                    |> filter(fn: (r) => r["_field"] == "value") \
                    |> max()'
					
// Das ist das Ergebnis im JSON

      "data": [
        {
          "t": 1720065360568,
          "y": 16.6
        }
      ]
	  
// Leider Zeigt das Json Chart keine Linie an mit nur einem Datenpunkt :(
// könnte dein Script das Ergbnis nochmal weiterverarbeiten wenn es nur einen Datenpunkt gibt?
// Beispiel:

      "data": [
        {
          "t": ts vom range start (-1d),
          "y": 16.6
        },
        {
          "t": ts (now),
          "y": 16.6
        }		
      ]
	  
// das dürfte natürlich nur bei einem Datenpunkt passieren,
// Ergebisse mit mehreren Datenpunkte sollen normal verarbeitet werden.

Ich kenn mich leider null aus mit JS

frank2604 · 5 Jul 2024, 20:14

@stenmic

Hi, da kann ich leider nicht helfen. Ich kann auch kein JS und habe mir das auch nur aus Codeschnipseln zusammengesucht. Sorry!

stenmic · 23 Jul 2024, 04:42

Moin,
kann ich irgendwie beinflussen wo die "Tage" unten in der X Achse platziert werden?
Ich hätte sie gerne auf der Posittion 12Uhr.

Setze ich xAxis_time_unit auf "day" stehen die Tage auf 0Uhr (wie in der Grafik).
Lasse ich xAxis_time_unit weg, stehen die Tage auf irgendeiner Uhrzeit.

ExMatador · 15 Oct 2024, 18:45

Re: Material Design Widgets: JSON Chart Widget
Ich habe den DP "0_userdata.0.charts.Verbrauch-Gas.Daten-Tag" mit den korrekten JSON Chart Daten erzeugt.

Gebe ich diesen DP als Objekt-ID direkt ein, wird alles auch angezeigt.

Verwende ich ein Databinding DP, der den korrekten DP enthält, kommt zur Laufzeit der Fehler.

Jemand eine Idee?
Gruß ExMatador

Boronsbruder · 17 Oct 2024, 16:59

@exmatador
Ist im Screenshot extrem unleserlich.
Aber ist "Datenpunkt nicht vorhanden" und in vis2, oder?
Wenn ja mach mal mit der geladenen Seite einen Browser-Refresh, dann stellt er das meist richtig dar.
Wenn es vis2 ist, liegt es aber meines Wissens daran, dass die vis1-Widgets nicht mit vis2 kompatibel sind.
Habe ein ähnliches "Problem" mit einen Temperaturverlauf

ExMatador · 17 Oct 2024, 18:57

@boronsbruder
Es handelt sich um vis (nicht vis2), der Browserrefresh hat leider auch nichts gebracht.
Ich vermute mal, es gibt ein Problem mit dem Widget - wäre aber auch komisch.
ExMatador

NEWS

Material Design Widgets: JSON Chart Widget

Support us

1.0k
Online

31.4k
Users

79.2k
Topics

1.3m
Posts

NEWS

Material Design Widgets: JSON Chart Widget

Support us

1.0kOnline

31.4kUsers

79.2kTopics

1.3mPosts

1.0k
Online

31.4k
Users

79.2k
Topics

1.3m
Posts