Hallo zusammen,
ich hab mir eine Webseite gebastelt, die eine Zeitauswahl über ein html-Formular hat und darunter dann den HighChart.
Ist nur eine PHP-Datei. Wenn ich auf den Submit-Button klicke, wird der Chart auch wie gewünscht angezeigt.
Und jetzt mein Problem:
Wenn die Seite aufgerufen wird, wird nur die Zeitauswahl angezeigt. Kein Chart. Der kommt erst wie gesagt wenn man den submit-Button (speichern) klickt.
Kann mir bitte jemand erklären wie ich das Porblem lösen kann?
Hab schon Stunden damit verbracht verschiedene Löungsansätze aus dem Internet auszuprobieren. Hat alles nicht funktioniert.
Die einzige (unbefriedigende weil die Seite beim ersten Aufruf 2x geladen wird und damit „blinkt“) Lösung war, dass ich eine 2. php include, die dann via js den Submit auslöst.
Anbei mal das kompette Script. Ist jetzt ziehmlich durcheinander, da ich verschiedene Folgen von php, html und js/highcharts getestet hab, funktioniert aber wie oben bschrieben.
<html>
<head>
<!--meta charset="utf-8"-->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>
Wetter Dürrmenz TagesWerte
</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!--script src="//code.jquery.com/jquery-1.11.4.min.js" type="text/javascript" ></script-->
<script src="_js/highcharts/js/highcharts.js" type="text/javascript"></script>
<script src="_js/highcharts/js/themes/ips.js" type="text/javascript"></script>
<link rel='stylesheet' href='./_css/webfront.css'>
<link rel='stylesheet' href='./_css/eigen.css'>
<style type="text/css">
.datum
{
cursor: pointer;
border: 1px solid grey;
color: grey;
background-color: transparent;
width: 100px;
text-align: center;
}
.dropdownAbsrel
{
cursor: pointer;
border: 1px solid grey;
color: grey;
background-color: transparent;
width: 70px;
text-align: center;
}
.dropdownZeitraum
{
cursor: pointer;
border: 1px solid grey;
color: grey;
background-color: transparent;
width: 90px;
text-align: center;
}
.button
{
cursor: pointer;
border: 1px solid grey;
color: grey;
background-color: transparent;
width: 70px;
text-align: center;
}
</style>
</head>
<body>
<!--br><br><br><br-->
<!-- Container für Zeitauswahl definieren ------------------------------------------------------------>
<!--div id="container1" style="min-width: 400px; height: 30px; margin: 0 auto;"-->
<script> <!-- http://api.jqueryui.com/datepicker/ -->
$(function() {
$( "#datepicker1" )
.datepicker({
changeMonth: true,
changeYear: true,
showWeek: true,
defaultDate: +0,
dateFormat: "D dd.mm. yy",
firstDay: 1,
dayNames: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ],
dayNamesShort: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ],
monthNames: [ "Januar", "Februar", "März", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December" ],
monthNamesShort: [ "Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez" ],
minDate: new Date(2015, 6 - 1, 1), maxDate: "+0M +00D", // Zeitraumbegrenzungen Date(Jahr, Monat - Tag, ???), ...
showButtonPanel: true,
currentText: "heute",
closeText: "fertig",
}).datepicker("setDate", "0");
});
</script>
<!--form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"-->
<form name = "zeitauswahl" align="left" method="post" action="<?php echo htmlspecialchars($_SERVER["wetter_duerrmenzwetter_VP2_Std_Chart.php"]);?>">
<!-- $text eine einfache Texteingabe -->
<!--input type="text" name="text" value="<?php echo $text;?>" /-->
<!-- $AbsRel KombiFeld mit Setzen einer IPS-Variablen -->
<select class="dropdownAbsrel" id="AbsRel" name="AbsRel" onchange="document.getElementById('selected_text').value=this.options[this.selectedIndex].text"> <!--http://stackoverflow.com/questions/18268068/php-code-to-get-selected-text-of-a-combo-box -->
<option value = "0" <?php if ($AbsRel == "0") echo "selected" ?>>relativ</option>
<option value = "1" <?php if ($AbsRel == "1") echo "selected" ?>>absolut</option>
</select>
<!-- Verstecktes Feld das die vorige Eingabe 'selected_text',hier absrel im KlarText wiedergibt -->
<input type="hidden" name="selected_text" id="selected_text" value="<?php echo $AbsRel_t;?>"/>
<!-- $Tage KombiFeld mit Setzen einer IPS-Variablen -->
<select class="dropdownZeitraum" id="Tage1" name="Tage" onchange="document.getElementById('selected_text2').value=this.options[this.selectedIndex].text">
<option value = "7" <?php if ($Tage == "7") echo "selected" ?>>1 Woche</option>
<option value = "14" <?php if ($Tage == "14") echo "selected" ?>>2 Wochen</option>
<option value = "30" <?php if ($Tage == "30") echo "selected" ?>>1 Monat</option>
<option value = "91" <?php if ($Tage == "91") echo "selected" ?>>1 Quartal</option>
<option value = "183" <?php if ($Tage == "183") echo "selected" ?>>1 HalbJahr</option>
<option value = "365" <?php if ($Tage == "365") echo "selected" ?>>1 Jahr</option>
</select>
<!-- Verstecktes Feld das die vorige Eingabe 'selected_text',hier absrel im KlarText wiedergibt -->
<input type="hidden" name="selected_text2" id="selected_text2" value="<?php echo $Tage_t;?>"/>
<!-- $DateX Eingabefeld für Datum vorbelegen -->
<!--input class="datum" id="datepicker" name="DateT" type="text" value="<?php echo date("D d.m. Y",time());?>" /-->
<input class="datum" id="datepicker1" name="DateT" type="text" value="<?php echo $DateT;?>" />
<input type="hidden" id="selected_text3" name="selected_text3" value="<?php echo $DateT;?>" />
<input class="button" type="Submit" value="speichern" />
<img src= "./_images/icons/i_75.png" width="16" height="16" align="absmiddle" alt="Info"
title="Alle Werte kommen von einer Davis Vantage Pro2 mit Solar und UV-Sensor und werden alle 5 Minuten geschrieben. !! Die Werte der Sonnenstunden sind nicht gemessen, sondern errechnet. Die Formel dafür ist leider sehr ungenau. Über den gesamten Berechnungszeitraum ca. 38% im Plus. Manchmal weniger, manchmal mehr. Daher werden die Daten der Stundenauswertung mit zuverlässigeren Werten des DWD überschrieben sobald sie verfügbar sind. Ca. 1 - 2 Tage später, je nach DWD Verfügbarkeit. !! Die absoluten Daten beziehen sich derzeit noch leider auf einen Tag. Absolute Wochen, Monats... Auswerungen folgen"/>
</form>
<!--/div-->
<?php
// if(!$_POST)
// {//echo "Keine Zeitauswahl. Bitte speichern klicken.";
// # $AbsRel = 0;
// # $Tage = 7;
// # $DateT = date("D d.m.Y",time());
// include_once ("Zeitauswahl-Post.php");
// }
//echo "post absrel: ".$AbsRel."
";
include_once '_vars/globalVars.php';
// if ($_SERVER["REQUEST_METHOD"] == "POST")
// {
// $text = $_POST["text"];
// $AbsRel = $_POST['AbsRel'];
// $AbsRel_t = $_POST['selected_text'];
// $Tage = $_POST['Tage'];
// $Tage_t = $_POST['selected_text2'];
// $DateT = $_POST['DateT'];
// }
//if (!isset($DateT))
// {$DateT = }
#echo "Absrel: ".$AbsRel;
if ($AbsRel == false)
{$h = date("H",time());
$i = date("i",time());
}
else
{$h = 0;
$i = 0;
}
// echo "<br>";
// echo "Tage_V: ".$Tage;
// echo "<br>";
// echo "Tage_T: ".$Tage_t;
// echo "<br>";
// echo "<br>";
// echo "DateT: -x".$DateT."x-";
// echo "<br>";
// if ($DateT == "")
// {$DateT = date("D d.m. Y",time());}
$datex = explode(" ",$DateT);
//print_r($datex);
$datey = explode(".",$datex[1]);
#print_r($datey);
/*if ($datey[1]*1 == 0)
{//echo "kein Datum";
*/
$dateU = mktime($h,$i,0, $datey[1]*1, $datey[0]*1, $datex[2]*1);
$dateI = date("I",$dateU);
// echo "Sommerzeit: ".$dateI;
// echo "<br>";
//$mezOffset = 3600 * $dateI; // $mezOffset wir nicht benötigt, da die daten schon das offset beinhalten
$mezOffset = 0;
// echo "MEZ Offset: ".$mezOffset;
// echo "<br>";
$dateU = $dateU + $mezOffset;
# echo "DateU: ".date("Y-m-d H:i",$dateU);
// echo "<br>";
//if (isset($dateU)) setvalue(41046 /*[Logisch\Wetter\WetterEigen\Auswertung\Wetter_5MinWerte_HCPur_Gast\Endzeit]*/, $dateU);
$dateDiff = $Tage * 86400; // Tage * 86400 (= Sekunden am Tag)
$dateS = $dateU - $dateDiff;
// echo "DateS: ".$dateS;
// echo "<br>";
$dateS_t = EN_DE_Date_Umwandler("D d.m. Y", $dateS);
// echo "DateS_t: ".$dateS_t;
//if (isset($dateS)) setvalue(23630 /*[Logisch\Wetter\WetterEigen\Auswertung\Wetter_5MinWerte_HCPur_Gast\StartZeit]*/, $dateS);
# sql start und endime berechnen -------------------------------
$SQLStart = "'".date("Y-m-d",$dateS)."'";
$SQLEnd = "'".date("Y-m-d",$dateU)."'";
# end sql start und endime berechnen -------------------------------
// Fehler abfangen wenn der gewählte Zeitraum in der Zukunft liegt
/* If ($dateU - 86400 > time())
{echo "Zeitauswahl liegt zumindest mit einem Datum in der Zukunft. Bitte wählen Sie einen Zeitraum in der Vergangenheit.";
echo "DateU: ".date("Y-m-d",$dateU);
exit();
} */
# -----------------------------------------------------------------------------------------------------------------------------
# hier begint Highcharts ------------------------------------------------------------------------------------------------------
# Daten von MySQL abfragen und für Highcharts aufbereiten -------------------
# mysql connect -------------------------------------------------------------
$user = $MySQLAdmin;
$pw = $MySQLAdminPW;
$host = $MySQLIP;
$db = $IPS_DB;
$tbl_1 = $TBL_Wetter_VantagePro2_day;
//$mysqli = new mysqli("localhost", "user", "password", "database");
$conn1 = new mysqli($host,$user, $pw, $db);
if ($conn1->connect_errno) {
echo "Failed to connect to MySQL: (" . $conn1->connect_errno . ") " . $conn1->connect_error;
exit();
}
# end mysql connect -------------------------------------------------------------
# Abfrage 1 -----------------------------------------------------------------------
/* Select queries return a resultset */
$sql = "SELECT DateX, AVGTempOut, maxHiTemp, minLowTemp, AVGWindSpeed, DomWindDir, MaxHiSpeed, MaxHiDir, SumWindRun, MinWindChill, maxHeatIndex, SumRain, MaxRainRate, SumSolarEnergy, MaxHiSolarRad, MaxHiUV
FROM " . $tbl_1 ."
WHERE DateX >= ".$SQLStart." AND DateX <= ".$SQLEnd."
ORDER BY DateX;";
if ($result = mysqli_query($conn1, $sql)) {
$i = 0;
while($data = mysqli_fetch_assoc($result))
{
// Sommerzeit -------------------------
$gmtOffset = date("I",strtotime($data['DateX']))*3600;
//echo "gmtoffset ".$gmtOffset."
";
$avgtemp200[] = "[".(strtotime($data['DateX']) + $gmtOffset) * 1000 .",". $data['AVGTempOut']."]";
$maxtemp200[] = "[".(strtotime($data['DateX']) + $gmtOffset) * 1000 .",". $data['maxHiTemp']."]";
$mintemp200[] = "[".(strtotime($data['DateX']) + $gmtOffset) * 1000 .",". $data['minLowTemp']."]";
$AVGWindSpeed[] = "[".(strtotime($data['DateX']) + $gmtOffset) * 1000 .",". $data['AVGWindSpeed']."]";
$DomWindDir[] = "[".(strtotime($data['DateX']) + $gmtOffset) * 1000 .",". $data['DomWindDir']."]";
$MaxHiSpeed[] = "[".(strtotime($data['DateX']) + $gmtOffset) * 1000 .",". $data['MaxHiSpeed']."]";
$MaxHiDir[] = "[".(strtotime($data['DateX']) + $gmtOffset) * 1000 .",". $data['MaxHiDir']."]";
$SumWindRun[] = "[".(strtotime($data['DateX']) + $gmtOffset) * 1000 .",". $data['SumWindRun']."]";
# $MinWindChill[] = "[".(strtotime($data['DateX']) + $gmtOffset) * 1000 .",". $data['MinWindChill']."]";
# $maxHeatIndex[] = "[".(strtotime($data['DateX']) + $gmtOffset) * 1000 .",". $data['maxHeatIndex']."]";
$SumRain[] = "[".(strtotime($data['DateX']) + $gmtOffset) * 1000 .",". $data['SumRain']."]";
$MaxRainRate[] = "[".(strtotime($data['DateX']) + $gmtOffset) * 1000 .",". $data['MaxRainRate']."]";
$SumSolarEnergy[] = "[".(strtotime($data['DateX']) + $gmtOffset) * 1000 .",". $data['SumSolarEnergy']."]";
$MaxHiSolarRad[] = "[".(strtotime($data['DateX']) + $gmtOffset) * 1000 .",". $data['MaxHiSolarRad']."]";
$MaxHiUV[] = "[".(strtotime($data['DateX']) + $gmtOffset) * 1000 .",". $data['MaxHiUV']."]";
}
$i++;
} else {
echo "0 results";
}
/* free result set */
mysqli_free_result($result);
# End Abfrage 1-----------------------------------------------------------------------
#print_r($avgtemp200);
# mysql connect schliessen ----------------------------------------------------------
mysqli_close($conn1);
# End mysql connect schliessen ------------------------------------------------------
# End Daten von MySQL abfragen und für Highcharts aufbereiten -------------------
?>
<!-- Anfang HighCharts ----------------------------------------------------------------->
<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 */
],
lang: {
decimalPoint: ',',
thousandsSep: '.',
loading: 'Daten werden geladen...',
months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
shortMonths: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
exportButtonTitle: "Exportieren",
printButtonTitle: "Drucken",
rangeSelectorFrom: "Von",
rangeSelectorTo: "Bis",
rangeSelectorZoom: "Zeitraum",
downloadPNG: 'Download als PNG-Bild',
downloadJPEG: 'Download als JPEG-Bild',
downloadPDF: 'Download als PDF-Dokument',
downloadSVG: 'Download als SVG-Bild',
resetZoom: "Zoom zurücksetzen",
resetZoomTitle: "Zoom zurücksetzen"
}
});
$('#container2').highcharts({
credits: {
enabled: false
},
chart: {
zoomType: 'xy'
},
exporting: {
buttons: {
contextButton: {
enabled: false},
},
},
title: {
text: 'Wetter Tageswerte', // Formatierung in der \user\highcharts\js hemes\ips.js
},
subtitle: {
text: '<? echo EN_DE_Date_Umwandler("D d.m. Y", $dateS)." bis ".EN_DE_Date_Umwandler("D d.m. Y", $dateU) ?>', // Formatierung in der \user\highcharts\js hemes\ips.js
},
xAxis: {
type: 'datetime', // Formatierung in der \user\highcharts\js hemes\ips.js
},
yAxis: [
{ // 1. YAchse
title: {
text: 'Temperatur',
style: {color: 'grey',},
},
labels: {
format: '{value}°C',
style: {color: 'red',},
},
opposite: false,
plotLines: [
{// plotline 1 -----
value: 0,
color: 'blue',
dashStyle: 'shortdash',
width: 1,
label: {text: '0°'}
},
{// plotline 2 ------
value: 20,
color: 'orange',
dashStyle: 'shortdash',
width: 1,
label: {text: '20°'}
}
]
},
{ // 2. Achse
lineWidth: 0,
title: {
text: 'Wind',
style: {color: 'grey',},
},
labels: {
format: '{value} Km/h',
style: {color: 'grey',},
},
opposite: true,
}],
tooltip: {
shared: true,
useHTML: true,
xDateFormat: '%a %d.%m. %Y',
headerFormat: '<normal style="color: Grey">{point.key}</normal><table>',
pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
'<td style="text-align: right; color: {series.color}"><b>{point.y}</b></td></tr>',
footerFormat: '</table>',
},
series: [
{// 1. Serie
//id: 0,
//zindex: 0,
name: 'Temperatur max',
yaxis: 0,
type: "spline",
color: 'darkred',// #6A0888 //dunkel lila
visible: true,
marker: {
enabled: false
},
data: [<?php echo join($maxtemp200, ',') ?>],
tooltip: {
valueSuffix: ' °C'
}
},
{ // 2. Serie
//id: 1,
//zindex: 1,
name: 'Temperatur Avg',
yaxis: 0,
type: "spline",
color: 'red',
visible: false,
marker: {enabled: false},
data: [<?php echo join($avgtemp200, ',') ?>],
tooltip: {valueSuffix: ' °C'}
},
{ // 3. Serie
//id: 1,
//zindex: 1,
name: 'Temperatur Min',
yaxis: 0,
type: "spline",
color: 'orange',
visible: false,
marker: {enabled: false},
data: [<?php echo join($mintemp200, ',') ?>],
tooltip: {valueSuffix: ' °C'}
},
{ // 4. Serie
name: 'Wind Max',
yAxis: 1,
type: "spline",
color: 'grey',
visible: false,
marker: {enabled: false},
data: [<?php echo join($MaxHiSpeed, ',') ?>],
tooltip: {valueSuffix: ' Km/h'}
},
{ // 5. Serie
name: 'Wind Avg',
yAxis: 1,
type: "spline",
color: 'grey',
visible: false,
marker: {enabled: false},
data: [<?php echo join($AVGWindSpeed, ',') ?>],
tooltip: {valueSuffix: ' Km/h'}
},
]// ende Series
}
);
});
</script>
<!-- Ende HighCharts ------------------------------------------------------------------->
<div id="container2" style=" height: 600px; margin-left: 0"></div>
</body>
</html>