<?php require("database.php"); ?>
<html>
<head>
	<meta charset="utf-8" />
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/highcharts.js"></script>
	<script type="text/javascript" src="js/grid.js"></script>
</head>

<body>

<?php

$db->exec('USE texier');

try {
$bdd = $db->query('SELECT max(dateT) from data');
} catch (PDOException $e) {
    print "Erreur SQL !";
    die();
}
$list=$bdd->fetch();

$stop=$list[0];
$start=$stop-(86400*2);

$bdd = $db->query("SELECT dateT, tempExt, humidExt  FROM data WHERE dateT >= '".$start."' and  dateT <= '".$stop."' ORDER BY dateT");
$i=0;
while ($list = $bdd->fetch(PDO::FETCH_ASSOC)) {
if (date("I",time()) == 0) { 
    $time[$i]=($list['dateT']+3600)*1000;
    }
else {
    $time[$i]=($list['dateT']+7200)*1000;
  }

$tempExt[$i]=$list['tempExt']*1;
$humidExt[$i]=$list['humidExt']*1;
$i++;
}
 $bdd = null;
  ?>

<script type="text/javascript">
eval(<?php echo  "'var dateT =  ".json_encode($time)."'" ?>);
eval(<?php echo  "'var tempExt =  ".json_encode($tempExt)."'" ?>);
eval(<?php echo  "'var humidExt =  ".json_encode($humidExt)."'" ?>);
</script>

	<script type="text/javascript">

	function comArr(unitsArray) {
        var outarr = [];
        for (var i = 0; i < dateT.length; i++) {
         outarr[i] = [dateT[i], unitsArray[i]];
        }
      return outarr;
    }
</script>
<script type="text/javascript">
$(function () {

		Highcharts.setOptions({
		    lang: {
		        months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
		            'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
		        weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
		        shortMonths: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil','Août', 'Sept', 'Oct', 'Nov', 'Déc'],
		            decimalPoint: ',',
		        resetZoom: 'Ré-initialiser zoom',
		            resetZoomTitle: 'Ré-initialiser zoom à 1:1',
		            downloadPNG: "Télécharger au format PNG image",
		            downloadJPEG: "Télécharger au format JPEG image",
		            downloadPDF: "Télécharger au format PDF document",
		            downloadSVG: "Télécharger au format SVG vector image",
		            exportButtonTitle: "Exporter image ou document",
		            printChart: "Imprimer le graphique",
		            loading: "Chargement...",
		        rangeSelectorFrom: 'Du',
		        rangeSelectorTo: 'au'
		    }
		});


        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'graphique',
                zoomType: 'x',
                type: 'spline',
                marginBottom: 70,
                marginLeft: 80,
                defaultSeriesType: "spline",
                alignTicks: false,
                plotShadow: true,
                plotBorderColor: '#346691',
                plotBorderWidth: 1,
                backgroundColor: {
                linearGradient: [0, 0, 600, 600],
                stops: [
                    [0, 'rgb(162, 192, 216)'],
                    [1, 'rgb(255, 255, 255)']
                ]
            },
            },

            credits: {
            text: '© Texier Baptiste',
            href: ''
            },

            title: {
                text: 'Température',
                x:  -20
            },
            subtitle: {
                text: 'Source : Météo',
                align: 'center',
                x: -20
            },

         	xAxis: {
         		type: 'datetime',
         		startOnTick: false,
         	},
         	yAxis: {
                title: {
                    text: 'Température (°C)'
                },
                plotLines: [{
                	value: 0,
                	width: 1,
                	color: '#FF0000'
                }]
            },
            tooltip: {
                crosshairs:[true],
                borderColor: '#4b85b7',
                shared: true,
                backgroundColor: '#edf1c8',
                formatter: function() {
                var s = '<b>'+ Highcharts.dateFormat('%e %B à %H:%M', this.x) +'</b>';
                $.each(this.points, function(i, point) {
                var unit = {
                       'Température': ' °C',
                       'Humidité': ' %'
                    }[this.point.series.name];
                    s = s + '<br>' + '<span style="color:'+ point.series.color +'"></span>'+ point.series.name +  '<b> : '+Highcharts.numberFormat(point.y,1,","," ")+ '</b>' + unit;
                });
                return s;
            },
            },
            series: [
            {
                name: 'Température',
                zIndex: 1,
                color: '#FF0000',
                data: comArr(tempExt)
            },
            {
                name: 'Humidité',
                color: '#BD005C',
                dashStyle: 'ShortDash',
                data: comArr(humidExt)
            }
              ]
        })
    });

	</script>
	<br>
	<center>
		<h1>TP Texier</h1>
	</center>
	<br>
	<div id="graphique" style="width: 550px; height:300px; margin: 0 auto;"></div>
</body>
</html>