Hallo Community,
ich habe ein kleines Problem. Undzwar nehme ich zurzeit meinen Energieverbrauch auf und speichere diesen in deiner ".csv" Datei ab. Für jeden Tag eine Datei. Nun möchte ich diese Daten auf dem DYGraphen ausgeben. Dies funktioniert auch wunderbar nur jetzt möchte ich ein paar Buttons einfügen habe aber keine Ahnung wie ich das realisieren möchte.
- NextDay
- PrevDay
- NextMonth
- PrevMonth
Außerdem wollte ich das beim ersten laden der Seite der aktuelle Tag angezeigt wird. Dazu habe ich einen Versuch eingefügt, welcher aber leider nicht funktioniert.
Ich bin mal auf eure Verbesserungsvorschläge gespannt
und vielen Dank
ich habe ein kleines Problem. Undzwar nehme ich zurzeit meinen Energieverbrauch auf und speichere diesen in deiner ".csv" Datei ab. Für jeden Tag eine Datei. Nun möchte ich diese Daten auf dem DYGraphen ausgeben. Dies funktioniert auch wunderbar nur jetzt möchte ich ein paar Buttons einfügen habe aber keine Ahnung wie ich das realisieren möchte.
- NextDay
- PrevDay
- NextMonth
- PrevMonth
Außerdem wollte ich das beim ersten laden der Seite der aktuelle Tag angezeigt wird. Dazu habe ich einen Versuch eingefügt, welcher aber leider nicht funktioniert.
Ich bin mal auf eure Verbesserungsvorschläge gespannt
und vielen Dank
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Messdatenerfassung</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="js/dygraph-combined.js"></script>
<script type="text/javascript" src="js/htmlDatePicker.js"></script>
<link href="css/htmlDatePicker.css" rel="stylesheet">
</head>
<body>
<form method="get">
Select Date:
<script type="text/javascript">
var today = new Date();
DisablePast = false;
range_start = new Date(today.getFullYear(),today.getMonth(),8);
range_end = new Date(today.getFullYear(),today.getMonth(),5);
</script>
<input type="text" placeholder="Click me!" name="SelectedDate" id="SelectedDate" readonly onClick="GetDate(this);" />
<input type="submit" value="send" id="datum">
</form>
<input type="button" id="PrevDay" name="PrevDay" Value="Prevday" onClick="PreDay()">
<input type="button" id="NextDay" name="NextDay" Value="NextDay" onClick="NexDay()"><br />
<input type=checkbox id="0" checked onClick="change(this)">
<label for="1">Show Leistung [W]</label><br/>
<input type=checkbox id="1" checked onClick="change(this)">
<label for="1">Show Energie [KWh]</label>
<div class="graph" id="graphdiv"></div>
<script type="text/javascript">
var MonthLengths = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var prefix = "csv/messwerte_";
var month, day, year;
var suffix = ".csv";
var csv_datei;
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var param = getParameterByName("SelectedDate");
if (param.length == 0) { // Erster Aufruf der Webseite, funktioniert jedoch nicht
// aktuelles Datum
var date = new Date();
day = date.getDate();
month = date.getMonth()+1;
year = date.getYear();
if (day < 10) {
day = "0" + String(day);
}
else {day = String(day);}
if (month < 10) {
month = "0" + String(month);
}
else {month = String(month);}
year = String(year);
}
else { // String für CSV-Datei aus URL
var param_array = param.split("/", 3); // month/day/year
if (param_array[0].length == 1) {
month = "0" + param_array[0];
}
else {month = param_array[0];}
if (param_array[1].length == 1) {
day = "0" + param_array[1];
}
else {day = param_array[1];}
year = param_array[2];
}
csv_datei = prefix+year+month+day+suffix;
g = new Dygraph(
// containing div
document.getElementById("graphdiv"),
// CSV or path to a CSV file.
csv_datei,
{labels: [ 'Date', 'Leistung [W]','Energie [KWh]' ],
series : {
'Leistung [W]': { axis: 'Y1' },
'Energie [KWh]': { axis: 'Y2' }
},
rollPeriod: 12, // Anzahlbereich der Werte (> weniger werte, < mehr werte)
showRoller: true, // Zeige Punkt im Diagramm
legend: 'always', // Zeige aktuelle Werte des Zeigers an
errorBars: false, //
fillGraph: true, // Fülle den Graphen unterhalb auf
strokeWidth: 1.5, // Dicke des Graphen
visibility: [true, true], //Sichtbarkeit der Graphen
title: "Messwerte "+year+"/"+month+"/"+day, //Titel
labelsDivWidth: 170, //Breite der Labelsdivbox
labelsShowZeroValues:true, //Zeigt auf Nullwerte als Label an
labelsDivStyles: { //Eigenschaften der Labeldivbox
'backgroundColor': 'rgba(200, 200, 255, 0.75)',
'right': '800px',
'padding': '4px',
'border': '1px solid black',
'borderRadius': '10px',
'boxShadow': '4px 4px 4px #888'
},
ylabel: "Leistung [W]", //y1 beschriftung
y2label: "Energie [KWh]" //Y2 beschriftung
);
//Für Checkboxen ob Graph sichbar oder unsichbar
function change(el) {
g.setVisibility(parseInt(el.id), el.checked);
setStatus();
//Testfunktion
}
</script>
</body>
</html>
