SINAPTEC: Tutorial #18 ESP8266 (Parte8) – MQTT - Graficar los datos de MySQL usando PHP y Highcharts

En el tutorial anterior de IOT (internet de las cosas) usando MQTT en un ESP8266; explique cómo guardar los datos de MQTT en MySQL usando un script de Python; en este video les explico cómo hacer una tabla con los topics y graficar la temperatura. Para realizar esto vamos a usar MySQL, PHP y Highcharts.

consulta.php:

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

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

?>
<form action="respuesta.php" method="POST">
  <select name="usuario">
  <?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 MySQLL - Tutorial 18</title>
    <meta charset="UTF-8">
</head>
<body>
<?php
$conexion = mysql_connect("localhost", "root", "root");
mysql_select_db("tutorial17", $conexion);
mysql_query("SET NAMES 'utf8'");

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

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

 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="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/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 
                $usuario = $_POST ['usuario'];
                $fecha = $_POST ['fecha'];
                $ano = substr("$fecha", 0, 4);
                $mes = substr("$fecha", 5, 2);
                $dia = substr("$fecha", 8, 2);
                temperatura_diaria($usuario, $ano , $mes, $dia);
                ?>     
        ]}, 
      
    ],
    });
});
</script>

<?php
function tablaDeTopics ($usuario,$ano,$mes,$dia) {
    
    $resultado=mysql_query("SELECT fecha, topic, mensaje FROM tabla WHERE year(`fecha`) = '$ano' AND month(`fecha`) = '$mes' AND day(`fecha`) = '$dia' AND `usuario`= '$usuario' AND `topic`!= 'temperatura'");

    echo "<table border='1'>";
    echo "<tr>";
    echo "<td>";
    echo "Fecha";
    echo "</td>";
    echo "<td>";
    echo "Topic";
    echo "</td>";
    echo "<td>";
    echo "Mensaje";
    echo "</td>";
    echo "</tr>";

    while ($row=mysql_fetch_array($resultado))
    {
        echo "<tr>";
        echo "<td>";
        echo $row[0];
        echo "</td>";
        echo "<td>";
        echo $row[1];
        echo "</td>";
        echo "<td>";
        echo $row[2];
        echo "</td>";
        echo "</tr>";
    }
    echo "</table>";
    mysql_close();
}
tablaDeTopics($usuario, $ano , $mes, $dia)
?>
</body>
</html>

domingo, 27 de agosto de 2017

Tutorial #18 ESP8266 (Parte8) – MQTT - Graficar los datos de MySQL usando PHP y Highcharts

No hay comentarios:

Publicar un comentario