NEWS
echarts - Anzeige in der VIS Views / Zeitachsen
-
Hallo,
ich möchte gerne echarts in VIS darstellen, teilweise den selben echart, aber mit unterschiedlicher Zeit Reichweite.
Ich habe das wie unten dargestellt gelöst, aber dafür benötige ich unendlich viele views in VIS (Ich habe sehr viele Trends in vielen Bereichen).
Mit Float war es relativ gut mit den iFrames, umständlich war nur das man den link immer per copy / paste und das noch bei jeder Änderung einbringen musste, das wäre jetzt mit echarts genial da man die ja dann nur noch an einer Stelle bearbeiten müsste, mein Weg mit echarts umzugehen scheint mir allerdings etwas umständlich.Hat jemand eine Idee wie ich das lösen könnte?
-
-
@mcu sagte in echarts - Anzeige in der VIS Views / Zeitachsen:
@mike2712
https://mcuiobroker.gitbook.io/jarvis-infos/jarvis/system-effektprog./echartschangeDanke, das ist zwar noch nicht exakt das was ich suche, allerdings bekomme ich so zumindest die Zeit Reichweite angepasst und das spart schon mal einige views.
-
@mike2712 Dann erkläre bitte genau was du suchst. Mit Bildern?
Man kann auch die IDs komplett ersetzen. Dann braucht man nur eine View. -
das ich die ID`s ersetzen kann habe ich der Beschreibung entnommen, etwa so wie hier unten, nur das anstelle der views direkt die echarts eingetragen werden können.
Aber das mit dem Script, der Variablen ID sowie Zeit ist mir eigentlich schon sehr weitergeholfen, ich probiere und teste mal ein wenig. Das ist auf jeden Fall deutlich besser als der Weg den ich ursprünglich für die Umstellung von Float auf echart eingeschlagen habe. -
Schön wäre es wenn man an dem Widget echart die ID mit einem TAG belegen könnte, ist so etwas möglich?
Dann könnte man einem view machen und müsste quasi nur die beiden Datenpunkte echartsDP und range passend beschalten.
-
@mike2712 Nein?. Ich habe es aber noch nicht verstanden, was du damit erreichen willst.
Ich schreibe aber das Programm so um, so dass man nur noch ein eChart-DP benötigen würde, wenn man es möchte.
Das dauert aber noch....Hast du unterschiedliche "Typen" von eCharts?
Also eCharts die unterschiedliche Einstellungen (Darstellungs-Parameter, Kurvenarten roh,minmax usw.) haben? (nicht Zeit-Einstellungen und nicht von den DP-IDs abhängig) -
@mcu sagte in echarts - Anzeige in der VIS Views / Zeitachsen:
@mike2712 Nein?. Ich habe es aber noch nicht verstanden, was du damit erreichen willst.
Ich schreibe aber das Programm so um, so dass man nur noch ein eChart-DP benötigen würde, wenn man es möchte.
Das dauert aber noch....Hast du unterschiedliche "Typen" von eCharts?
Also eCharts die unterschiedliche Einstellungen (Darstellungs-Parameter, Kurvenarten roh,minmax usw.) haben? (nicht Zeit-Einstellungen und nicht von den DP-IDs abhängig)Ich möchte nicht so viele views haben und den echarts quasi, weiß nicht in der SPS/HMI Automatisierung nennt man das multiplexen. Das Script und die Idee von dir ist wirklich sehr gut und vereinfacht mein Vorhaben auch schon um einiges, denke das andere was ich möchte müsste vermutlich auch gehen, aber ich kenne mich im Bereich der Möglichkeiten in VIS was CSS und Scripte anbetrifft leider gar nicht aus.
Ich hatte mir gedacht zum Beispiel 2 Radio Button zu nehmen, der eine Button wird mit echartsDP und der andere mit dem range verschaltet.
Dann möchte ich zunächst nur eine view haben, d.h. mit dem TAG echartsDP soll auch direkt das richtige echart in dem view geladen werden.An dem Widget für echarts wird der Datenpunkt fest angegeben, an der Stelle wo im Screensshot echarts.o.Energy.Energy Verbr...... steht möchte ich quasi den ersten Datenpunkt der echartsDP eintragen.
Ja ich habe unterschiedliche Einstellungen etc., das wäre aber nicht schlimm wenn ich auf den richtigen echart variabel zugreifen könnte.
Hmm, irgendwie schwierig das zu erklären, hoffe es ist jetzt etwas verständlicher ? -
@mike2712 Also in meiner Version gäbe es nur noch einen eChartDP. Diesem würde man über das Programm quasi unterschiedliche Versionen (1DP, 5DPs usw. auswählbar) zuordnen., definiert in einem Array (Muss dann durch den User festgelegt werden). Dann mit einer anderen Auswahlbox die Zeitrange bestimmen. Und vielleicht mit einer weiteren Auswahlbox die Ausprägung / Anzeigestil ...
-> Nur noch eine View und evtl. drei AuswahlBoxen. -
@mcu sagte in echarts - Anzeige in der VIS Views / Zeitachsen:
@mike2712 Also in meiner Version gäbe es nur noch einen eChartDP. Diesem würde man über das Programm quasi unterschiedliche Versionen (1DP, 5DPs usw. auswählbar) zuordnen., definiert in einem Array (Muss dann durch den User festgelegt werden). Dann mit einer anderen Auswahlbox die Zeitrange bestimmen. Und vielleicht mit einer weiteren Auswahlbox die Ausprägung / Anzeigestil ...
-> Nur noch eine View und evtl. drei AuswahlBoxen.okay, richtig verstehe ich es nicht, in der view wird ja dann das echarts widget eingebunden, genau da ist das Problem, dieses Widget benötigt einen echarts DP, wenn ich an der Stelle wo in dem Widget der DP eingetragen wird Deine Variable anhängen könnte dann hätte ich alles was ich benötigen würde, ich denke das dies mit Scripting oder wie auch immer zu lösen sein müsste.
-
@mike2712 Da würde ja nur mein eChartDP drin stehen.
0_userdata.0.echarts.echartsDP
bzw. Der Inhalt von dem DP.
Alles andere wird über die AuswahlBoxen gesteuert.
Schick mir doch mal die Objektdaten von den Energy-eCharts. Dann kann ich, wenn ich dazu komme, schon mal vergleichen.-> Objekte -> Expertenmodus einschalten -> echart.0. -> Energy-Kurven werden angezeigt -> Beistift anklicken und den Inhalt als CodeTag </> posten. (und das mit allen Energy-Kurven)
Danke.
-
@mcu sagte in echarts - Anzeige in der VIS Views / Zeitachsen:
@mike2712 Da würde ja nur mein eChartDP drin stehen.
0_userdata.0.echarts.echartsDP
bzw. Der Inhalt von dem DP.
Alles andere wird über die AuswahlBoxen gesteuert.Ja genau so hatte ich mir das vorgestellt, aber genau das ist mein Problem, Dein eChartDP lässt sich an dieser Stelle nicht eintragen, ich komme nur auf die Original echarts DP, keine andere Auswahl an der Echart ID möglich, wenn ich jetzt dort schon auf Deine eChartDP verweisen könnte wäre mein Problem schon gelöst.
-
@mike2712 Dann mal mit Binding versuchen.
{0_userdata.0.echarts.echartsDP}
-
@mcu sagte in echarts - Anzeige in der VIS Views / Zeitachsen:
@mike2712 Dann mal mit Binding versuchen.
{"0_userdata.0.echarts.echartsDP"}
so in der Art hatte ich es auch schon im Forum gefunden, aber man kann nichts manuell eingeben, es gibt nur ein DropDown Menü in dem alle Original echarts DP gelistet werden.
Aber jetzt denke ich weißt Du wo genau mein Problem liegt, gibt es einen Trick da irgendwas zu machen?Bei anderen Widgets ist das in der Art und Weise möglich, an dem leider nicht.
-
@mike2712 Ich kenne keinen.
Schick mir bitte die Objektdaten (siehe oben, nur energy erstmal), dann schaue ich nächste Woche mal. -
@mcu sagte in echarts - Anzeige in der VIS Views / Zeitachsen:
@mike2712 Ich kenne keinen.
Schick mir bitte die Objektdaten (siehe oben, nur energy erstmal), dann schaue ich nächste Woche mal.welche Objektdaten?
Habe das Widget für echarts exportiert, meinst du dies?[{"tpl":"tplEchartsChart","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","echart_oid":"echarts.0.Energy.Energie Verbrauch aktuell","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,"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,"noChartBackground":false},"style":{"left":"0px","top":"0px","width":"1260px","height":"600px"},"widgetSet":"echarts"}]
Kann ich dort die Stelle manuell durch Deinen echarts DP ersetzen und dann importieren?
-
@mike2712 Nein, habe ich oben erklärt:
Objekte -> Expertenmodus einschalten -> echart.0. -> Energy-Kurven werden angezeigt -> Beistift anklicken und den Inhalt als CodeTag </> posten. (und das mit allen Energy-Kurven)Du kannst es versuchen:
"echart_oid":"{0_userdata.0.echarts.echartsDP}"
Dürfte aber nicht funktionieren?
-
@mcu
Hoffe das ist jetzt richtig, ich hab mal 4 aus den Energy Daten genommen, allgemein arbeite ich da noch dran, aber würde gerne zunächst versuchen die Darstellung in VIS so hinzubekommen wie oben beschrieben.
Kann man den das Widget nicht irgendwie anpassen so das man Deinen echartsDP dort angeben kann, das würde ja enorm an Arbeit sparen und wäre total flexibel.{ "common": { "name": "Energie Kosten letzte Monat" }, "native": { "url": "", "data": { "lines": [ { "name": "Gas-Kosten-gestern", "id": "0_userdata.0.Energie.Gas-Bezug.Kosten-gestern", "instance": "system.adapter.sql.0", "thickness": 2, "chartType": "steps", "aggregate": "onchange", "isBoolean": null, "symbolSize": 3, "validTime": "86400", "unit": "€", "color": "yellow", "max": "", "ignoreNull": "false", "offset": "0", "min": "", "afterComma": "2", "yaxe": "right" }, { "name": "Netz Bezug-Kosten-gestern", "id": "0_userdata.0.Energie.Netz-Bezug.Kosten-gestern", "instance": "system.adapter.sql.0", "thickness": 2, "chartType": "steps", "aggregate": "onchange", "symbolSize": 3, "validTime": "86400", "xaxe": "off", "unit": "€", "color": "red", "commonYAxis": "0", "ignoreNull": "false", "afterComma": "2", "fill": 0 }, { "name": "Netzeinspeisung-Kosten-gestern", "id": "0_userdata.0.Energie.Netz-Einspeisung.Kosten-gestern", "instance": "system.adapter.sql.0", "thickness": "2", "chartType": "steps", "aggregate": "onchange", "symbolSize": 3, "validTime": "86400", "xaxe": "off", "unit": "€", "color": "green", "commonYAxis": "0", "ignoreNull": "false", "afterComma": "2", "lineStyle": "solid", "hide": false, "fill": 0, "yaxe": "left", "min": "-2", "max": "2" }, { "name": "Kosten total [gestern]", "id": "0_userdata.0.Energie.Energie-Kosten.Betrag-gestern-total", "instance": "system.adapter.sql.0", "thickness": 2, "chartType": "steps", "aggregate": "onchange", "symbolSize": 3, "validTime": "86400", "xaxe": "off", "color": "blue", "unit": "€", "yaxe": "left", "min": "", "max": "", "yticks": "10", "shadowsize": "1", "fill": 0, "commonYAxis": "0", "ignoreNull": "false", "afterComma": "2" } ], "marks": [ { "color": "blue", "lineId": "3", "upperValueOrId": "3", "ol": "0", "lowerValueOrId": "", "text": "3 €", "textPosition": "l", "textOffset": "620" }, { "color": "white", "lineId": "2", "upperValueOrId": "0", "ol": "3", "text": "0 €", "textPosition": "l", "textOffset": "620" } ], "timeType": "relative", "relativeEnd": "today", "range": 10080, "aggregateType": "count", "aggregateSpan": 300, "legend": "nw", "hoverDetail": true, "zoom": true, "animation": 0, "live": "15", "ticks": "", "width": "100%", "height": "100%", "noBorder": "noborder", "window_bg": "black", "bg_custom": "black", "x_labels_color": "", "y_labels_color": "", "border_color": "", "grid_color": "", "grid_hideX": false, "grid_hideY": false, "border_width": "", "barColor": "", "barLabels": "topover", "barWidth": "", "barFontSize": "", "barFontColor": "", "title": "Energie Kosten letzten Monat ", "titlePos": "top:35;left:50", "titleColor": "white", "titleSize": "", "legColumns": "", "legBgOpacity": "", "legBg": "", "timeFormat": "", "export": true, "legendDirection": "vertical", "useComma": true, "noBackground": false, "legColor": "#fafaff", "legActual": true, "legFontSize": "", "hoverNoInterpolate": false } }, "type": "chart", "_id": "echarts.0.Energy.Energie Kosten letzte Monat", "acl": { "object": 1636, "owner": "system.user.admin", "ownerGroup": "system.group.administrator" }, "from": "system.adapter.admin.0", "user": "system.user.admin", "ts": 1669308624393 }
{ "common": { "name": "Energie Verbrauch letzte Monat" }, "native": { "url": "", "data": { "lines": [ { "name": "Gas Bezug [gestern]", "id": "0_userdata.0.Energie.Gas-Bezug.Energie-Tag-gestern", "instance": "system.adapter.sql.0", "thickness": 2, "chartType": "steps", "aggregate": "", "isBoolean": null, "symbolSize": 3, "validTime": "86400", "unit": "kWh", "color": "yellow", "max": "60", "ignoreNull": "false", "offset": "0", "min": "0", "afterComma": "1", "yaxe": "right", "xticks": "30" }, { "name": "Strom Bezug [gestern]", "id": "0_userdata.0.Energie.Netz-Bezug.Counter-Tag-gestern", "instance": "system.adapter.sql.0", "thickness": 2, "chartType": "steps", "aggregate": "", "symbolSize": 3, "validTime": "86400", "xaxe": "off", "unit": "kWh", "color": "red", "commonYAxis": "0", "ignoreNull": "false", "afterComma": "1", "fill": 0.3 }, { "name": "Strom Einspeisung [gestern]", "id": "0_userdata.0.Energie.Netz-Einspeisung.Counter-Tag-gestern", "instance": "system.adapter.sql.0", "thickness": 2, "chartType": "steps", "aggregate": "", "symbolSize": 3, "validTime": "86400", "xaxe": "off", "unit": "kWh", "color": "green", "commonYAxis": "0", "ignoreNull": "false", "afterComma": "1", "lineStyle": "solid" }, { "name": "Strom Erzeugung [gestern]", "id": "0_userdata.0.Energie.PV-Erzeugung.Counter-Tag-gestern", "instance": "system.adapter.sql.0", "thickness": 2, "chartType": "steps", "aggregate": "", "symbolSize": 3, "validTime": "86400", "xaxe": "off", "unit": "kWh", "color": "violet", "commonYAxis": "0", "ignoreNull": "false", "afterComma": "1", "fill": 0, "lineStyle": "dashed" }, { "name": "Kosten total [gestern]", "id": "0_userdata.0.Energie.Energie-Kosten.Betrag-gestern-total", "instance": "system.adapter.sql.0", "thickness": 2, "chartType": "steps", "aggregate": "", "symbolSize": 3, "validTime": "86400", "xaxe": "off", "color": "blue", "unit": "€", "yaxe": "left", "min": "0", "max": "", "yticks": "10", "shadowsize": "1", "fill": 0.3 }, { "name": "PV-Strom Eigenverbrauch [gestern]", "id": "0_userdata.0.Energie.PV-Eigenverbrauch.Counter-Tag-gestern", "instance": "system.adapter.sql.0", "thickness": 2, "chartType": "steps", "aggregate": "", "symbolSize": 3, "validTime": "86400", "xaxe": "off", "color": "#84c996", "unit": "kWh", "commonYAxis": "0", "afterComma": "1" }, { "name": "Strom Verbrauch [gestern]", "id": "0_userdata.0.Energie.Energie-Verbrauch.Counter-Tag-gestern", "instance": "system.adapter.sql.0", "thickness": 2, "chartType": "steps", "aggregate": "", "symbolSize": 3, "validTime": "86400", "xaxe": "off", "color": "white", "unit": "kWh", "ignoreNull": "false", "commonYAxis": "0", "afterComma": "1", "fill": 0, "shadowsize": "0" } ], "marks": [ { "color": "blue", "lineId": "4", "upperValueOrId": "3", "ol": "0", "text": "3 €", "textPosition": "l", "textOffset": "620" } ], "timeType": "relative", "relativeEnd": "today", "range": "1m", "aggregateType": "count", "aggregateSpan": 300, "legend": "nw", "hoverDetail": true, "zoom": true, "animation": 0, "live": "15", "ticks": "", "width": "100%", "height": "100%", "noBorder": "noborder", "window_bg": "black", "bg_custom": "black", "x_labels_color": "", "y_labels_color": "", "border_color": "", "grid_color": "", "grid_hideX": false, "grid_hideY": false, "border_width": "", "barColor": "", "barLabels": "topover", "barWidth": "", "barFontSize": "", "barFontColor": "", "title": "Energie Verbrauch letzte Monat", "titlePos": "top:35;left:50", "titleColor": "white", "titleSize": "", "legColumns": "", "legBgOpacity": "", "legBg": "", "timeFormat": "", "export": true, "legendDirection": "vertical", "useComma": true, "noBackground": false, "legColor": "#fafaff", "legActual": true, "legFontSize": "", "hoverNoInterpolate": false } }, "type": "chart", "_id": "echarts.0.Energy.Energie Verbrauch letzte Monat", "acl": { "object": 1636, "owner": "system.user.admin", "ownerGroup": "system.group.administrator" }, "from": "system.adapter.admin.0", "user": "system.user.admin", "ts": 1667330051815 }
{ "common": { "name": "Energie Zähler Total" }, "native": { "url": "", "data": { "lines": [ { "name": "Gas Counter-Total-gestern", "id": "0_userdata.0.Energie.Gas-Bezug.Counter-Total-gestern", "instance": "system.adapter.sql.0", "thickness": 2, "chartType": "steps", "aggregate": "onchange", "isBoolean": null, "symbolSize": 3, "validTime": 35, "unit": "m³", "min": "14300", "max": "14400", "yaxe": "off" }, { "name": "Netz Bezug Counter-Total-gestern", "id": "0_userdata.0.Energie.Netz-Bezug.Counter-Total-gestern", "instance": "system.adapter.sql.0", "thickness": 2, "chartType": "steps", "aggregate": "onchange", "symbolSize": 3, "validTime": 35, "xaxe": "off", "unit": "kWh", "yaxe": "off" }, { "name": "Netz Einspeisung Counter-Total-gestern", "id": "0_userdata.0.Energie.Netz-Einspeisung.Counter-Total-gestern", "instance": "system.adapter.sql.0", "thickness": 2, "chartType": "steps", "aggregate": "onchange", "symbolSize": 3, "validTime": 35, "xaxe": "off", "unit": "kWh", "yaxe": "off", "min": "8050", "max": "8200" } ], "marks": [], "timeType": "relative", "relativeEnd": "30minutes", "range": "20160", "aggregateType": "count", "aggregateSpan": 300, "legend": "ne", "hoverDetail": true, "zoom": true, "animation": 0, "live": "15", "ticks": "", "width": "100%", "height": "100%", "noBorder": "noborder", "window_bg": "", "bg_custom": "", "x_labels_color": "", "y_labels_color": "", "border_color": "", "grid_color": "", "grid_hideX": false, "grid_hideY": false, "border_width": "", "barColor": "", "barLabels": "topover", "barWidth": "", "barFontSize": "", "barFontColor": "", "title": "", "titlePos": "", "titleColor": "", "titleSize": "", "legColumns": "", "legBgOpacity": "", "legBg": "", "timeFormat": "", "export": true, "legendDirection": "", "useComma": false } }, "type": "chart", "_id": "echarts.0.Energy.Energie Zähler Total", "acl": { "object": 1636, "owner": "system.user.admin", "ownerGroup": "system.group.administrator" }, "from": "system.adapter.admin.0", "user": "system.user.admin", "ts": 1667302386875 }
{ "common": { "name": "Energie Differenz - nicht erfasst - Grundlast" }, "native": { "url": "", "data": { "lines": [ { "name": "DifferenzLeistung", "id": "0_userdata.0.Energie.DifferenzLeistung", "instance": "system.adapter.sql.0", "thickness": 2, "chartType": "steps", "aggregate": "onchange", "isBoolean": null, "symbolSize": 3, "validTime": 35, "min": "-750", "max": "750", "unit": "W" }, { "name": "DifferenzLeistung", "id": "0_userdata.0.Energie.DifferenzLeistung", "instance": "system.adapter.sql.0", "thickness": "4", "chartType": "line", "aggregate": "percentile", "symbolSize": 3, "validTime": "", "xaxe": "off", "commonYAxis": "0", "integralUnit": 60, "integralInterpolation": "none", "percentile": 100 } ], "marks": [], "timeType": "relative", "relativeEnd": "now", "range": "120", "aggregateType": "count", "aggregateSpan": 300, "legend": "ne", "hoverDetail": true, "zoom": true, "animation": 0, "live": "15", "ticks": "", "width": "100%", "height": "100%", "noBorder": "noborder", "window_bg": "", "bg_custom": "", "x_labels_color": "", "y_labels_color": "", "border_color": "", "grid_color": "", "grid_hideX": false, "grid_hideY": false, "border_width": "", "barColor": "", "barLabels": "topover", "barWidth": "", "barFontSize": "", "barFontColor": "", "title": "Energie Differenz - nicht erfasst - Grundlast", "titlePos": "top:35;left:50", "titleColor": "", "titleSize": "", "legColumns": "", "legBgOpacity": "", "legBg": "", "timeFormat": "", "export": true, "legendDirection": "", "useComma": false } }, "type": "chart", "_id": "echarts.0.Energy.Energie Differenz - nicht erfasst - Grundlast", "acl": { "object": 1636, "owner": "system.user.admin", "ownerGroup": "system.group.administrator" }, "from": "system.adapter.admin.0", "user": "system.user.admin", "ts": 1666629779045 }
-
@mike2712 Also ich bin kein VIS -Experte. Kann Dir da nicht weiterhelfen.
-
@mcu sagte in echarts - Anzeige in der VIS Views / Zeitachsen:
@mike2712 Also ich bin kein VIS -Experte. Kann Dir da nicht weiterhelfen.
schade, aber genau das ist das was ich erreichen wollte, das mit dem einfachen manipulieren klappt leider nicht.