Hallo zusammen,
ich erstell mal einen neuen Threat, da mir der ursprüngliche Designidee für Zeiteingabe gesucht etwas alt erscheint.
Grundlagen:
Habe ein Script erstellt, das den HighCharts Code nativ enthält.
Nun möchte ich die Zeitauswahl auch mit nativen Highcharts-Buttons realisieren.
Das Beispiel von BB in Designidee für Zeiteingabe gesucht - Seite 3 funktioniert bei mir leider nicht 1zu1 und für eine Anpassung bin ich wohl, trotz Internetrecherche und testen verschiedener Codeschnipsel, nicht schlau genug.
Was ist mein Ziel?
ich möchte verschiedene Buttons clicken um damit IPS-Variablen zu setzen, ohne bei jedem Click den Chart neu zu rendern. Erst beim clicken auf aktualisieren soll der Chart neu gerendert werden.
Das setzen von Variablen hab ich schon hinbekommen. Allerdings nur wenn ich für jeden Button 1 Script hinterlege. Wie ich eine ButtonID an ein Switch-Case Script übergebe, hab ich leider noch nicht rausgefunden.
Weiter hab ich es noch nicht geschafft, wie bb einen TimeSelector aufzurufen, der mir dann einen Unixtimstamp in eine Variable schreibt.
Und bevor ich später auf die Nase falle:
- ist es möglich wie den Timeselector auch eine DropdownBox mit vorgegebenen Zeitintervallen (1,2,3 Tage; 1 woche, 1Monat …) einzubinden, die bei Click eine entsprechende Variable setzt, einzubauen?
Hier mal mein aktuelles Script und exemplarisch eins das durch einen Button ausgelöst wird.
<!DOCTYPE html>
<html>
<head>
<title>
Wetterdaten 5 Minuten-Intervall
</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!--script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript" ></script-->
<script src="\user\jquery\jquery-1-9-1\jquery-1.9.1.js" type="text/javascript"></script>
<script src="\user\highcharts\js\highcharts.js" type="text/javascript"></script>
<script src="\user\highcharts\js hemes\ips.js"></script>
<script src="\user\highcharts\js\modules\exporting.js" type="text/javascript"></script>
<?
// Zeitraum via Selector im WF nach: http://www.ip-symcon.de/forum/f53/highcharts-multigraph-17625/index3.html#post126538
$ZeitRaum = GetValue(28160 /*[Logisch\Wetter\WetterEigen\Auswertung\Wetter_5MinWerte_HCPur\Tage]*/);
If ($ZeitRaum == 0) {$ZeitRaum = (8/24);};
// $EndPunkt = GetValue(34523 /*[Logisch\Wetter\WetterAuswertung\HC\Stundenwerte\Zeitraum\HC_Endpunkt]*/ );
$CfgDaten["EndTime"] = time();
$CfgDaten["StartTime"] = ($CfgDaten["EndTime"] - 60 * 60 * 24 * $ZeitRaum);
$SQLStart = "'".date("Y-m-d H:i:s",$CfgDaten["StartTime"])."'";
$SQLEnd = "'".date("Y-m-d H:i:s",$CfgDaten["EndTime"])."'";
//echo date("Y-m-d H:i:s",$CfgDaten["StartTime"])." ".date("Y-m-d H:i:s",$CfgDaten["EndTime"])."
";
// Fehler abfangen wenn der gewählte Zeitraum in der Zukunft liegt
If ($CfgDaten["EndTime"]>time())
{echo "Zeitauswahl liegt zumindest mit einem Datum in der Zukunft. Bitte wählen Sie einen Zeitraum in der Vergangenheit.";
exit();}
//------------------------------------------------------------------------------
// MySQL DB-Daten:
$MySQLConn=mysql_connect($MySQLIP.$MySQLPort, $MySQLAdmin, $MySQLAdminPW);
$db = $IPS_DB;
$SQLTable = $TBL_Wetter_VantagePro2_5Min_raw;
$db_selected = mysql_select_db($db, $MySQLConn);
//------------------------------------------------------------------------------
// MySQL Daten holen
// Temperatur 2m über Boden ------------------------------------------------
$sql_Ergebnis = mysql_query("SELECT DateTimeX, TempOut
FROM " . $SQLTable ."
WHERE DateTimeX >= ".$SQLStart." AND DateTimeX <= ".$SQLEnd."
ORDER BY DateTimeX;")
OR die("'".$sql_Ergebnis."':".mysql_error());
//$data = mysql_fetch_array($sql_Ergebnis, MYSQL_ASSOC); // wenn die Zeile aktiviert wird, beginnt der TimeStamp einen Tag später. ?? warum?? nicht gelöst.
$i = 0;
while($data = mysql_fetch_array($sql_Ergebnis))
{
// Sommerzeit -------------------------
$gmtOffset = date("I",strtotime($data['DateTimeX']))*3600;
//echo "gmtoffset ".$gmtOffset."
";
$Temp200[] = "[".(strtotime($data['DateTimeX']) + $gmtOffset) * 1000 .",". $data['TempOut']."]"; //,
}
$i++;
//print_r($Temp200);
$temp200 = join($Temp200, ',');
// Solarstrahlung ------------------------------------------------
$sql_Ergebnis2 = mysql_query("SELECT DateTimeX, SolarRad
FROM " . $SQLTable ."
WHERE DateTimeX >= ".$SQLStart." AND DateTimeX <= ".$SQLEnd."
ORDER BY DateTimeX;")
OR die("'".$sql_Ergebnis2."':".mysql_error());
//$data = mysql_fetch_array($sql_Ergebnis, MYSQL_ASSOC); // wenn die Zeile aktiviert wird, beginnt der TimeStamp einen Tag später. ?? warum?? nicht gelöst.
$i = 0;
while($data = mysql_fetch_array($sql_Ergebnis2))
{
// Sommerzeit -------------------------
$gmtOffset = date("I",strtotime($data['DateTimeX']))*3600;
//echo "gmtoffset ".$gmtOffset."
";
$SolarRad[] = "[".(strtotime($data['DateTimeX']) + $gmtOffset) * 1000 .",". $data['SolarRad']."]"; //,
}
$i++;
//print_r($SolarRad);
//echo join($SolarRad, ',');
// Sonnenminuten ------------------------------------------------
$sql_Ergebnis3 = mysql_query("SELECT DateTimeX, Sonnenminuten
FROM " . $SQLTable ."
WHERE DateTimeX >= ".$SQLStart." AND DateTimeX <= ".$SQLEnd."
ORDER BY DateTimeX;")
OR die("'".$sql_Ergebnis3."':".mysql_error());
//$data = mysql_fetch_array($sql_Ergebnis, MYSQL_ASSOC); // wenn die Zeile aktiviert wird, beginnt der TimeStamp einen Tag später. ?? warum?? nicht gelöst.
$i = 0;
while($data = mysql_fetch_array($sql_Ergebnis3))
{
// Sommerzeit -------------------------
$gmtOffset = date("I",strtotime($data['DateTimeX']))*3600;
//echo "gmtoffset ".$gmtOffset."
";
$Sonnenminuten[] = "[".(strtotime($data['DateTimeX']) + $gmtOffset) * 1000 .",". $data['Sonnenminuten']."]"; //,
}
$i++;
//print_r($Sonnenminuten);
//echo join($Sonnenminuten, ',');
// Niederschlag ------------------------------------------------
$sql_Ergebnis4 = mysql_query("SELECT DateTimeX, Rain
FROM " . $SQLTable ."
WHERE DateTimeX >= ".$SQLStart." AND DateTimeX <= ".$SQLEnd."
ORDER BY DateTimeX;")
OR die("'".$sql_Ergebnis4."':".mysql_error());
//$data = mysql_fetch_array($sql_Ergebnis, MYSQL_ASSOC); // wenn die Zeile aktiviert wird, beginnt der TimeStamp einen Tag später. ?? warum?? nicht gelöst.
$i = 0;
while($data = mysql_fetch_array($sql_Ergebnis4))
{
// Sommerzeit -------------------------
$gmtOffset = date("I",strtotime($data['DateTimeX']))*3600;
//echo "gmtoffset ".$gmtOffset."
";
$Rain[] = "[".(strtotime($data['DateTimeX']) + $gmtOffset) * 1000 .",". $data['Rain']."]"; //,
}
$i++;
//print_r($Rain);
//echo join($Rain, ',');
// LuftFeuchte ------------------------------------------------
$sql_Ergebnis5 = mysql_query("SELECT DateTimeX, OutHum
FROM " . $SQLTable ."
WHERE DateTimeX >= ".$SQLStart." AND DateTimeX <= ".$SQLEnd."
ORDER BY DateTimeX;")
OR die("'".$sql_Ergebnis5."':".mysql_error());
//$data = mysql_fetch_array($sql_Ergebnis, MYSQL_ASSOC); // wenn die Zeile aktiviert wird, beginnt der TimeStamp einen Tag später. ?? warum?? nicht gelöst.
$i = 0;
while($data = mysql_fetch_array($sql_Ergebnis5))
{
// Sommerzeit -------------------------
$gmtOffset = date("I",strtotime($data['DateTimeX']))*3600;
//echo "gmtoffset ".$gmtOffset."
";
$OutHum[] = "[".(strtotime($data['DateTimeX']) + $gmtOffset) * 1000 .",". $data['OutHum']."]"; //,
}
$i++;
//print_r($OutHum);
//echo join($OutHum, ',');
// LuftDruck ------------------------------------------------
$sql_Ergebnis6 = mysql_query("SELECT DateTimeX, Bar
FROM " . $SQLTable ."
WHERE DateTimeX >= ".$SQLStart." AND DateTimeX <= ".$SQLEnd."
ORDER BY DateTimeX;")
OR die("'".$sql_Ergebnis6."':".mysql_error());
//$data = mysql_fetch_array($sql_Ergebnis, MYSQL_ASSOC); // wenn die Zeile aktiviert wird, beginnt der TimeStamp einen Tag später. ?? warum?? nicht gelöst.
$i = 0;
while($data = mysql_fetch_array($sql_Ergebnis6))
{
// Sommerzeit -------------------------
$gmtOffset = date("I",strtotime($data['DateTimeX']))*3600;
//echo "gmtoffset ".$gmtOffset."
";
//$data['Bar'] = number_format ( $data['Bar'] , $decimals = 1 , $dec_point = "." , $thousands_sep = "," );
$Bar[] = "[".(strtotime($data['DateTimeX']) + $gmtOffset) * 1000 .",". $data['Bar']."]"; //,
}
$i++;
//print_r($Bar);
//echo join($Bar, ',');
// ff zeiteingabe von bb: https://www.symcon.de/forum/threads/22395-Designidee-f%C3%BCr-Zeiteingabe-gesucht?p=207322#post207322
?>
<script type="text/javascript">
$(function () {
Highcharts.setOptions({
global: {
timezoneOffset: -1 * 60
},
colors:['red', /* 0 rot für Temperatur */
'yellow', /* 1 gelb für Solarstrahlung */
'#F3F781', /* 2 hellgelb für SonnenMinuten */
'blue', /* 3 blau für Niederschlag */
'#0080FF', /* 4 hellblau für Luftfeuchte */
'grey' /* 5 grau für LuftDruck */
]
});
$('#container2').highcharts({
credits: {
enabled: false
},
chart: {
zoomType: 'xy'
},
navigation: {
buttonOptions: {
theme: {
fill:'grey',
style: {
color: ".$ColorHour.",
textDecoration: 'none',
},
states: {
hover: {
fill: 'white',
color: ".$ColorHour.",
textDecoration: 'bold',
},
},
}
}
},
exporting: {
buttons: {
contextButton: {
enabled: false},
absrelButton: {
text: 'absolut/relativ',
onclick: function () { new Image().src = '/user/HighCharts_WetterEigen5Min/absrel.php?ScriptID=39821';},
align: 'right',
y: 0,
x: -500,
},
Tag1Button: {
text: '1 Tag',
onclick: function () { new Image().src = '/user/HighCharts_WetterEigen5Min/1Tag.php';},
align: 'right',
y: 0,
x: -400,
},
Tag2Button: {
text: '2 Tage',
onclick: function () { new Image().src = '/user/HighCharts_WetterEigen5Min/2Tage.php';},
align: 'right',
y: 0,
x: -300,
},
Tag3Button: {
text: '3 Tage',
onclick: function () { new Image().src = '/user/HighCharts_WetterEigen5Min/3Tage.php';},
align: 'right',
y: 0,
x: -200,
},
AuswahlButton: {
text: 'EndZeit',
onclick: function () { new Image().src = '/user/HighCharts_WetterEigen5Min/HighchartsCommand.php?ScriptID=39821&Interval=Auswahl&StartDate=0&EndDate=0';},
align: 'right',
y: 0,
x: -100,
},
Aktualisieren: {
text: 'aktualisieren',
onclick: function () { new Image().src = '/user/HighCharts_WetterEigen5Min/aktualisieren.php';},
align: 'right',
y: 0,
x: 0,
},
},
},
title: {
text: 'Wetter 5-Minutenwerte' // Formatierung in der \user\highcharts\js hemes\ips.js
},
subtitle: {
text: '<? echo date("d.m. Y H:i",$CfgDaten["StartTime"])." bis ".date("d.m. Y H:i",$CfgDaten["EndTime"]) ?>', // Formatierung in der \user\highcharts\js hemes\ips.js
},
xAxis: {
type: 'datetime' // Formatierung in der \user\highcharts\js hemes\ips.js
},
yAxis: [{ // Primary yAxis
title: {
text: 'Temperatur',
},
labels: {
format: '{value}°C',
},
opposite: false
}, { // 2. yAxis
id: 1,
gridLineWidth: 0,
title: {
text: 'SolarStrahlung',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} W/m²',
style: {
color: Highcharts.getOptions().colors[1]
}
},
startOnTick: true,
min: 0,
//max: 1200,
opposite: true
},{ // 3. yAxis
id: 2,
gridLineWidth: 0,
title: {
//text: 'Sonnenschein',
text: '',
style: {
color: Highcharts.getOptions().colors[2]
}
},
labels: {
format: '{value} Minuten',
formatter: function() {
return ''; // blendet die achsenbeschriftung aus
},
style: {
color: Highcharts.getOptions().colors[2]
},
},
tickInterval: 5,
startOnTick: true,
min: 0,
max: 5,
opposite: true
},{ // 4. yAxis
id: 3,
gridLineWidth: 0,
title: {
text: 'Niederschlag',
style: {
color: Highcharts.getOptions().colors[3]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[3]
}
},
opposite: true
},{ // 5. yAxis
id: 4,
gridLineWidth: 0,
title: {
text: 'LuftFeuchte',
style: {
color: Highcharts.getOptions().colors[4]
}
},
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[4]
}
},
startOnTick: true,
min: 0,
// max: 100,
opposite: true
},{ // 6. yAxis
id: 5,
gridLineWidth: 0,
title: {
text: 'LuftDruck',
style: {
color: Highcharts.getOptions().colors[5]
}
},
labels: {
format: '{value} mb',
style: {
color: Highcharts.getOptions().colors[5]
}
},
//tickInterval: 1,
opposite: true
}],
tooltip: {
shared: true
},
series: [
{// erste Serie
id: 0,
// zindex: 10,
yaxis: 0,
name: 'Temperatur',
type: "spline",
color: "red",
marker: {
enabled: false
},
data: [<?php echo $temp200 ?>],
tooltip: {
valueSuffix: ' °C'
}
},
{
name: 'SolarStrahlung',
yAxis: 1,
zIndex: 2,
type: 'spline',
color: Highcharts.getOptions().colors[2],
visible: true,
marker: {
enabled: false
},
data: [<?php echo join($SolarRad, ',') ?>],
tooltip: {
valueSuffix: ' W/m²'
}
},
{
name: 'Sonne',
yAxis: 2,
zIndex: 1,
type: 'column',
visible: true,
color: Highcharts.getOptions().colors[2],
borderColor: Highcharts.getOptions().colors[2],
marker: {
enabled: false
},
data: [<?php echo join($Sonnenminuten, ',') ?>],
tooltip: {
valueSuffix: ' Minuten'
}
},
{
name: 'Regen',
yAxis: 3,
zIndex: 1,
type: 'column',
visible: true,
borderColor: 'blue',
color: Highcharts.getOptions().colors[2],
marker: {
enabled: false
},
data: [<?php echo join($Rain, ',') ?>],
tooltip: {
valueSuffix: ' mm'
}
},
{
name: 'LuftFeuchte',
yAxis: 4,
zIndex: 3,
type: 'spline',
visible: true,
marker: {
enabled: false
},
data: [<?php echo join($OutHum, ',') ?>],
tooltip: {
valueSuffix: ' %'
}
},
{
name: 'LuftDruck',
yAxis: 5,
zIndex: 5,
type: 'spline',
visible: false,
marker: {
enabled: false
},
data: [<?php echo join($Bar, ',') ?>],
dashStyle: 'shortdot',
tooltip: {
valueSuffix: ' mb'
}
}
],// ende Series
}
);
});
</script>
</head>
<!-------------------------------------------------------------------------------->
<body>
<table align = right>
<tr>
<td><button type="button" onclick="Tag1()">1 Tag</button></td>
<td></td>
<td><button type="button" onclick="Tag2()">2 Tage</button></td>
<td></td>
<td><button type="button" onclick="Tag3()">3 Tage</button></td>
<td></td>
<td><button type="button" onclick="Aktualisieren();">Aktualisieren</button></td>
</tr>
</table>
<script type="text/javascript">
function Tag1()
{
$.get("1Tag.php"); // phpcode: setvalue(28160, 1)
return false;
}
function Tag2()
{
$.get("2Tage.php"); // phpcode: setvalue(28160, 2)
return false;
}
function Tag3()
{
$.get("3Tage.php"); // phpcode: setvalue(28160, 3)
return false;
}
function Aktualisieren() // phpcode: SetValue(23881, "<iframe src='user/HighCharts_WetterEigen5Min/5MinWerte.php' width='100%' height='620' frameborder='0' scrolling='no'></iframe>");
{
$.get("aktualisieren.php");
return false;
}
</script>
<!--div id="container1" style="min-width: 400px; height: 30px; margin: 0 auto;">Zeitauswahl</div-->
<div id="container2" style="min-width: 400px; height: 600px; margin: 0 auto;"></div>
</body>
</html>
<?
setvalue(28160 /*[Logisch\Wetter\WetterEigen\Auswertung\VantagePro2-WebStringAktuell\Tage]*/, 1)
?>
Und hier noch ein Screenshot wies aktuell aussieht. Die Weissen Buttons sind ausserhalb von Highcharts und derzeit nur zum testen… Wenn aber jemand eine Lösung zur Umsetzeung der o.g. Ziele damit weiss, nur her damit. Wäre zwar nur 2. Wahl, da zusätzlicher Platz verwendent wird, aber im Notfall besser als nix.
Vielen Dank im voraus für Eure Antworten,
