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: 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: