Chart Widget - Kuchen/Torten - Diagramm?

[ToM_ToM]

Hallo Zusammen,

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

Code Auswählen Erweitern


<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

[eki]

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.

[ToM_ToM]

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.

Code Auswählen Erweitern

<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

[eki]

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:

Code Auswählen Erweitern


<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>


[ToM_ToM]

Ach das mit den Leerzeichen war ein guter Hinweis. Jetzt wird mir endlich etwas angezeigt.

Vielen Dank!

[ToM_ToM]

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

[eki]

Bezüglich der Legende:
Es gibt die Möglichkeit die Legende außerhalb des eingentlichen Plots zu positionieren (siehe data-legendpos). Mit

Code Auswählen Erweitern

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:

Code Auswählen Erweitern


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:

Code Auswählen Erweitern

"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

[ToM_ToM]

Ah okay, super.
Vielen Dank. Das werde ich dann gleich mal so ausprobieren.

VG, Thomas