Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[Delphinis]

Hallo,
ich hab zwei Line History Charts von "Material Design" auf einer View und kann die auch auf dem lokalen Rechner darstellen.
Wenn ich die View auf ioBroker.pro (übers internet) aufrufe, sind die charts nicht sichtbar. Ein anderes (HTML)-Widget auf der selben View wird aber dargestellt.
Ausserdem, wenn ich runter scrolle, wechselt die View auf den Start (default) View. Das selbe, wenn ich auf dem lokalen Rechner (browser) die Ansicht verkleinere, oder vergrössere.
Bei anderen Seiten, welche kein solches "Line History Charts"-Widget enthalten ist alles normal.

• Hat jemand dieses Verhalten auch schon bemerkt?
• Gibt es eine falsche Einstellung die das hervorrufen könnte?
• Sind die Charts zu gross? (zwei Charts mit je fünf linien, 960 Datenpunkte)

[Homoran]

@delphinis wie sind die widgets konfiguriert?

[Delphinis]

@homoran

[{"tpl":"tplVis-materialdesign-Chart-Line-History","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"dataCount":"4","timeIntervalToShow":"1 hour","refreshMethod":"timeInterval","refreshTimeInterval":"30 seconds","chartTimeout":"10","backgroundColor":"#mdwTheme:vis-materialdesign.0.colors.charts.background","chartAreaBackgroundColor":"#mdwTheme:vis-materialdesign.0.colors.charts.background_chart","titleLayout":"#mdwTheme:vis-materialdesign.0.fontSizes.card.title","titleFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.card.title","colorBackground":"#mdwTheme:vis-materialdesign.0.colors.card.background","colorTitleSectionBackground":"#mdwTheme:vis-materialdesign.0.colors.card.background_title","colorTextSectionBackground":"#mdwTheme:vis-materialdesign.0.colors.card.background_body","colorTitle":"#mdwTheme:vis-materialdesign.0.colors.card.title","aggregate0":"minmax","aggregate1":"minmax","globalColor":"#mdwTheme:vis-materialdesign.0.colors.charts.global","pointStyle":"circle","showLegend":false,"legendPosition":"right","legendFontColor":"#mdwTheme:vis-materialdesign.0.colors.charts.legend","legendFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.legend","legendFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.legend","legendPointStyle":"true","showTooltip":"true","tooltipMode":"nearest","tooltipPosition":"nearest","tooltipTimeFormats":"{\"millisecond\":\"lll:ss\",\"second\":\"lll:ss\",\"minute\":\"lll\",\"hour\":\"lll\",\"day\":\"lll\",\"week\":\"lll\",\"month\":\"lll\",\"quarter\":\"lll\",\"year\":\"lll\"}","tooltipBackgroundColor":"#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_background","tooltipShowColorBox":"true","tooltipTitleFontColor":"#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_title","tooltipTitleFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.tooltip_title","tooltipTitleFontSize":"1","tooltipBodyFontColor":"#mdwTheme:vis-materialdesign.0.colors.charts.tooltip_text","tooltipBodyFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.tooltip_text","tooltipBodyFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.tooltip_text","lineSpanGaps0":false,"lineSpanGaps1":false,"xAxisPosition":"bottom","xAxisTicksSource":"auto","xAxisBounds":"dataSet","xAxisTimeFormats":"{\"millisecond\":\"H:mm:ss.SSS\",\"second\":\"H:mm:ss\",\"minute\":\"H:mm\",\"hour\":\"H\",\"day\":\"ddd DD.\",\"week\":\"ll\",\"month\":\"MMM YYYY\",\"quarter\":\"[Q]Q - YYYY\",\"year\":\"YYYY\"}","xAxisTitleColor":"#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_title","xAxisTitleFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.x_axis_title","xAxisTitleFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.x_axis_title","xAxisValueLabelColor":"#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_values","xAxisValueFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.x_axis_values","xAxisValueFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.x_axis_values","xAxisDistanceBetweenTicks":"0","xAxisValueDistanceToAxis":"0","xAxisShowAxis":"true","xAxisShowAxisLabels":true,"xAxisShowGridLines":"true","xAxisGridLinesColor":"#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_gridlines","xAxisShowTicks":"true","xAxisZeroLineColor":"#mdwTheme:vis-materialdesign.0.colors.charts.x_axis_zeroline","xAxisMinRotation":"0","xAxisMaxRotation":"0","yAxisTitleColor":"#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_title","yAxisTitleFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.y_axis_title","yAxisTitleFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.y_axis_title","yAxisValueLabelColor":"#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_values","yAxisValueFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.charts.y_axis_values","yAxisValueFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.y_axis_values","yAxisValueDistanceToAxis":"0","showYAxis0":true,"yAxisPosition0":"right","yAxisShowGridLines0":"true","yAxisShowTicks0":"true","yAxisShowAxisBorder0":"true","yAxisGridLinesColor0":"#555555","yAxisZeroLineColor0":"","showYAxis1":"true","yAxisPosition1":"left","yAxisShowGridLines1":"true","yAxisShowTicks1":"true","yAxisShowAxisBorder1":"true","yAxisGridLinesColor1":"#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_gridlines","yAxisZeroLineColor1":"#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_zeroline","showValues0":"showValuesOff","valuesFontColor0":"#mdwTheme:vis-materialdesign.0.colors.charts.value","valuesFontFamily0":"#mdwTheme:vis-materialdesign.0.fonts.charts.value","valuesFontSize0":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.value","valuesPositionAnchor0":"end","valuesPositionAlign0":"top","valuesTextAlign0":"center","showValues1":"showValuesOff","valuesFontColor1":"#mdwTheme:vis-materialdesign.0.colors.charts.value","valuesFontFamily1":"#mdwTheme:vis-materialdesign.0.fonts.charts.value","valuesFontSize1":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.value","valuesPositionAnchor1":"end","valuesPositionAlign1":"top","valuesTextAlign1":"center","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"aggregate2":"minmax","lineSpanGaps2":false,"showYAxis2":"true","yAxisPosition2":"right","yAxisShowGridLines2":"true","yAxisShowTicks2":"true","yAxisShowAxisBorder2":"true","yAxisGridLinesColor2":"#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_gridlines","yAxisZeroLineColor2":"#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_zeroline","showValues2":"showValuesOff","valuesFontColor2":"#mdwTheme:vis-materialdesign.0.colors.charts.value","valuesFontFamily2":"#mdwTheme:vis-materialdesign.0.fonts.charts.value","valuesFontSize2":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.value","valuesPositionAnchor2":"end","valuesPositionAlign2":"top","valuesTextAlign2":"center","animationDuration":"100","maxDataPoints0":"1000","views":null,"historyAdapterInstance":"history.0","oid0":"0_userdata.0.Solar.Leistung.Direktverbrauch","oid1":"0_userdata.0.Solar.Leistung.DirektvUndBatEntl","maxDataPoints1":"1000","commonYAxis1":"0","commonYAxis2":"0","pointSize":"-1","pointSizeHover":"3","tooltipYpadding":"0","tooltipBoxRadius":"2","lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"valuesPositionOffset0":"","steppedLine0":false,"useFillColor0":true,"dataColor0":"#CBE501","fillColor0":"#CBE501","lineThikness0":"0","useFillColor1":true,"dataColor1":"#FFB200","fillColor1":"#FFB200","oid2":"0_userdata.0.Solar.Leistung.DirektvUndBatEntlUndBezug","maxDataPoints2":"1000","useFillColor2":true,"dataColor2":"#FF0000","fillColor2":"#FF0000","aggregate3":"minmax","lineSpanGaps3":false,"showYAxis3":false,"yAxisPosition3":"right","yAxisShowGridLines3":"true","yAxisShowTicks3":"true","yAxisShowAxisBorder3":"true","yAxisGridLinesColor3":"#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_gridlines","yAxisZeroLineColor3":"#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_zeroline","showValues3":"showValuesOff","valuesFontColor3":"#mdwTheme:vis-materialdesign.0.colors.charts.value","valuesFontFamily3":"#mdwTheme:vis-materialdesign.0.fonts.charts.value","valuesFontSize3":"#mdwTheme:vis-materialdesign.0.fontSizes.charts.value","valuesPositionAnchor3":"end","valuesPositionAlign3":"top","valuesTextAlign3":"center","aggregate4":"minmax","lineSpanGaps4":true,"showYAxis4":"true","yAxisPosition4":"left","yAxisShowGridLines4":"true","yAxisShowTicks4":"true","yAxisShowAxisBorder4":"true","yAxisGridLinesColor4":"#ffc6a3DD","yAxisZeroLineColor4":"#mdwTheme:vis-materialdesign.0.colors.charts.y_axis_zeroline","showValues4":"showValuesOff","valuesFontColor4":"#mdwTheme:vis-materialdesign.0.colors.charts.value","valuesFontFamily4":"#mdwTheme:vis-materialdesign.0.fonts.charts.value","valuesFontSize4":"","valuesPositionAnchor4":"end","valuesPositionAlign4":"top","valuesTextAlign4":"center","oid3":"0_userdata.0.Solar.Leistung.PVin_Netto","minTimeInterval2":"5","maxDataPoints3":"1000","lineThikness3":"1","fillColor3":"#33333300","dataColor3":"#33333300","commonYAxis3":"0","minTimeInterval0":"5","minTimeInterval1":"5","minTimeInterval3":"5","pointColor0":"","oid4":"modbus.1.inputRegisters.30845_Batterie_SoC","dataColor4":"#FF6607","fillColor4":"","useFillColor4":false,"legendText4":"Batterieladung","legendText3":"Skalendummy","legendText2":"Eigenverbrauch","legendText1":"Batterie laden","yAxisStep2":"-1","yAxisValueMaxDigits2":"0","yAxisStep3":"-1","yAxisValueMinDigits4":"","pointHoverColor0":"#000000","maxDataPoints4":"1000","steppedLine4":true,"lineThikness4":"","yAxisTitle4":"","yAxisMinValue4":"0","yAxisMaxValue4":"100","yAxisStep4":"10","valuesSteps4":"","lineTension4":"","yAxisGridLinesWitdh4":"1","yAxisGridLinesWitdh0":"1","yAxisStep0":"500","yAxisValueColor0":"#555555","yAxisValueColor4":"#FF6607","locked":false,"yAxisMinValue0":"0","yAxisMinValue1":"0","yAxisMinValue2":"0","yAxisMinValue3":"0","useFillColor3":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","time_interval_oid":"0_userdata.0.Solar.Zeitbereich"},"style":{"left":"5px","top":"443px","width":"367px","height":"300px"},"widgetSet":"materialdesign"}]

Beide sind ähnlich (nur andere Datenpunkte und Farben

[Homoran]

@delphinis Was soll ich mit dem xml Export?
nutzt mir am Handy gar nichts.

zeige bitte die Konfiguration, insbesondere die Quelle

[Delphinis]

@homoran
was meinst du mit Quelle? Die Datenpunkte
Die Konfiguration ist ja ziemlich umfangreich, da kann ich ja nicht einfach einen Screenshot machen?
Hier hab ich mal die Grudkonfiguration

[Homoran]

@delphinis sagte in Darstellung "Line History Chart" (Material design):

was meinst du mit Quelle? Die Datenpunkte

ja, schon gesehen!
da wird ja kein chart aufgerufen.

dann hab ich keine Idee mehr.

@delphinis sagte in Darstellung "Line History Chart" (Material design):

wenn ich runter scrolle, wechselt die View auf den Start (default) View. Das selbe, wenn ich auf dem lokalen Rechner (browser) die Ansicht verkleinere, oder vergrössere.

ist ein gewollter Effekt, wenn man mit auflösungsabhängigen default views arbeitet

[Delphinis]

@homoran said in Darstellung "Line History Chart" (Material design):

ist ein gewollter Effekt, wenn man mit auflösungsabhängigen default views arbeitet

Danke, habs mal auf undefiniert zurückgestellt.

Das Problem mit der Darstellung vom Internet oder von einem anderen Rechner im Netzwerk (https://iobroker.pro/vis/index.html rsp. 192.168.1.xx:8082/vis/index.html) bleibt aber bestehen. Vielleicht weiss ja jemand anderes noch was...

[Homoran]

@delphinis sagte in Darstellung "Line History Chart" (Material design):

habs mal auf undefiniert zurückgestellt.

was?
warum?

[Delphinis]

@homoran said in Darstellung "Line History Chart" (Material design):

was?
warum?

Na das mit der Auflösungsabhängigen View.

Warum?
Ich finde das nicht gerade ein toller "gewollter Effekt" dass einfach die View auf das Default wechselt, wenn einer CTRL-Scroll macht, oder auf dem Handy versucht, runter zu scrollen. Das ist ja komplett strange. Der User weiss ja gar nicht, was er da falsch macht. Vielleicht hab ich da was nicht genau begriffen, aber ich finde nicht, dass solche Automatismen zur Benutzerfreundlichkeit beitragen.

Aber eigentlich ist ja mein Hauptproblem immer noch, dass die Darstellung aus dem Netz nicht funzt.

[Homoran]

@delphinis sagte in Darstellung "Line History Chart" (Material design):

Na das mit der Auflösungsabhängigen View.

ist auch nicht deutlicher.
Was hast du da auf undefined gestellt?

@delphinis sagte in Darstellung "Line History Chart" (Material design):

Ich finde das nicht gerade ein toller "gewollter Effekt" dass einfach die View auf das Default wechselt, wenn einer CTRL-Scroll macht, oder auf dem Handy versucht, runter zu scrollen

wenn du für jede existierende Auflösung einen default View hast, wird dieser auf dem entsprechenden Endgerät geöffnet. Sogar beim drehen des Handys bekommst du einen anderen view.

Wenn du -wie auch immer- die Auflösung des Endgeräts veränderst kommt es dann natürlich zu "strange" Effekten, wel die dann vorhandene Auflösung eher zu einem anderen default view passt

[Delphinis]

@Scrounger
vielleicht weiss ja der Ersteller von diesem Chart was, wieso die Darstellung über das Netz (lokal / web) nicht tut?

[Oli]

@delphinis
Existiert dein Datenpunkt für die OID? Bei mir steht unterhalb der Eingabe der Name des Datenpunktes, nicht die ID

[Delphinis]

@oli said in Darstellung "Line History Chart" (Material design):

Bei mir steht unterhalb der Eingabe der Name des Datenpunktes, nicht die ID

Da steht ja der Name (0_userdata.0.Solar.Leistung.Direktverbrauch)? Eine ID wäre ja eine Nummer?
Aber auf jeden Fall extistiert der Datenpunkt. Seine Werte werden im Chart auch angezeigt.

[Homoran]

@delphinis sagte in Darstellung "Line History Chart" (Material design):

Eine ID wäre ja eine Nummer?

nein, dass ist die vollständige ID!
du hast wahrscheinlich keinen Namen vergeben, dann wird dort auch die ID eingetragen

[Delphinis]

@homoran
Danke für den Hinweis.
Ich hab mal einen Namen dafür vergeben. Dieser Name steht jetzt auch dort unter der ID.

[Delphinis]

Ich hab jetzt mal eine neue View aufgemacht und dort einfach nur ein neues, jungfräuliches "Line History Chart" reingetan und nur mal die Adapterinstanz eingetragen. Aber auch dieses wird per LAN/Internet nicht angezeigt. Auf der lokalen maschine geht es aber immer (http://localhost:8082/vis/....) :thinking_face:
Kann das mal jemand bei sich kurz testen?

[Homoran]

@delphinis sagte in Darstellung "Line History Chart" (Material design):

Aber auch dieses wird per LAN/Internet nicht angezeigt.

Davon war bisher noch nicht die Rede!
bisher ging es um Zugriff per iobroker.pro

Also auch am PC im Heimnetz nicht?

@delphinis sagte in Darstellung "Line History Chart" (Material design):

Auf der lokalen maschine geht es aber immer (http://localhost:8082/vis/....)

wieso geht das mit localhost?
Hast du eine grafische Oberfläche incl. Browser auf dem Server?

[Delphinis]

@homoran
Sorry, hab das eingangs offenbar zu wenig genau beschrieben. Das Problem ist immer wenn ich nicht lokal teste.
Das heisst im LAN (192.168.1.xx oder auch im Internet)

"Hast du eine grafische Oberfläche incl. Browser auf dem Server?"
Ja, wie konfigurierst denn du dein GUI?

[Homoran]

@delphinis sagte in Darstellung "Line History Chart" (Material design):

Ja, wie konfigurierst denn du dein GUI?

wenn du mir sagst was du damit meinst kann ich es spezifizieren.

ich denke du meinst
ich gehe an meinem PC/Tablet/Handy mit der <IPdesServers>:8081 in den Admin

[Delphinis]

@homoran
Ok, ich hab das bis jetzt halt immer per localhost gemacht.