0

Alguien podría ayudarme con la siguiente inquietud, tengo que graficar valores de una base de datos, ya he realizado la conexión y sé que se está ejecutando correctamente la consulta y la transformación de esa consulta en un archivo json, dicho esto, este es el código que toma los valores de la base de datos y los transforma en el archivo datos2.php:

<?php
header('Content-Type: application/json');
$host='localhost';
$dbname='bdd_embebidos';
$user='root';
$pass='';
$pdo=new PDO("mysql:dbname=$dbname;host=$host",$user,$pass);
switch($_GET['Consultar']){
// Buscar Último Dato
case 1:
$statement=$pdo->prepare("SELECT valor as y FROM sensor ORDER BY id DESC LIMIT 0,1");
$statement->execute();
$results=$statement->fetchAll(PDO::FETCH_ASSOC);
$json=json_encode($results);
echo $json;
    break; 
// Buscar Todos los datos
default:
$statement=$pdo->prepare("SELECT valor as y FROM sensor ORDER BY id ASC");
$statement->execute();
$results=$statement->fetchAll(PDO::FETCH_ASSOC);
$json=json_encode($results);
echo $json;
break;
}
?>

Como mencioné con anterioridad este archivo php me consulta a la base de datos y me trae los datos en formato json. Por otra parte este es el código que estoy utilizando para graficar los valores:

<!DOCTYPE html>
<html>
<head>
   <script src="jquery-3.4.1.min.js"></script>
   <script src="highcharts.js"></script>
   <script src="exporting.js"></script>
</head>
  <body>
     <div id="container" style="min-width: 310px; height: 400px; margin: 0     auto"></div>   

  <script>
$(function () {
$(document).ready(function () {
    var ultimox;
    var ultimoy;

    $.ajax({
            url: "datos2.php",
            type: 'get',
            success: function(DatosRecuperados) {
            $.each(DatosRecuperados, function(i,o){

                if (o.y) {DatosRecuperados[i].y = parseFloat(o.y);}
            });

            time = (new Date()).getTime()

            for (i = -19; i <= 0; i += 1){
                setx((time + i * 1000).x);
            }


            sety(DatosRecuperados[(DatosRecuperados.length)-1].y);

            $('#container').highcharts({
                chart:{
                        type: 'spline',
                        animation: Highcharts.svg,
                        marginRight: 10,
                        events: {load: function () {series = this.series[0];}}
                    },
                title:{text: 'Live random data'},
                xAxis:{tickPixelInterval: 150},
                yAxis:{title: {text: 'Value'},
                    plotLines: [{value: 0,width: 1,color: '#808080'}]
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                            Highcharts.numberFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                            Highcharts.numberFormat(this.y, 2);
                        }
                },
                legend: {
                    enabled: false
                },
                exporting: {
                    enabled: false
                },
                series: [{ name: 'Random data', data:DatosRecuperados}]
            });

    }});
});
      setInterval(function () {
            $.get( "datos2.php?Consultar=1", function( UltimosDatos ) {
                var varlocalx=(new Date()).getTime();
                var varlocaly=parseFloat(UltimosDatos[0].y);

             if((getx()!=varlocalx)&&(gety()!=varlocaly)){

                series.addPoint([varlocalx, varlocaly], true, true);
                setx(varlocalx);
                sety(varlocaly);
            }
       });}, 1000);

      function getx(){return ultimox;}
      function gety(){return ultimoy;}
      function setx(x){ultimox=x;}
      function sety(y){ultimoy=y;}
});
 </script>
 </body>

Pero al momento de ejecutar este código grafica pero no me actualiza en tiempo real, primero me sale una gráfica con todos los valores ingresados en la base de datos: Se cargan los valores de la base de datos normalmente Sin embargo, no se funciona los intervalos de tiempo que mando en el eje x, se queda estático, además cuando ingreso otro datos queda de la siguiente manera: La grafica se desfasa y sale de esa forma y no se actualiza correctamente con el valor que le envío desde la base de datos

2

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.