[Gelöst]Chart mit Textwerten

fume · 25 August 2016, 09:17:58

Hallo

Ich versuche schon seit einiger Zeit einen Fensterstatus in einen Chart darzustellen. Laut Wiki solle dies mit

data-yticks='[[0,"open"],[1,"closed"]]'
funktionieren.

Hier mein gesamter Chart:

	<div    data-type="chart"
		data-logdevice='["myDbLog"]'
		data-logfile='["HISTORY"]'
		data-columnspec='["wz_fensterstatus:state"]'
		data-style='["ftui l2fill"]'
		data-ptype='["steps"]'
        	data-legend='["Wohnzimmerfenster"]'
		data-ytext="Fensterstatus"
		data-height="175"
		data-yticks='[[0,"open"],[1,"closed"]]'
		data-nofulldays="true"
		data-daysago_start="1"
		data-daysago_end="-1"
		data-cursorgroup="1"
		data-scrollgroup="1"
	</div>

Beim Versuch die Seite zu öffnen stürzt mein Chromium Browser ab, bei Firefox wird nichts angezeigt.

eki · 29 August 2016, 13:58:59

Sieht bei mir mit Deinen Einstellungen (nur logdevice und columnspec geändert) gut aus. Welche Version von tabletUI und widget_chart.js benutzt Du denn?

fume · 31 August 2016, 10:38:12

Erstmal danke fürs Testen.

Also grundsätzlich verwende ich die Standard Installation aktualisiert mit
"update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt"

Heute habe ich mir zu Testzwecken auch noch die 2.2 Version Installiert
"update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/eval/controls_fhemtabletui_eval.txt"

Aber auch hier das selbe Ergebnis, die debugausgabe vin Firefox ist.

Code Auswählen

Synchrone XMLHttpRequests am Haupt-Thread sollte nicht mehr verwendet werden, weil es nachteilige Effekte für das Erlebnis der Endbenutzer hat. Für weitere Hilfe siehe http://xhr.spec.whatwg.org/jquery.min.js:4:25327
Unerwarteter Wert NaNpx beim Parsen des Attributs width.jquery.min.js:3:19318
Unerwarteter Wert NaNpx beim Parsen des Attributs x1.jquery.min.js:4:10506
Unerwarteter Wert NaNpx beim Parsen des Attributs x2.jquery.min.js:4:10506
Unerwarteter Wert NaNpx beim Parsen des Attributs y2.jquery.min.js:4:10506
Unerwarteter Wert NaNpx beim Parsen des Attributs y1.jquery.min.js:4:10506
Unerwarteter Wert NaNpx beim Parsen des Attributs x2.jquery.min.js:4:10506
Unerwarteter Wert NaNpx beim Parsen des Attributs y2.jquery.min.js:4:10506
Unerwarteter Wert NaN% beim Parsen des Attributs x.jquery.min.js:4:10506
Unerwarteter Wert NaN beim Parsen des Attributs y.jquery.min.js:4:10506
Unerwarteter Wert rotate(-90 NaN,NaN) beim Parsen des Attributs transform.jquery.min.js:4:10506
Unerwarteter Wert NaN beim Parsen des Attributs y.jquery.min.js:4:10506
Unerwarteter Wert NaNpx beim Parsen des Attributs x.jquery.min.js:4:10506
Unerwarteter Wert NaN beim Parsen des Attributs y.jquery.min.js:4:10506
Unerwarteter Wert NaNpx beim Parsen des Attributs x1.jquery.min.js:4:10506
Unerwarteter Wert NaNpx beim Parsen des Attributs y1.jquery.min.js:4:10506
Unerwarteter Wert NaNpx beim Parsen des Attributs x2.jquery.min.js:4:10506
Unerwarteter Wert NaNpx beim Parsen des Attributs y2.jquery.min.js:4:10506
Unerwarteter Wert NaNpx beim Parsen des Attributs x.jquery.min.js:4:10506
Unerwarteter Wert NaN beim Parsen des Attributs y.jquery.min.js:4:10506
Unerwarteter Wert NaNpx beim Parsen des Attributs x1.jquery.min.js:4:10506
Unerwarteter Wert NaNpx beim Parsen des Attributs y1.jquery.min.js:4:10506
Unerwarteter Wert NaNpx beim Parsen des Attributs x2.jquery.min.js:4:10506
Unerwarteter Wert NaNpx beim Parsen des Attributs y2.jquery.min.js:4:10506
Unerwarteter Wert NaNpx beim Parsen des Attributs x.jquery.min.js:4:10506
Unerwarteter Wert NaN beim Parsen des Attributs y.jquery.min.js:4:10506
Unerwarteter Wert -Infinity% beim Parsen des Attributs height.jquery.min.js:4:10506
Unerwarteter Wert Infinity% beim Parsen des Attributs y.

Wenn ich die Zahlen erhöhe "data-yticks='[[1,"closed"],[2,"open"]]'" stürzt der Browser nicht mehr ab, aber trotzdem habe nur einen leeren Chart.

eki · 31 August 2016, 13:45:40

kannst Du das Ganze (Version 2.2) mal laufen lassen und dabei den Debug Parameter

<meta name="debug" content="1"> 

auf 1 setzen und dann die Ausgabe der Konsole hier posten.

fume · 31 August 2016, 19:06:33

Hier die Ausgabe der Konsole:

Code Auswählen

Plugin dir: /fhem/tablet_eval/js
fhem-tablet-ui.js:970 Filename: charts1.html
fhem-tablet-ui.js:970 FHEM dir: /fhem/
fhem-tablet-ui.js:970 start shortpoll in (ms):30000
fhem-tablet-ui.js:970 Load widget : pagebutton
fhem-tablet-ui.js:970 Load widget : chart
fhem-tablet-ui.js:970 Loaded plugin: famultibutton
fhem-tablet-ui.js:970 Loaded plugin: pagebutton
widget_chart.js:15 0 init_attr(elem) { // initialize all attributes called from widget init function
	var data = elem.data();
	elem.data('minvalue_sec', typeof elem.data('minvalue_sec') != 'undefined' ? elem.da... "Attributes initialized with 1-1"
widget_chart.js:15 1 (index) {
		var elem = $(this);

		base.init_attr(elem);
		base.init_ui(elem);
		
		elem.data.defaultHeight = elem.hasClass('fullsize') ? elem[0].getBoundingClientRect().height*0.85 : '... "Module initialized with width: 93% height: 290"
widget_chart.js:15 1 update(dev,par) {
	var base = this;
	var deviceElements= this.elements.filter("div[data-logdevice]");
	var prev_width = [];
	prev_width[$(base).data('instance')] = $(base).find('svg.bases... "Update triggered with: myDbLogSTATE"
fhem-tablet-ui.js:970 Loaded plugin: chart
fhem-tablet-ui.js:970 initWidgets - Done
fhem-tablet-ui.js:314 initPage: 216.634ms
fhem-tablet-ui.js:970 start shortpoll in (ms):500
jquery.min.js:4 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
widget_chart.js:15 1 (elem,type,swoffset) { // main function for generation of all HTML code and dynamics for graph called whenever thigs change (e.g. data update, shift, scale, ...)
		(elem) ? theObj=elem : the... "Got 0 points for Graph 1"
widget_chart.js:15 1 (elem,type,swoffset) { // main function for generation of all HTML code and dynamics for graph called whenever thigs change (e.g. data update, shift, scale, ...)
		(elem) ? theObj=elem : the... "Chart finished, Parameters: {
  "type": "chart",
  "scrollgroup": 1,
  "cursorgroup": 1,
  "daysago_end": -1,
  "daysago_start": 1,
  "nofulldays": true,
  "maxvalue": 2,
  "minvalue": 0,
  "yticks": [
    [
      0,
      "closed"
    ],
    [
      1,
      "open"
    ]
  ],
  "height": 290,
  "ptype": [
    "steps"
  ],
  "style": [
    "ftui l2fill"
  ],
  "columnspec": [
    "wz_fensterstatus:state"
  ],
  "logfile": [
    "HISTORY"
  ],
  "logdevice": [
    "myDbLog"
  ],
  "minvalue_sec": 10,
  "maxvalue_sec": 30,
  "timeformat": "",
  "xticks": "auto",
  "yticks_sec": "auto",
  "yunit": "",
  "yunit_sec": "",
  "ytext": "",
  "ytext_sec": "",
  "uaxis": "primary",
  "get": "STATE",
  "graphWidth": 96.94402063353677,
  "graphHeight": 87.24137931034483,
  "textWidth": 30,
  "textHeight": 11,
  "bottomOffset": 11,
  "topOffset": 26,
  "crosshair": false,
  "crs_inactive": false,
  "showlegend": false,
  "graphsshown": [
    true
  ],
  "device": "myDbLog",
  "xclassifier": "",
  "days_start": 1,
  "days_end": -1,
  "instance": 1,
  "noticks": false,
  "DDD": {
    "has3D": true,
    "prefix": "-webkit-",
    "dir": {
      "x": 1,
      "y": 1
    },
    "Active": false,
    "Setting": [
      "0",
      "0",
      "0"
    ],
    "Space": 15,
    "Width": 10,
    "Distance": 25,
    "String": {
      "Rot": "-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)",
      "Scale": "translate(0px, 0px) scale(1, 1)"
    },
    "scaleX": 1,
    "scaleY": 1,
    "shiftY": 0,
    "shiftX": 0
  },
  "popup": false,
  "xrange": 2880,
  "mindate": "2016-08-30_00:00:00",
  "nGraphs": 1,
  "logProxy": false,
  "nofilldown": [
    false
  ],
  "textWidth_prim": 18.546875,
  "textWidth_sec": 13,
  "dateWidth": 27.796875,
  "xscale": 2880,
  "basewidth": 1032.3,
  "baseheight": 290,
  "xStr": "18.546875px",
  "xStrTO": "18.546875px",
  "yStr": "1000.753125px",
  "yStrTO": "253px",
  "projectionDist": 5000,
  "defaultHeight": "",
  "defaultWidth": "93%",
  "chartArea": {
    "left": 183.84375,
    "top": 25,
    "width": 1032.3,
    "height": 290
  },
  "graphArea": {
    "left": 202.390625,
    "top": 51,
    "width": 1000.753125,
    "height": 253
  },
  "xrangeW": null,
  "diffY_prim": 2,
  "min_prim": 0,
  "scaleY": 364.0458279857982,
  "shiftY": 0,
  "min_save": 0,
  "max_save": 728.0916559715964,
  "diffY_sec": 20,
  "min_sec": 10,
  "scaleY_sec": 36.404582798579824,
  "shiftY_sec": 364.04582798579827,
  "min_save_sec": 0,
  "max_save_sec": 728.0916559715965,
  "pointsarray": [
    []
  ],
  "pointsarrayCursor": [
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    []
  ],
  "done": true
}"
fhem-tablet-ui.js:970 start shortpoll
fhem-tablet-ui.js:970 start shortpoll in (ms):30000
fhem-tablet-ui.js:370 get jsonlist2: 16.511ms
fhem-tablet-ui.js:970 shortPoll - Done
fhem-tablet-ui.js:438 read jsonlist2: 8.961ms
fhem-tablet-ui.js:970 Longpoll started
fhem-tablet-ui.js:970 start shortpoll in (ms):900000
fhem-tablet-ui.js:791 --------- start healthCheck --------------
fhem-tablet-ui.js:792 now: Wed Aug 31 2016 18:56:38 GMT+0200 (CEST)
fhem-tablet-ui.js:793 FTUI version: 2.2.3
fhem-tablet-ui.js:794 Longpoll: true
fhem-tablet-ui.js:795 Longpoll objects there: true
fhem-tablet-ui.js:796 Longpoll curent line: 358
fhem-tablet-ui.js:797 Longpoll last event before: 17045 Tag(e) 16 Stunde(n) 57 Minute(n) 39 Sekunde(n)
fhem-tablet-ui.js:798 Shortpoll interval: 900
fhem-tablet-ui.js:799 Shortpoll last run before: 1 Minute(n) 59 Sekunde(n)
fhem-tablet-ui.js:800 FHEM dev/par count: 14
fhem-tablet-ui.js:801 FTUI known devices count: 38
fhem-tablet-ui.js:802 Page length: 23864
fhem-tablet-ui.js:803 Widgets count: 8
fhem-tablet-ui.js:804 --------- end healthCheck ---------------

eki · 01 September 2016, 10:08:20

sieht so aus, als ob es in dem angegebenen Zeitraum und bei dem angegebenen Logdevice etc. keine validen Punkte gibt (sollte natürlich nicht zum Absturz führen, werde ich mal nachschauen, erklärt aber warum das Chart leer ist). Was passiert denn, wenn Du den Eintrag mit data-yticks mal weglässt?
Leider habe ich bei mir keine logdatenbank sondern nutze immer noch Files, daher kann ich das schwer nachvollziehen. Kannst Du mal mit Einstellungen probieren, bei denen valide Punkte gefunden werden?

fume · 01 September 2016, 12:23:02

Sorry, ich habe einen Fehler beim Test der Version 2.2 gemacht und meine **.html einfach vom Ordner "tablet" zum Ordner "tablet_eval" kopiert ohne die
<script type></script> im pfad anzupassen. Da ich absolute Pfadangaben habe, wurden natürlich nicht die 2.2 scripts ausgeführt.

Nach änderung stürzt der Browser jetzt nicht mehr ab, und ich bekomme eine leere Tabelle angezeigt. In der Datenbank befinden sich aber die werte, das habe ich mit
"SELECT * FROM `history` WHERE `DEVICE` = "wz_fensterstatus"" überprüft. (Die VALUES sind closed und open).

Ich hab das selbe auch schon mit anderen devices (Lichtschalter mit on off) getestet, auch hier anscheinend keine Werte laut konsolenausgabe.

Alle anderen Charts mit numerischen Werten funktionieren einwandfrei.

fume · 01 September 2016, 13:18:09

Wenn ich data-yticks weglasse wird laut Firefox Entwicklermodus diese URL geladen, die ähnlich auch bei anderen Charts vorhanden ist.

http://IP-adresse:8083/fhem/fhem/?cmd=get+myDbLog+HISTORY+-+2016-08-31_00%3A00%3A00+2016-09-02_00%3A00%3A00+wz_fensterstatus%3Astate&XHR=1&_=1472727477199

mit der ausgabe:

Code Auswählen


2016-09-01_11:36:28 closed
2016-09-01_12:13:11 open
2016-09-01_12:13:17 closed
2016-09-01_12:36:59 closed
2016-09-01_12:59:40 open
2016-09-01_13:01:06 closed
#wz_fensterstatus:state:::

Edit: Wird auch mit data-yticks geladen, und man sieht dass auch Daten vorhanden sind.

eki · 01 September 2016, 15:10:51

Jetzt wird das Ganze klarer.

Die Möglichkeit yticks explizit aus Arrays zu nehmen, die Du verwendest, ist (bisher) dafür gedacht, Zahlen in den Logfiles nicht als Zahlen im Chart zu markieren, sondern mit vom Nutzer angegebenen Labels zu versehen. Es müssen im Logfile aber immer noch Zahlen stehen. In Deinem Fall stehen ja aber gar keine Zahlen im Log sondern Texte (ich weiß, dass das im SVG Plot geht, aber im Chart habe ich das bisher noch nicht eingebaut). Sollte aber möglich sein, wird aber sicher ein paar Tage dauern, ich mach mir mal Gedanken darüber.

fume · 01 September 2016, 15:48:44

Ok, dann habe ich wohl was falsch Verstanden.

Es würde mich (und vielleicht auch andere) freuen wenn es wenn es irgendwann möglich währe einen Textwert
In eine Chart darzustellen.

Danke für die Hilfe.
Fume

eki · 01 September 2016, 17:37:22

Ich habe noch mal nachgedacht. Auf Basis von Files (nur das kann ich testen) müsste das Ganze doch funktionieren. Man kann nämlich beim Definieren der Columnspec auch Umwandlungen angeben.
Mit Files würde das dann in etwa so aussehen:

Code Auswählen

"4:OG_GZ_RTth.battery:1:$fld[3]=~\\x22low\\x22?0:1"

Die Erklärung:
die 4 Sagt, dass das vierte Feld (duch spaces getrennt) die eigentliche Info enthält
"OG....battery" gibt den Filter an, der aus allen Zeilen die entscheidenden ausfiltert
die 1 gibt den Default Wert an, falls nichts gefunden wird (weil z.B. im gegebenen Zeitraum keine Logs vorliegen)
jetzt kommt der interessante Teil. Man kann über $fld auf alle Daten einer Zeile als Feld zugreifen und etwas damit machen. In unserem fall wäre $fld[3] also der eigentlich gefundene Logwert (3 deshalb weil bei dem array das Ganze bei 0 anfängt. 3 bei $fld enspricht also der 4 am Anfang). Wir nehmen also den Logwert und machen eine perl regexp die im Klartext so aussieht '=~"low"?0:1" (da wir die " und ' nicht beliebig schachteln können, müssen wir das " durch \\x22 ersetzen (also das ASCII Zeichen das dem Hexwert 22 entspricht)). Diese Regexp macht also folgendes wenn der gefundene Wert "low" ist, dann wird 0 ausgegeben ansonsten 1. Damit hat das Chart Widget wieder Zahlen kann darstellen.

Du kannst mal probieren ob bei Dir eine Columnspec der Form:

Code Auswählen

"wz_fensterstatus:state:0:$fld[3]=~\\x22open\\x22?0:1"

zum Ziel führt (wie gesagt, ich bin mir nicht so ganz sicher wie das mit dblog geht).

fume · 02 September 2016, 15:58:24

Danke, das war genau der Dankanstoss den ich brauchte.

Code Auswählen

"wz_fensterstatus:state:0::$val=($val=~\\x22open\\x22?1:0)"

ist die lösung. Ist eigentlich das gleiche wie in SVG_Plot nur die """ als ASCII Code.

So hier nochmal für alle mein ganzer Chart:

Code Auswählen

	<div    data-type="chart"
		data-logdevice='["myDbLog"]'
		data-logfile='["HISTORY"]'
		data-columnspec='["wz_fensterstatus:state:0::$val=($val=~\\x22open\\x22?1:0)"]'
		data-style='["ftui l4fill"]'
		data-ptype='["steps"]'
		data-height="290"
		data-yticks='[[0,"closed"],[1,"open"]]'
		data-minvalue="0"
		data-maxvalue="1.1"
		data-nofulldays="true"
		data-daysago_start="1"
		data-daysago_end="-1"
		data-cursorgroup="1"
		data-scrollgroup="1"
	</div>