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

9 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
  4. Buenas tardes, usted tiene algún trabajo sobre el sensor PIR HC SR-501? Agradezco y espero.

    ResponderEliminar
  5. Tengo un sensor PIR, nunca lo usé. Es una buena idea para un nuevo tutorial. Saludos.

    ResponderEliminar
  6. Amigo Muchas Gracias, sin tu ayuda no hubiera podido avanzar en un proyecto ya que solo se programar C, arduino y Java, con tu ayuda pude entender un poco php y el HTML. GRACIAS desde colombia

    ResponderEliminar
  7. hola tengo una duda, estoy usando mysqli asi que debo cambiar unos parametros, el caso es que la conexion a la BD me funciona pero los graficos con highcharts no me funcionan, la pantalla me sale en blanco, intente escribir el codigo aqui y el bloc no me deja

    ResponderEliminar