plot.period - Darstellung übereinander möglich?

[ralf9000]

Hallo Wolfram wvhn ,

ich bekomme es es nicht hin, das zerreist mir die ganze Grafik, wenn ich es mache:

Das setzt Du mit einem Komma hinter die geschlossene eckige Klammer der yAxis. Beispiel für die 4. Serie:

Wenn ich das tue, sieht es bei mir in den Optionen so aus:

{ yAxis: [ { useHTML: true, tickPositions: [ 300, 400, 500, 600, 700, 800 ] }, { useHTML: true, tickPositions: [ 20, 30, 40, 50, 60, 70 ] }, {offset:0, visible: false},  {offset:0, visible: false}, {offset:0, visible: false}, {offset:0, visible: false} ], series: [{},{showInLegend: false},{},{},{},{},{},{},{}], legend: { useHTML: true, verticalAlign: 'bottom', y: -55 } }) }}​

Aber das zerreist mir die Grafik:

Screenshot 2025-05-22 131937.jpg

Die letzten Datenreihen in der Liste sind weg (sollten oben erscheinen), und die Legende hat jetzt generische Bezeichnungen. Werde mal damit weiterprobieren, aber echt schwer ....

Danke und Grüße,

Ralf

[ralf9000]

Ich glaub ich habs gefunden, die geschweiften Klammern dürfen nicht leer bleiben. Wenn man

{ yAxis: [ { useHTML: true, tickPositions: [ 300, 400, 500, 600, 700, 800 ] }, { useHTML: true, tickPositions: [ 20, 30, 40, 50, 60, 70 ] }, {offset:0, visible: false},  {offset:0, visible: false}, {offset:0, visible: false}, {offset:0, visible: false} ], series: [{showInLegend: true},{showInLegend: false},{showInLegend: true},{showInLegend: true},{showInLegend: false},{showInLegend: false},{showInLegend: true}], legend: { useHTML: true, verticalAlign: 'bottom', y: -55 } }) }}​

hat, klappt es (die blöde Datenreihenbezeichnung "Stufe" habe ich jetzt auch dort eliminiert):

Screenshot 2025-05-22 140405.jpg

Grüße und nochmals Danke!

Ralf

[ralf9000]

So sieht jetzt die für mich/uns optimale Darstellung aus:

Screenshot 2025-05-23 091153.jpg
(ich spiele momentan ein wenig an den gestrichelten Regelungseinstellungen noch rum um das Optimum zu finden)

Immer wieder bin ich erstaunt über die CO₂-Konzentration beim Schlafen, insbesondere bei den ersten 3 Stunden unserer Kleinen. Was noch bleibt ist den Ausreisern bei der Lüftungsstufe (z.B. ca. 08:30 Uhr) nachzugehen. Hier ist nun der fertig Code:

 {{ plot.period('KWLQUALITY',
 ['Zentral.KWL.Regelung.CO2.Maximum', 'Zentral.KWL.Regelung.CO2.Grenzwert', 'Zentral.KWL.Regelung.Feuchte.Fuehler.OGBad', 'Zentral.KWL.Regelung.Feuchte.Fuehler.DGBad', 'Zentral.KWL.Regelung.Feuchte.Grenzwert', 'Zentral.KWL.Leistungsstufe', 'Zentral.KWL.Leistungsstufe.Min', 'Zentral.KWL.Leistungsstufe.Max', 'Zentral.KWL.Bypass', 'Zentral.KWL.Regelung.Feuchte', 'Zentral.KWL.Regelung.CO2'],
 ['raw','raw', 'avg','avg','raw','raw','raw', 'raw','raw','raw','raw'],
 '12h', 'now', [125, 12.5, -470, -45, -47, -49], [1175, 117.5, 180, 5, 3, 1], '',
 ['<small>CO<sub>2</sub></small>', '', '<small>%RF<sub>OG</sub></small>', '<small>%RF<sub>DG</sub></small>', '', '<small>Stufe</small>','', '', '<small>Bypass</small>', '<small>RF-Regelung</small>', '<small>CO<sub>2</sub>-Regelung</small>'],
 ['#e54', '#e54', '#9d4', '#7af', '#88f', '#0f0', '#000', '#0f0', '#937', '#88f', '#e54'],
 ['line', 'stair', 'line', 'line', 'stair', 'areastair','stair','stair','areastair','areastair','areastair'],
 ['', '<pre> </pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Konzentration [ppm]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stufe&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Status', 'Status&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Stufe&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;relative Feuchte [%]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<pre> </pre>'],
 '', [1,1,2,2,2,3,3,3,4,5,6], [0,1,1,1,1,1], '',
 ['linear', 'linear', 'linear', 'linear', 'linear', 'boolean','boolean','boolean'],
 ['ppm','%RF','%'] ,
 { yAxis: [ { useHTML: true, tickPositions: [ 200, 300, 400, 500, 600, 700, 800 ] }, { useHTML: true, tickPositions: [ 20, 30, 40, 50, 60, 70, 80 ] }, {offset:0, visible: false}, {offset:0, visible: false}, {offset:0, visible: false}, {offset:0, visible: false} ], series: [{showInLegend: true},{showInLegend: false},{showInLegend: true},{showInLegend: true},{showInLegend: false},{showInLegend: false},{showInLegend: false},{showInLegend: false},{showInLegend: true},{showInLegend: true}], legend: { useHTML: true, verticalAlign: 'bottom', y: -33 } }) }}
​

visu.css:

#Zentral_KWL-KWLQUALITY.plot {
    height: 525px;
    min-height: 9.0em;
}
#Zentral_KWL-KWLQUALITY svg.highcharts-root:not(.supersized){
    max-height: 600px;
}
#Zentral_KWL-KWLQUALITY .highcharts-series-1{
    stroke-dasharray: 0, 8;
}
#Zentral_KWL-KWLQUALITY .highcharts-series-4{
    stroke-dasharray: 0, 8;
}
#Zentral_KWL-KWLQUALITY .highcharts-series-6{
    stroke-dasharray: 0, 8;
}
#Zentral_KWL-KWLQUALITY .highcharts-series-7{
    stroke-dasharray: 0, 8;
}
​

Grüße, Ralf

[Sipple]

Und danke für's Teilen.

[ralf9000]

Melde mich nochmal hier zurück, weil ich die Methode nun auf weitere Visualisierungen anwende und nun auch rausgefunden habe, wie man durchaus auf ein und dieselbe y-Achse (ohne mehrere y-Achsen unschön nebeneinander zu haben) ganz verschiedene Skalen zum Ablesen bringen kann:

Beispiel ist meine doppelte Stromüberwachung aus dem folgenden Threat: "Lingg&Janke eHZ, Zennio KES Plus und der Stromklau, überführt via KNX"

Die fertige Visualisierung sieht wie folgt aus:

Elektro-Beispiel.jpg

Hier habe ich nun an beiden y-Achsen 0 und 1 jeweils 2 verschiedene Skalen werte-getrennt untergebracht. Möglich wird das durch solche Ausdrücke, wo bei Frequenz und Spannung das Erscheinen von nebenstehenden Achsen alleine mit der Angabe "offset:0" verhindert wird:

{ yAxis: [ ... {offset:0,  visible: true, tickPositions: [230,240,250]} ... }

Der vollständige Code für dieses Beispiel sieht so aus:

{{ plot.period('METERS',
['Zentral.Elektro.Stromzaehler.Wirkleistung', 'Zentral.Elektro.Laden.Wirkleistung', 'Zentral.Elektro.Haus.Wirkleistung', 'Zentral.Elektro.Haus.Blindleistung','Zentral.Elektro.Haus.L1.Strom', 'Zentral.Elektro.Haus.L2.Strom', 'Zentral.Elektro.Haus.L3.Strom','Zentral.Elektro.Haus.L1.Spannung', 'Zentral.Elektro.Haus.L2.Spannung', 'Zentral.Elektro.Haus.L3.Spannung', 'Zentral.Elektro.Haus.Frequenz' ],
 ['avg','avg','avg','avg', 'avg','avg','avg', 'avg','avg','avg', 'avg'],
 '12h', 'now',
 [-6875, -5, 42.5, 35],
 [10125, 70, 285, 50.75 ],
 '',
['<small>P<sub>gesamt</sub</small>','<small>P<sub>Laden</sub></small>', '<small>P<sub>Haus</sub></small>', '<small>Var<sub>Haus</sub></small>','<small>L1</small>','<small>L2</small>','<small>L3</small>','','','','<small>f</small>'],
 ['#099','#c84','#2ff','#837', '#e54','#9d4','#7af', '#e54','#9d4','#7af', '#aaa'],
 ['line','line','line','line', 'line','line','line', 'line','line','line', 'line'],
 ['', '<pre> </pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Leistung [W]', '<pre> </pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Strom [A]', 'Spannung [V]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<pre> </pre>', '<pre> </pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Freq. [Hz]'],
 '',
 [1,1,1,1,2,2,2,3,3,3,4],
 [0,1,1,0],
 '',
 ['linear', 'linear', 'linear', 'linear'],
 ['W','A','V','Hz'] ,
 { yAxis: [ { useHTML: true, tickPositions: [ -1000, 0, 1000, 2000, 3000, 4000, 5000 ] }, { useHTML: true, tickPositions: [ 0, 5, 10, 15 ] }, {offset:0,  visible: true, tickPositions: [230,240,250]},  {offset:0, visible: true, tickPositions: [ 49.5, 50, 50.5 ] } ],
 series: [{showInLegend: true},{showInLegend: true},{showInLegend: true},{showInLegend: true},{showInLegend: true},{showInLegend: true},{showInLegend: true},{showInLegend: false},{showInLegend: false},{showInLegend: false},{showInLegend: true }], legend: { useHTML: true, verticalAlign: 'bottom', y: -36 } }) }}​

In der "visu.css" war (wieder) das folgende nötig:

#Zentral_Elektro-METERS.plot {
    height: 525px;
    min-height: 9.0em;
}
#Zentral_Elektro-METERS svg.highcharts-root:not(.supersized){
    max-height: 600px;
}​

Anmerkung: mit der besten Darstellung "line" oder "stair" und "avg" bzw. "raw", um die optimale Aussagekraft zu bekommen, habe ich hier noch nicht "gespielt".

Ralf