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

14 comentarios:

  1. Carlos1 de diciembre de 2017, 4:05

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

    ResponderEliminar
  2. Ale2 de diciembre de 2017, 2:22

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

    ResponderEliminar
  3. Unknown27 de diciembre de 2017, 19:26

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

    ResponderEliminar
    Respuestas
    1. Ale28 de diciembre de 2017, 11:20

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

      Eliminar
  4. Unknown23 de octubre de 2018, 13:46

    Buenas tardes, usted tiene algún trabajo sobre el sensor PIR HC SR-501? Agradezco y espero.

    ResponderEliminar
  5. Ale23 de octubre de 2018, 16:02

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

    ResponderEliminar
  6. Luisda13 de noviembre de 2018, 13:44

    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. Luisda17 de noviembre de 2018, 11:06

    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
  8. Ale2 de enero de 2019, 3:50

    Hola Aaron, con la información que me das es imposible saber done puede estar el problema. Yo te recomendaría que reveas todo. Saludos.

    ResponderEliminar
  9. anonimous22 de julio de 2019, 21:47

    Me está sucediendo lo mismo me gustaría saber si pudo resolver el problema y como?

    ResponderEliminar
  10. Diego Ch5 de enero de 2020, 13:40

    A muchos no les esta generando la respuesta posiblemente debido a que en el respuesta.php, en la linea:
    script src="js/jquery.min.js"
    debería decir:
    script src="js/jquery-3.2.1.min.js"
    Saludos.

    ResponderEliminar
  11. Hector10 de junio de 2021, 16:55

    No puedo descargar los archivos .js ayuda :(

    ResponderEliminar
  12. FernandoSarto17 de julio de 2021, 6:44

    Muy capo!! Lo complicado lo haces simple. Gracias por los aportes

    ResponderEliminar

Suscribirse a: Enviar comentarios (Atom)