Purpleair

Un grafico giornaliero, creando una tabella nel database con il nome "purpleair" , in una cartella creiamo il file “sql-home.php” per il collegamento al database e il file “home.php” per visualizzare il grafico, importante che i due file siano nella stessa cartella.

Creiamo la tabella per il database

CREATE TABLE IF NOT EXISTS `purpleair` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `Valore` varchar(50) NOT NULL,
  `pm10` varchar(50) NOT NULL,
  `Date_Time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  KEY `idx_Date_Time` (`Date_Time`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Creiamo collegamento il file sql-home.php al database

<?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
  }
  ?> 

Creiamo il file home.php

  			<?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 ('sql-home.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>

Author: martinezwebmaster

Lascia un commento

Il tuo indirizzo email non sarĂ  pubblicato. I campi obbligatori sono contrassegnati *