FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: ToM_ToM am 02 September 2017, 20:45:36

Titel: Chart Widget - Kuchen/Torten - Diagramm?
Beitrag von: ToM_ToM am 02 September 2017, 20:45:36
Hallo Zusammen,

hat von euch schon jemand das Tortendiagramm hinbekommen?
Ich habe es nach Wiki-Anleitung versucht, aber irgendwie wird mir nichts angezeigt.



<div class="normal noaxes nobuttons"
data-type="chart"
data-logdevice='["logdb"]'
data-logfile="CURRENT"
data-columnspec='[
"Func:logProxy_values2PieChart(\"MediaCenter_WinConnect\",\"drive_E_Space_AvailableFree_Prct\",0, ReadingsVal(\"MediaCenter_WinConnect\",\"drive_E_Space_AvailableFree_Prct\",0),5,0",\"first\"),
"Func:logProxy_values2PieChart(\"MediaCenter_WinConnect\",\"drive_E_Space_Used_Prct\",61, ReadingsVal(\"MediaCenter_WinConnect\",\"drive_E_Space_Used_Prct\",0),5,0",\"second\")
]'
data-style='["ftui l0fill","ftui l1fill"]'
data-ptype='["lines"]'
data-uaxis='["primary"]'
data-legend='["First","Second"]'
data-legendpos='["left","top"]'
data-yunit=""
data-height="200"
data-width="300"
data-ddd='["-40","0","0"]'
data-dddspace='["-10"]'
data-dddwidth='["10"]'
data-showlegend="true"
data-legend_horiz="true"
data-xticks="auto">
</div>


VG, Thomas
Titel: Antw:Chart Widget - Kuchen/Torten - Diagramm?
Beitrag von: eki am 05 September 2017, 12:34:41
Der Kenner "Func" im data-columnspec klappt nur, wenn Du das Ganze über LogProxy machst. Also ein LogProxy Device anlegen, und als data-logfile dessen namen setzen.
Titel: Antw:Chart Widget - Kuchen/Torten - Diagramm?
Beitrag von: ToM_ToM am 26 September 2017, 18:40:02
Hey eki,

ich habe es jetzt soweit angepasst und aufs Simpelste runterkekürzt, aber es wird mir einfach kein Kreisdiagramm angezeigt.
Lediglich der Diagrammhintergrund ist zu sehen.

<div class="normal noaxes nobuttons"
data-type="chart"
data-logdevice='["myLogProxy"]'
data-logfile="current"
data-columnspec='[
"Func:logProxy_values2PieChart(\"MediaCenter_WinConnect\",\"drive_E_Space_AvailableFree_Prct\",0, 15, 5, 0,\"first\")",
"Func:logProxy_values2PieChart(\"MediaCenter_WinConnect\",\"drive_E_Space_Used_Prct\",61, 20, 5, 0,\"second\")"
]'
data-style='["ftui l0fill","ftui l1fill"]'
data-ptype='["lines"]'
data-uaxis='["primary"]'
data-legend='["First","Second"]'
data-legendpos='["left","top"]'
data-yunit=""
data-height="200"
data-width="300"
data-ddd='["-40","0","0"]'
data-dddspace='["-10"]'
data-dddwidth='["10"]'
data-showlegend="true"
data-legend_horiz="true"
data-xticks="auto">
</div>


Hast du noch eine Idee?

VG, Thomas
Titel: Antw:Chart Widget - Kuchen/Torten - Diagramm?
Beitrag von: eki am 27 September 2017, 08:55:27
2 Probleme sehe ich:

1. die Columnspec darf keine Leerzeichen enthalten (ich weiß, das ist eine harte Einschränkung, aber das hab ich nicht in der Hand, hat was mit Javascript zu tun)
2. Du hast einen Parameter zu viel in Deiner Liste. Die Funktion logProxy_values2PieChart bekommt typischerweise die folgenden Parameter:
Device, Reading welches die Größe des Kuchenstücks vorgibt, Startwinkel, Winkelinkrement zum Zeichnen, Radius des innerern Kreises (normiert von 0 bis 1) und der Text der drangeschrieben werden soll. Bei Dir ist irgendwie ein Wert zu viel, das führt zum Fehler in FHEM und somit bekommt das chart widget keine Werte und zeichnet ein leeres Diagramm

Mit Folgender Spec hat es bei mir erst mal funktioniert:


<div class="normal noaxes nobuttons"
data-type="chart"
data-logdevice='["lp"]'
data-logfile="CURRENT"
data-columnspec='[
"Func:logProxy_values2PieChart(\"MediaCenter_WinConnect\",\"drive_E_Space_AvailableFree_Prct\",0,5,0,\"first\")",
"Func:logProxy_values2PieChart(\"MediaCenter_WinConnect\",\"drive_E_Space_Used_Prct\",61,5,0,\"second\")"
]'
data-style='["ftui l0fill","ftui l1fill"]'
data-ptype='["lines"]'
data-uaxis='["primary"]'
data-legend='["First","Second"]'
data-legendpos='["left","top"]'
data-yunit=""
data-height="200"
data-width="300"
data-ddd='["-40","0","0"]'
data-dddspace='["-10"]'
data-dddwidth='["10"]'
data-showlegend="true"
data-legend_horiz="true"
data-xticks="auto">
</div>
Titel: Antw:Chart Widget - Kuchen/Torten - Diagramm?
Beitrag von: ToM_ToM am 27 September 2017, 10:51:37
Ach das mit den Leerzeichen war ein guter Hinweis. Jetzt wird mir endlich etwas angezeigt. :)

Vielen Dank!
Titel: Antw:Chart Widget - Kuchen/Torten - Diagramm?
Beitrag von: ToM_ToM am 14 Oktober 2017, 14:25:03
Hey eki,

gibt es eine Möglichkeit, statt der Prozentwerte, andere Werte anzeigen zu lassen? Ich würde gernen den belegten sowie freien Speicherplatz in GB statt Prozent anzeigen lassen.
Auch kämpfe ich noch damit, den Kreis kleiner anzeigen zu lassen, so dass die Legende nicht vom Kreis überdeckt wird.
Könnte man auch die Schriftfarbe der Werte im Kreis anpassen?

Vielen Dank! :)

VG, Thomas
Titel: Antw:Chart Widget - Kuchen/Torten - Diagramm?
Beitrag von: eki am 16 Oktober 2017, 10:36:57
Bezüglich der Legende:
Es gibt die Möglichkeit die Legende außerhalb des eingentlichen Plots zu positionieren (siehe data-legendpos). Mit
data-legendpos='["before","top"]' wird die Legende z.B. links außerhalb des eigentlichen Plots platziert.

Bezüglich der Beschriftung:
Letztendlich findet das mehr oder weniger alles in der Funktion "logProxy_values2PieChart($$$$;$$)" statt. Dort kann man prizipiell auch Änderungen machen.
Wenn Du die Funktion im 99_myUtils.pm folgendermaßen änderst:

sub logProxy_values2PieChart($$$$;$$$) {
my ($device, $reading, $angle_start, $angle_dif, $inner_rad, $show_text, $text_displayed) = @_;
Log3 undef, 1, "$device, $reading, $angle_start, $angle_dif, $inner_rad, $show_text, $text_displayed\n";

use constant PI => 4 * atan2(1,1);

my $value=ReadingsVal($device,$reading,0);

my $angle_delta = $value/100*360;
$angle_start = $angle_start/100*360;

my $rad=10;
my $irad=0;
if ($inner_rad) {
$irad = $rad*$inner_rad;
}
my $angle=$angle_start/360*2.0*PI;
my $x=$irad*sin($angle);
my $y=$irad*cos($angle);
my $ret .= ";p ".$x." ".$y."\n"; # add segment at angle $angle

for (my $i=$angle_start; $i<=$angle_start+$angle_delta; $i+=$angle_dif) {
$angle = $i/360*2.0*PI;
$x = $rad*sin($angle);
$y = $rad*cos($angle);
$ret .= ";p ".$x." ".$y."\n"; # add segment at angle $angle
}

$angle = ($angle_start+$angle_delta)/360*2.0*PI; # add last segment
$ret .= ";p ".$rad*sin($angle)." ".$rad*cos($angle)."\n";

if ($inner_rad) {
for (my $i=$angle_start; $i<$angle_start+$angle_delta; $i+=$angle_dif) {
$angle = ($angle_start+$angle_start+$angle_delta-$i)/360*2.0*PI;
$x = $irad*sin($angle);
$y = $irad*cos($angle);
$ret .= ";p ".$x." ".$y."\n"; # add segment at angle $angle
}
}

$angle = ($angle_start)/360*2.0*PI; # add last segment
$ret .= ";p ".$irad*sin($angle)." ".$irad*cos($angle)."\n";

if ($show_text) { # show text values
$x = ($rad+$irad)/2*sin((2*$angle_start+$angle_delta)/2/360*2.0*PI);
$y = ($rad+$irad)/2*cos((2*$angle_start+$angle_delta)/2/360*2.0*PI);

if ($text_displayed) {
my @disptexts = split(" ",$text_displayed);

$ret .= ";t ".$x." ".$y." middle ".$show_text.":";
foreach(@disptexts) {$ret .= $_;}
$ret .= "\n";
}
else {
$ret .= ";t ".$x." ".$y." middle ".$show_text.":".$value."%\n";
}
}

return($ret);
}


Kannst Du den Text aus einem anderen Reading holen. Die Columnspec sollte dann so ähnlich aussehen:
"Func:logProxy_values2PieChart(\"dPer1\",\"state\",ReadingsVal(\"dPer4\",\"state\",0)+ReadingsVal(\"dPer3\",\"state\",0),5,0.5,\"first\",ReadingsVal(\"dPer3\",\"text\",0))" also einen zusätzlichen Parameter im Aufruf am Ende enthalten, der per ReadingsVal in diesem Beispiel  das Readin 'text' aus dem Device 'dPer3' ausliest
Titel: Antw:Chart Widget - Kuchen/Torten - Diagramm?
Beitrag von: ToM_ToM am 16 Oktober 2017, 10:49:03
Ah okay, super.
Vielen Dank. Das werde ich dann gleich mal so ausprobieren.

VG, Thomas