Nella cartella “custom” bisogna creare il file e la cartella:
- custom /home.php
- custom/purpleair/pourplair-sql.php
creiamo il file home.php inserendo il codice seguente:
<?php
############################################################################
# Meteotemplate
# http://www.meteotemplate.com
# Free website template for weather enthusiasts
# Author: Jachym
# Brno, Czech Republic
# First release: 2015
#
############################################################################
#
# Blank Page
#
# Template for blank page
#
############################################################################
include("../config.php");
include($baseURL."css/design.php");
//include($baseURL."header.php");
?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo $pageName?></title>
</style>
</head>
<body>
<div id="main_top">
</div>
<div id="main">
<div class="textDiv">
<?php
$queryA = $_GET['query'];
//$pisolo = date ("d m Y");
if ($queryA == True)
{$query = $_GET['query'];
}
else { $query = date ("d m Y");
}
?>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker({
//Consistent format with the HTML5 picker
//dateFormat: 'yy-mm-dd'
//numberOfMonths : [2,3],
dateFormat: 'dd mm yy',
});
$( "#datepicker" ).datepicker("show");
} );
</script>
<h4 style="color:#fff;">
Per visualizzare l'archivio bisogna selezionare la data dal calendario, premere 'Ricerca....'</h4>
<form action="" method="GET" style=" height:70px;">
<input type="text" id="datepicker" name="query" placeholder="Apri calendario"/>
<input type="submit" value="Ricerca" />
</form>
<!-- ****************************************************************************************************************************-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'PM 2.5','PM 10' ],
<?php include ('purpleair/pourplair-sql.php') ; ?>
]);
var options = {
title: 'Air Quality PM2.5 AQI date: <?php echo $row['date_format'];?> ',
legend: { position: 'bottom' } ,
is3D:true,
FontSize:7,
backgroundColor: '#E4E4E4',
colors: ['#5c3292' , '#FF6600'],
};
var chart = new google.visualization.LineChart(document.getElementById('pm2.5curve_chart'));
chart.draw(data, options);
}
</script>
<div id="pm2.5curve_chart" style="width: 100%; height: 300px"></div>
</div>
</div>creiamo la cartella purpleair e dentro creiamo il file pourplair-sql.php inserendo il codice seguente:
<?php
$hostname="xxxxxxxxxxxxx";
$username="xxxxxxxxxxxxx";
$password="xxxxxxxxxxxxx";
$db = "xxxxxxxxxxxxx";
$dbh = new PDO("mysql:host=$hostname;dbname=$db", $username, $password);
foreach($dbh->query("SELECT *, date_format(Date_Time, '%d %m %Y') date_format, date_format(Date_Time, '%H:%i') date_format2
FROM purpleair WHERE date_format(Date_Time, '%d %m %Y')='".$query."' ") as $row) {
echo "['". $row['date_format2'] ."'," . $row['Valore'] . "," . $row['pm10'] . "]," ;
?>
<?php
}
?> 