>D 40
; IP for external ScriptEditor
IP=192.168.178.89
; Das Chart wird 400 Pixel breit. Damit sind max. 400 Datenwerte darstellbar.
; Für die Beschriftung der linken und rechten Seite werden insgesamt 38 Pixel abgezogen.
; 2 Pixel werden noch für die y-Achse o.ä. benötigt. Somit verbleiben 360 Pixel. Passt genau für einen 4-Minuten Intervall über 24 Stunden.
; Die Schriftgröße (textStyle:{fontSize: ?? ) beträgt standardmäßig 12.
; Der aktuelle Datensatz wird im Chart rot dargestellt. Da bei einer Liniendarstellung der Datenpunkt nicht genau gedrückt werden kann,
; wurde noch eine transparente Säulendarstellung hinzugefügt, die sich sehr genau drücken lässt.
; Bei mehr als 285 Zeichen in einer Befehslzeile muss eine neue Befehlszeile genommen werden!
; Der Datentyp timeofday setzt sich immer aus Stunde, Minute, Sekunde und optional Millisekunde zusammen, z.B. [8,14,1,13] - 8 Stunden, 14 Min, 1 Sek., 13 Millisek.

; -- ARRAYS --
; Tagestabelle Leistung: alle 4 Min. ein Wert x 15 Werte pro 1h x 24h = 360 Werte  // h: hour (Stunde),  pow: power (Leistung)
M:p:hpow=0 360
; -- VARS --
; Zählerstand für den aktuellen 4-Minuten-Intervall (also von 1...360)  // i: Intervall,   cnt: counter (Zähler)
icnt=0
; Zähler für Array
cnt=0
; Zähler für die Stunden von 0 bis 23                          // h: hour      cnt: counter
hcnt=0
; Zähler für die 4-Minuten Intervalle  von 0 bis 14       // m: minute   cnt: counter
mcnt=0

; -- BOOT --
>B
; alle Datenwerte auf resetten bzw. zum Testen gezielt setzen
for cnt 1 hpow[-1] 1
	hpow[cnt]=cnt*30.6
next

; -- SUB --
; Tagestabelle und Chart Leistung
#hpowsub
	; div id kann beliebig benannt werden - muss aber am Ende von SUB noch einmal eingefügt werden
	wcs <div id="hpowchart" style="text-align:center;width:400px"></div>
	
	wcs <script language="JavaScript">function drawChart(){
	wcs var cssc={'headerRow':'hRow','rowNumberCell':'hCol','tableCell':'tCell'};
	
	; 4 Datenspalten definieren: Zeit, Leistung, Angabe für Datenpunktbeschriftung, Farbe für Datenpunkt und Beschriftung
	;wcs var data=google.visualization.arrayToDataTable([[{label:'Zeit',type:'timeofday'},'LeistungBars (W)',{role:'annotation'},{role:'style'},'LeistungLine (W)',{role:'annotation'},{role:'style'}],
	wcs var data=google.visualization.arrayToDataTable([
	wcs [
	wcs {label:'Zeit',type:'timeofday'},
	wcs 'Leistung (W)',
	wcs {role:'annotation'},
	wcs {role:'style'},
	wcs 'Leistung (W)',
	wcs {role:'annotation'},
	wcs {role:'style'},
	wcs ],
	
	; -- Tabelle mit den Datensätzen füllen --
	cnt=0
	; welcher 4-Minutenblock ist aktuell dran
	; 1.Block (cnt=1) von 00:00 bis 00:04 Uhr bei Minute 00:04
	; letzter Block (cnt=360) von 23:56 bis 00:00 bei Minute 00:00
	icnt=int((((hours*60)+mins)/4)+1)
	; Stunden hochzählen
	for hcnt 0 23 1
		; 4-Minutenblöcke hochzählen
		for mcnt 0 14 1
			cnt+=1
			if cnt==icnt
				; den derzeit aktuellen Datenpunkt rot markieren, sowohl als Balken als auch als Linie
				then wcs [[%s(2.0(hcnt))%,%s(2.0(mcnt*4))%,%s(2.0(0))%],%0hpow[cnt]%,'%0hpow[cnt]%','red',%0hpow[cnt]%,,'red'],
				; nicht der aktuelle Datenpunkt, daher Linie blau markieren und Balken transparent (mit 'opacity:0.0')
				else wcs [[%s(2.0(hcnt))%,%s(2.0(mcnt*4))%,%s(2.0(0))%],%0hpow[cnt]%,,'opacity:0.0',%0hpow[cnt]%,,'blue'], 
			endif
		next
	next
	; Klammerende von var data=google.visualization.arrayToDataTable([
	wcs ]);
	
	; -- Chart beschriften und formatieren --
	;wcs var options={chartArea:{left:37,right:1},legend:'none',title:'(W)    Leistung - 4 Minuten Intervall - gemittelter Wert',series:{0:{type:'bars'},1:{type:'line',lineWidth:0.5}},
	;wcs vAxis:{format:'#',gridlines:{minSpacing:10},textStyle: {fontSize:10}},hAxis:{title:'Tageszeit',format:'H',gridlines:{minSpacing:14}}};

	wcs var options={
	wcs chartArea:{
	wcs left: 37,
	wcs right: 1
	wcs },
	
	wcs legend: 'none',
	wcs title: '(W)    Leistung - 4 Minuten Intervall - gemittelter Wert',
	wcs series: {0: {type: 'bars'},1: {type: 'line', lineWidth: 0.5}}, 
	
	wcs vAxis:{
	wcs format: '#',
	wcs gridlines: {minSpacing: 10},
	wcs textStyle: {fontSize:10}
	wcs },
	
	wcs hAxis:{
	wcs title: 'Tageszeit',
	wcs format: 'H',
	wcs gridlines: {minSpacing: 14}}
	; Klammerende von: var options={
	wcs };
	
	wcs var chart=new google.visualization.ComboChart(document.getElementById('hpowchart'));
	; die nachfolgende Zeile beinhaltet auch das Klammerende von fast ganz oben: <script language="JavaScript">function drawChart(){
	wcs chart.draw(data,options);}google.charts.setOnLoadCallback(drawChart);</script>

; -- JEDE SEKUNDE --
>S
; Test
if (secs%30==0) {
	cnt=20
	hpow[cnt]=5000.67
}

; -- WEB INTERFACE --
>W
; Prüfwerte
Datum{m}%s(2.0day)%.%s(2.0month)%.%s(2.0year)%-%s(2.0hours)%:%s(2.0mins)%:%s(2.0secs)%
hcnt:  %2.0hcnt%
mcnt:  %2.0mcnt%
Uhrzeit: %s(2.0(hcnt))%:%s(2.0(mcnt*4))%
cnt: %2.0cnt%
icnt: %icnt%
hpow[cnt]: %hpow[cnt]%

; die vorhandene rechte Einrückung der folgenden Charts um -20px zurück nehmen
$<div style="margin-left:-23px">

; die nächsten 2 Zeilen könnten auch direkt im SUB hpowchart als erste 2 Zeilen eingefügt werden.
; Das sollte immer dann gemacht werden, wenn mehr als ein Chart dargestellt wird.
$<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
$<script type="text/javascript">google.charts.load('current',{packages:['corechart']});</script>

%=#hpowsub

; die vorhandene rechte Einrückung der folgenden Charts um -20px zurück nehmen
$<div style="margin-left:14px">

; -- END SCRIPT --
#