<html>
<head>
</style>
<link href="../css/datepicker.css" rel="stylesheet">
<script src="../js/jquery-1.js"></script>
<script src="../js/jquery-custom.js"></script>
<script type="text/javascript">
jQuery(function($){
$.datepicker.regional['de'] = {clearText: 'löschen', clearStatus: 'aktuelles Datum löschen',
closeText: 'schließen', closeStatus: 'ohne Änderungen schließen',
prevText: '<zurück', prevStatus: 'letzten Monat zeigen',
nextText: 'Vor>', nextStatus: 'nächsten Monat zeigen',
currentText: 'heute', currentStatus: '',
monthNames: ['Januar','Februar','März','April','Mai','Juni',
'Juli','August','September','Oktober','November','Dezember'],
monthNamesShort: ['Januar','Februar','März','April','Mai','Juni',
'Juli','August','September','Oktober','November','Dezember'],
monthStatus: 'anderen Monat anzeigen', yearStatus: 'anderes Jahr anzeigen',
weekHeader: 'Wo', weekStatus: 'Woche des Monats',
dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
dayStatus: 'Setze DD als ersten Wochentag', dateStatus: 'Wähle D, M d',
dateFormat: 'dd.mm.yy', firstDay: 1,
initStatus: 'Wähle ein Datum', isRTL: false};
$.datepicker.setDefaults($.datepicker.regional['de']);
});
$(function(){
var pickerOpts = {
maxDate: "+0",
minDate: new Date(2014, 1 - 1, 1),
dateFormat: "yy-mm-dd",
showOtherMonths: true
};
$("#datepick").datepicker(pickerOpts);
});
</script>
<script src="../js/amcharts.js" type="text/javascript"></script>
<script type="text/javascript">
var chart;
var chartData = [
<?php
include("../db1.php");
$tableName = "wettertabelle";
$param_datum = $_GET["datum"];
$query = "SELECT dateid, date, time, temp, feucht, luftdruck, SUM(regen), wind, winddir, windb, windchill, uv, solar, SUM(sonne), sonnetag, nullg FROM $tableName WHERE date = '$param_datum' GROUP BY dateid ORDER BY dateid ";
$result = mysql_query($query);
$linecounter = 1;
$regenmesser = 0;
$sonnesum = 0;
while($row = mysql_fetch_array($result))
{
$DATETOSPLIT = $row['date'];
$TIMETOSPLIT = $row['time'];
list ($jahr, $monat, $tag) = split('[/.-]', $DATETOSPLIT);
list ($stunde, $minute) = split('[:]', $TIMETOSPLIT);
$regenmesser = $regenmesser + $row['SUM(regen)'];
$sonnesum = $sonnesum + $row['SUM(sonne)'];
$monat = $monat -1;
if ($linecounter == 1){
echo "{date: new Date($jahr, $monat, $tag, $stunde, $minute, 0, 0), val1:".$row['temp'].", val5:".$row['feucht'].", val9:".$row['luftdruck'].", val13:".$regenmesser.", val14:".$row['wind'].", val17:".$row['winddir'].", val19:".$row['windb'].", val20:".$row['windchill'].", val21:".$row['uv'].", val22:".$row['solar'].", val23:".$sonnesum.", val24:".$row['sonnetag'].", val25:".$row['nullg']."}";
}
else{
echo ",\n{date: new Date($jahr, $monat, $tag, $stunde, $minute, 0, 0), val1:".$row['temp'].", val5:".$row['feucht'].", val9:".$row['luftdruck'].", val13:".$regenmesser.", val14:".$row['wind'].", val17:".$row['winddir'].", val19:".$row['windb'].", val20:".$row['windchill'].", val21:".$row['uv'].", val22:".$row['solar'].", val23:".$sonnesum.", val24:".$row['sonnetag'].", val25:".$row['nullg']."}";
}
$linecounter++;
}
?>
];
AmCharts.ready(function () {
// NEW SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "../gif/";
chart.marginRight = 0;
chart.marginTop = -20;
chart.fontSize = 12;
chart.startDuration = 0.3;
chart.zoomOutButton = {
backgroundColor: "#000000",
backgroundAlpha: 0.15
};
chart.dataProvider = chartData;
chart.categoryField = "date";
// AXES CATEGORY
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true;
categoryAxis.position = "top";
categoryAxis.minPeriod = "mm";
categoryAxis.gridAlpha = 0.3;
categoryAxis.gridPosition = "middle";
categoryAxis.axisColor = "#000000";
// AXES VALUES
// Sonnetag value axis
var valueAxisSonnetag = new AmCharts.ValueAxis();
valueAxisSonnetag.offset = 192;
valueAxisSonnetag.minMaxMultiplier = 1.2;
valueAxisSonnetag.position = "right";
valueAxisSonnetag.fontSize = 9;
valueAxisSonnetag.axisColor = "#FFFF00";
valueAxisSonnetag.color = "#000000";
valueAxisSonnetag.gridAlpha = 0;
valueAxisSonnetag.integersOnly = true;
valueAxisSonnetag.gridCount = 3;
chart.addValueAxis(valueAxisSonnetag);
// Sonne value axis
var valueAxisSonne = new AmCharts.ValueAxis();
valueAxisSonne.offset = 167;
valueAxisSonne.minMaxMultiplier = 1.2;
valueAxisSonne.minimum = 0;
valueAxisSonne.position = "right";
valueAxisSonne.fontSize = 9;
valueAxisSonne.axisColor = "#EEE906";
valueAxisSonne.color = "#000000";
valueAxisSonne.gridAlpha = 0;
valueAxisSonne.integersOnly = true;
valueAxisSonne.gridCount = 3;
chart.addValueAxis(valueAxisSonne);
// Solar value axis
var valueAxisSolar = new AmCharts.ValueAxis();
valueAxisSolar.offset = 80;
valueAxisSolar.minMaxMultiplier = 1.2;
valueAxisSolar.minimum = 0;
valueAxisSolar.position = "right";
valueAxisSolar.fontSize = 9;
valueAxisSolar.axisColor = "#FA1FF4";
valueAxisSolar.color = "#000000";
valueAxisSolar.gridAlpha = 0;
valueAxisSolar.integersOnly = true;
valueAxisSolar.gridCount = 3;
chart.addValueAxis(valueAxisSolar);
// Uv value axis
var valueAxisUv = new AmCharts.ValueAxis();
valueAxisUv.offset = 108;
valueAxisUv.minMaxMultiplier = 1.2;
valueAxisUv.minimum = 0;
valueAxisUv.position = "right";
valueAxisUv.fontSize = 9;
valueAxisUv.axisColor = "#FF9866";
valueAxisUv.color = "#000000";
valueAxisUv.gridAlpha = 0;
valueAxisUv.integersOnly = true;
valueAxisUv.gridCount = 3;
chart.addValueAxis(valueAxisUv);
// Nullg value axis
var valueAxisNullg = new AmCharts.ValueAxis();
valueAxisNullg.offset = 93;
valueAxisNullg.minMaxMultiplier = 1.2;
valueAxisNullg.position = "left";
valueAxisNullg.fontSize = 9;
valueAxisNullg.axisColor = "#999999";
valueAxisNullg.color = "#000000";
valueAxisNullg.gridAlpha = 0;
valueAxisNullg.integersOnly = true;
valueAxisNullg.gridCount = 3;
chart.addValueAxis(valueAxisNullg);
// Rain value axis
var valueAxisRain = new AmCharts.ValueAxis();
valueAxisRain.offset = 64;
valueAxisRain.minMaxMultiplier = 1.2;
valueAxisRain.minimum = 0;
valueAxisRain.position = "left";
valueAxisRain.fontSize = 9;
valueAxisRain.axisColor = "#0033FF";
valueAxisRain.color = "#000000";
valueAxisRain.gridAlpha = 0;
valueAxisRain.integersOnly = true;
valueAxisRain.gridCount = 3;
chart.addValueAxis(valueAxisRain);
// Luftdruck value axis
var valueAxisLuftdruck = new AmCharts.ValueAxis();
valueAxisLuftdruck.offset = 32;
valueAxisLuftdruck.minMaxMultiplier = 1.2;
valueAxisLuftdruck.position = "right";
valueAxisLuftdruck.fontSize = 9;
valueAxisLuftdruck.axisColor = "#808040";
valueAxisLuftdruck.color = "#000000";
valueAxisLuftdruck.gridAlpha = 0;
valueAxisLuftdruck.integersOnly = true;
valueAxisLuftdruck.gridCount = 3;
chart.addValueAxis(valueAxisLuftdruck);
// Winddir value axis
var valueAxisWinddir = new AmCharts.ValueAxis();
valueAxisWinddir.offset = 1;
valueAxisWinddir.maximum = 360;
valueAxisWinddir.minimum = 0;
valueAxisWinddir.position = "left";
valueAxisWinddir.fontSize = 1;
valueAxisWinddir.axisColor = "#FFFFFF";
valueAxisWinddir.color = "#FFFFFF";
valueAxisWinddir.gridAlpha = 0;
valueAxisWinddir.integersOnly = true;
valueAxisWinddir.gridCount = 3;
chart.addValueAxis(valueAxisWinddir);
// Wind value axis
var valueAxisWind = new AmCharts.ValueAxis();
valueAxisWind.offset = 2;
valueAxisWind.minMaxMultiplier = 1.2;
valueAxisWind.minimum = 0;
valueAxisWind.position = "right";
valueAxisWind.fontSize = 9;
valueAxisWind.axisColor = "#006600";
valueAxisWind.color = "#000000";
valueAxisWind.gridAlpha = 0;
valueAxisWind.integersOnly = true;
valueAxisWind.gridCount = 3;
chart.addValueAxis(valueAxisWind);
// Feucht value axis
var valueAxisFeucht = new AmCharts.ValueAxis();
valueAxisFeucht.offset = 26;
valueAxisFeucht.maximum = 100;
valueAxisFeucht.minimum = 0;
valueAxisFeucht.position = "left";
valueAxisFeucht.fontSize = 9;
valueAxisFeucht.axisColor = "#75E3FF";
valueAxisFeucht.color = "#000000";
valueAxisFeucht.gridAlpha = 0;
valueAxisFeucht.integersOnly = true;
valueAxisFeucht.gridCount = 3;
chart.addValueAxis(valueAxisFeucht);
// temp value axis
var valueAxisTemp = new AmCharts.ValueAxis();
valueAxisTemp.offset = -1;
valueAxisTemp.minMaxMultiplier = 1.2;
valueAxisTemp.position = "left";
valueAxisTemp.fontSize = 9;
valueAxisTemp.axisColor = "#FF0000";
valueAxisTemp.color = "#000000";
valueAxisTemp.fillAlpha = 0.4;
valueAxisTemp.fillColor = "#F2F2F2";
valueAxisTemp.gridAlpha = 0;
valueAxisTemp.integersOnly = true;
valueAxisTemp.gridCount = 3;
chart.addValueAxis(valueAxisTemp);
// GRAPHS --------------------------------------------------
// GRAPH Sonnetag
var graphSonnetag = new AmCharts.AmGraph();
graphSonnetag.valueAxis = valueAxisSonnetag;
graphSonnetag.type = "line";
graphSonnetag.title = "Sonnenschein h/Tag";
graphSonnetag.valueField = "val24";
graphSonnetag.lineThickness = 1.4;
graphSonnetag.balloonText = "[[val24]] h/Tag]";
graphSonnetag.lineAlpha = 1;
graphSonnetag.lineColor = "#FFFF00";
graphSonnetag.fillAlphas = 0;
chart.addGraph(graphSonnetag);
// GRAPH Sonne
var graphSonne = new AmCharts.AmGraph();
graphSonne.valueAxis = valueAxisSonne;
graphSonne.type = "line";
graphSonne.title = "Sonnenschein min.";
graphSonne.valueField = "val23";
graphSonne.lineThickness = 1.4;
graphSonne.balloonText = "[[val23]] min.";
graphSonne.lineAlpha = 1;
graphSonne.lineColor = "#EEE906";
graphSonne.fillAlphas = 0;
chart.addGraph(graphSonne);
// GRAPH Solar
var graphSolar = new AmCharts.AmGraph();
graphSolar.valueAxis = valueAxisSolar;
graphSolar.type = "line";
graphSolar.title = "Solar w/m2";
graphSolar.valueField = "val22";
graphSolar.lineThickness = 1.4;
graphSolar.balloonText = "[[val22]] w/m2";
graphSolar.lineAlpha = 1;
graphSolar.lineColor = "#FA1FF4";
graphSolar.fillAlphas = 0;
chart.addGraph(graphSolar);
// GRAPH Uv
var graphUv = new AmCharts.AmGraph();
graphUv.valueAxis = valueAxisUv;
graphUv.type = "line";
graphUv.title = "UV";
graphUv.valueField = "val21";
graphUv.lineThickness = 1.4;
graphUv.balloonText = "[[val21]] UV";
graphUv.lineAlpha = 1;
graphUv.lineColor = "#FF9866";
graphUv.fillAlphas = 0;
chart.addGraph(graphUv);
// GRAPH Nullg
var graphNullg = new AmCharts.AmGraph();
graphNullg.valueAxis = valueAxisNullg;
graphNullg.type = "line";
graphNullg.title = "Schneefallgrenze M.ü.m";
graphNullg.valueField = "val25";
graphNullg.lineThickness = 1.4;
graphNullg.balloonText = "[[val25]] M.ü.m";
graphNullg.lineAlpha = 1;
graphNullg.lineColor = "#999999";
graphNullg.fillAlphas = 0;
chart.addGraph(graphNullg);
// GRAPH Rain
var graphRain = new AmCharts.AmGraph();
graphRain.valueAxis = valueAxisRain;
graphRain.type = "line";
graphRain.title = "Regen im Tag l/m";
graphRain.valueField = "val13";
graphRain.lineThickness = 1.4;
graphRain.balloonText = "[[val13]] l/m";
graphRain.lineAlpha = 1;
graphRain.lineColor = "#0033FF";
graphRain.fillAlphas = 0;
chart.addGraph(graphRain);
// GRAPH Luftdruck
var graphLuftdruck = new AmCharts.AmGraph();
graphLuftdruck.valueAxis = valueAxisLuftdruck;
graphLuftdruck.type = "line";
graphLuftdruck.title = "Luftdruck hPa ";
graphLuftdruck.valueField = "val9";
graphLuftdruck.lineThickness = 1.4;
graphLuftdruck.balloonText = "[[val9]] hPa ";
graphLuftdruck.lineAlpha = 1;
graphLuftdruck.lineColor = "#808040";
graphLuftdruck.fillAlphas = 0;
chart.addGraph(graphLuftdruck);
// GRAPH Winddir
var graphWinddir = new AmCharts.AmGraph();
graphWinddir.valueAxis = valueAxisWinddir;
graphWinddir.type = "line";
graphWinddir.title = "Windrichtung Dir";
graphWinddir.valueField = "val19";
graphWinddir.lineThickness = 1.4;
graphWinddir.balloonText = "[[val19]] ";
graphWinddir.lineAlpha = 1;
graphWinddir.lineColor = "#CC6699";
graphWinddir.fillAlphas = 0;
chart.addGraph(graphWinddir);
// GRAPH Windb
var graphWindb = new AmCharts.AmGraph();
graphWindb.valueAxis = valueAxisWind;
graphWindb.type = "line";
graphWindb.title = "Windböen km/h";
graphWindb.valueField = "val17";
graphWindb.lineThickness = 1.4;
graphWindb.balloonText = "[[val17]] km/h";
graphWindb.lineAlpha = 1;
graphWindb.lineColor = "#33FF00";
graphWindb.fillAlphas = 0;
chart.addGraph(graphWindb);
// GRAPH Wind
var graphWind = new AmCharts.AmGraph();
graphWind.valueAxis = valueAxisWind;
graphWind.type = "line";
graphWind.title = "Windgeschwindigkeit km/h";
graphWind.valueField = "val14";
graphWind.lineThickness = 1.4;
graphWind.balloonText = "[[val14]] km/h ";
graphWind.lineAlpha = 1;
graphWind.lineColor = "#006600";
graphWind.fillAlphas = 0;
chart.addGraph(graphWind);
// GRAPH Feucht
var graphFeucht = new AmCharts.AmGraph();
graphFeucht.valueAxis = valueAxisFeucht;
graphFeucht.type = "line";
graphFeucht.title = "Feuchtigkeit %";
graphFeucht.valueField = "val5";
graphFeucht.lineThickness = 1.4;
graphFeucht.balloonText = "[[val5]] %";
graphFeucht.lineAlpha = 1;
graphFeucht.lineColor = "#75E3FF";
graphFeucht.fillAlphas = 0;
chart.addGraph(graphFeucht);
// GRAPH Windchill
var graphWindchill = new AmCharts.AmGraph();
graphWindchill.valueAxis = valueAxisTemp;
graphWindchill.type = "line";
graphWindchill.title = "Windchilld C°";
graphWindchill.valueField = "val20";
graphWindchill.lineThickness = 1.4;
graphWindchill.balloonText = "[[val20]] C°";
graphWindchill.lineAlpha = 1;
graphWindchill.lineColor = "#33CC99";
graphWindchill.fillAlphas = 0;
chart.addGraph(graphWindchill);
// GRAPH Temp
var graphTemp = new AmCharts.AmGraph();
graphTemp.valueAxis = valueAxisTemp;
graphTemp.type = "line";
graphTemp.title = "Temperatur C°";
graphTemp.valueField = "val1";
graphTemp.lineThickness = 1.4;
graphTemp.balloonText = "[[val1]] C°";
graphTemp.lineAlpha = 1;
graphTemp.lineColor = "#FF0000";
graphTemp.fillAlphas = 0;
chart.addGraph(graphTemp);
// CURSOR -----------------------------------------
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorPosition = "mouse";
chartCursor.categoryBalloonDateFormat = "DD.MM.YYYY - JJ:NN";
chart.addChartCursor(chartCursor);
// LEGEND
var legend = new AmCharts.AmLegend();
legend.position = "top";
legend.reversedOrder = true;
legend.valueWidth = 40;
legend.switchType = "v";
legend.spacing = 5;
chart.addLegend(legend);
// WRITE
chart.write("wetterdiagramm");
});
// zoom (datenbereich verkleinen mit drag n drop)
function zoomChart() {
chart.zoomToIndexes(chartData.length - 40, chartData.length - 1);
}
// amcharts script ende
</script>
</head>
<body>
<div>
<form name="form1" method="get" action="datepicker.php">
<span><input type="text" name="datum" value="Tag Auswählen" id="datepick" /></span>
<input title="Sign In" onClick="imgClick('IEfix1',this.value)" value="Auswählen" src="../gif/pfeil.jpg" alt="[Sign In]" type="image" name="image">
</form>
</div>
<div id="wetterdiagramm" align="center" style="width:1300px; height:650px;"></div>
</body>
</html>
