Moin,
ich möchte mit Google Chart ein 24 Stunden Diagramm für den Stromverbrauch erstellen. Die x-Achse soll dabei von 0 bis 24 beschriftet werden und alle 5 Minuten einen Messwert darstellen. Die x-Achsen Beschriftung bekomme ich zwar im 2 Stunden Intervall hin, aber die Beschriftung wird schräg angezeigt. Außerdem wird die Zeit in Dezimalstellen angezeigt, wenn die Maus darüber fährt. Ich verwende für die x-Achsenbeschriftung einen Zähler (cnt) von 0-288 den ich durch 12 teile. Entspricht alle 5 Min. ein Wert.
Hier das Testscript dazu:
>D 40
; -- ARRAYS --
; 24-Stunden-Tabelle Bezugsleistung: alle 5 Min. ein Wert x 12 Werte pro 1h x 24h = 288 Werte in 24h
M:p:hbez=0 288
; -- VARS --
cnt=0
; -- BOOT --
>B
for cnt 0 288 1
hbez[cnt]=cnt*40
next
; -- SUB --
; Bezugsleistung über 24 Stunden grafisch darstellen
#24hsub
wcs <div id="day" style="text-align:center;width:400px"></div>
wcs <script language="JavaScript">function drawChart(){
wcs var cssc={'headerRow':'hRow','rowNumberCell':'hCol','tableCell':'tCell'};
wcs var data=google.visualization.arrayToDataTable([['Tag','Bezugsleistung (W)'],
for cnt 0 288 1
wcs [%2(cnt/12)%,%hbez[cnt]%],
next
wcs ]);
; in 1er-Schritten von 0-24: zeigt diagonale Beschriftung in 2er-Schritten an
wcs var options={chartArea:{left:45,width:'88%%'},legend:'none',title:'Bezugsleistung - Intervall: 5 Min.',vAxis:{format:'# W',gridlines:{minSpacing:10}},hAxis:{title:'Uhrzeit',ticks:[0,2,4,6,8,10,12,14,16,18,20,22,24]}};
wcs var chart=new google.visualization.LineChart(document.getElementById('day'));
wcs chart.draw(data,options);}google.charts.setOnLoadCallback(drawChart);</script>
; -- JEDE SEKUNDE --
>S
; -- WEB INTERFACE --
>W
; Lade google chart javascript (muss manuell hier geladen werden, wenn im Skript nicht gc() verwendet 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>
%=#24hsub
; -- END SCRIPT --
#
Alles anzeigen
Gibt es eine Möglichkeit die Anzeige der Uhrzeit so zu ändern, dass wenn ich mit der Maus darüber fahre statt z.B. 15.83 15:50 angezeigt wird? Und wie schaffe ich es, Hilfsgitterlinien auf der x-Achse je Stunde darzustellen? Ich bin ratlos.
Für Ideen oder auch Vorschläge bin ich dankbar.
Thomas