domingo, 16 de julio de 2017

Tutorial #10 ESP8266 - MySQL + PHP + Gráfico con Highcharts

Este tutorial sobre IOT (internet de las cosas) es una continuación del número 6 (ESP8266 + MySQL + PHP en Servidor Local). En el video explico cómo graficar las temperaturas grabadas en la base de datos valiéndome de un gráfico de Highcharts.


http://www.sinaptec.alomar.com.ar/2017/06/tutorial-6-esp8266-mysql-php-en.html


consulta.php:

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Monitoreo INGESER</title>
</head>
<body>
<?php
$conexion = mysql_connect("localhost", "root", "root");
mysql_select_db("tutorial", $conexion);
mysql_query("SET NAMES 'utf8'");

$resultado = mysql_query("SELECT DISTINCT `chipId` FROM `tabla` WHERE 1");

?>
<form action="respuesta.php" method="POST">
  <select name="chipId">
  <?php
    while ($row=mysql_fetch_array($resultado))
      {
       echo "<option>";
        echo $row[0];
        echo "</option>";
      }
    mysql_close();
  ?>
  </select><br>
  <input type="date" name="fecha" ><br>
  <input type="submit" name="Enviar" >
</form>
</body> 
</html>

respuesta.php:

<!DOCTYPE html>
<html>
<head>
 <title>Respuesta MySQL</title>
 <meta charset="UTF-8">
</head>
<body>
<?php

$conexion = mysql_connect("localhost", "root", "root");
mysql_select_db("tutorial", $conexion);
mysql_query("SET NAMES 'utf8'");

function temperatura_diaria ($chipId,$ano,$mes,$dia) {

 $resultado=mysql_query("SELECT UNIX_TIMESTAMP(fecha), temperatura FROM tabla WHERE year(`fecha`) = '$ano' AND month(`fecha`) = '$mes' AND day(`fecha`) = '$dia' AND `chipId`= '$chipId'");

 while ($row=mysql_fetch_array($resultado))
 {
  echo "[";
  echo ($row[0]*1000)-10800000; //le resto 3 horas = 10800000 mill
  echo ",";
  echo $row[1];
  echo "],";
 }
}
?>

<div id="container1" style="width: 100%; height: 400px;"></div>

<script src="js/jquery.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>

<script>
$(function () {
    $('#container1').highcharts({
        chart: {
            type: 'line',
            zoomType: 'x'
        },
        colors: ['#337ab7', '#cc3c1a'],
        title: {
            text: 'Temperatura'
        },
        xAxis: {
             type: 'datetime',         
        },
        yAxis: {
            title: {
                text: 'Temperatura'
            }
        },
      
        series: [{
            name: 'Temp',
            data: [<?php
                $chipId = $_POST ['chipId'];
                $fecha = $_POST ['fecha'];
                $ano = substr("$fecha", 0, 4); // 2017/07/16
                $mes = substr("$fecha", 5, 2);
                $dia = substr("$fecha", 8, 2);
                temperatura_diaria($chipId, $ano , $mes, $dia);
             ?>   
        ]},   
    ],
    });
});
</script>
</body>
</html>

https://www.highcharts.com
https://code.highcharts.com/highcharts.js
https://code.highcharts.com/modules/exporting.js
https://code.jquery.com/jquery-3.2.1.min.js

4 comentarios:

  1. Amigo muchísimas gracias por compartir tus conocimientos con quienes no podemos costear costosos cursos.... te deseo lo mejor

    ResponderEliminar
  2. Muchas gracias por el comentario Carlos. Saludos desde Buenos Aires.

    ResponderEliminar
  3. Estimado, muy buen aporte, muchas gracias por compartir tu conocimiento. Que sigas adelante, muchos éxitos !! Saludos desde Perú.

    ResponderEliminar
    Respuestas
    1. Muchas gracias por el comentario. Que tengas un excelente año. Saludos desde Buenos Aires.

      Eliminar