Estoy intentando mostrar en una gráfica animada un valor que estoy leyendo constantemente de la base de datos MySQL (El valor son revoluciones por minuto de una maquina). El problema es, la gráfica con funciones random funciona correctamente, ahora estoy intentando pasarle el valor de la base de datos pero no se refresca, se queda fijo.
Por un lado tengo la consulta con PHP a MySQL dentro de un DIV que se refresca cada segundo, y lo almaceno en el valor de un input oculto:
<script type="text/javascript">
setInterval("my_function88();",1000);
function my_function88(){
$('#refresh88').load(location.href + ' #time88');
}
</script>
<div id="time88">
<div id="refresh88">
<?php
$sql = mysqli_query($conexion,"SELECT RPM AS ULTIMRPM FROM actual");
$rowRPM = mysqli_fetch_assoc($sql);
$RPMactual=$rowRPM['ULTIMRPM'];
?>
<input id='RPPM' type='hidden' value='<?=$RPMactual?>' />
</div>
</div>
El script de la grafica (en jQuery) es el siguiente:
<script>
$(function() {
// we use an inline data source in the example, usually data would
// be fetched from a server
// ==============================================================
// Real Time Visits
// ==============================================================
var data = [5, 10, 15, 20, 15, 30, 40],
totalPoints = 350;
function getRandomData() {
if (data.length > 0) data = data.slice(1);
// Do a random walk
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : 10,
y = $('#RPPM').val();
data.push($('#RPPM').val());
}
// Zip the generated y values with the x values
var res = [];
for (var i = 0; i < data.length; ++i) {
res.push([i, data[$('#RPPM').val()]])
}
return res;
}
// Set up the control widget
var updateInterval = 1000;
$("#updateInterval").val(updateInterval).change(function() {
var v = $(this).val();
if (v && !isNaN(+v)) {
updateInterval = +v;
if (updateInterval < 1) {
updateInterval = 1;
} else if (updateInterval > 1000) {
updateInterval = 1000;
}
$(this).val("" + updateInterval);
}
});
var plot = $.plot("#real-time", [getRandomData()], {
series: {
shadowSize: 1, // Drawing is faster without shadows
lines: { fill: true, fillColor: 'transparent' },
},
yaxis: {
min: 0,
max: 350,
show: true
},
xaxis: {
show: false
},
colors: ["#488c13"],
grid: {
color: "#AFAFAF",
hoverable: true,
borderWidth: 0,
backgroundColor: 'transparent'
},
tooltip: true,
tooltipOpts: {
content: "Visits: <?php echo $RPMactual?>",
defaultTheme: false
}
});
window.onresize = function(event) {
$.plot($("#real-time"), [getRandomData()]);
}
function update() {
plot.setData([getRandomData()]);
// Since the axes don't change, we don't need to call plot.setupGrid()
plot.draw();
setTimeout(update, updateInterval);
}
console.log("document ready");
var offset = 0;
plot1();
function plot1() {
var sin = []
, cos = [];
for (var i = 0; i < 12; i += 0.2) {
sin.push([i, Math.sin(i + offset)]);
cos.push([i, Math.cos(i + offset)]);
}
var options = {
series: {
lines: {
show: true
}
, points: {
show: true
}
}
, grid: {
hoverable: true //IMPORTANT! this is needed for tooltip to work
}
, yaxis: {
min: -1.2
, max: 1.2
}
, colors: ["#ee7951", "#4fb9f0"]
, grid: {
color: "#AFAFAF"
, hoverable: true
, borderWidth: 0
, backgroundColor: '#FFF'
}
, tooltip: true
, tooltipOpts: {
content: "'%s' of %x.1 is %y.4"
, shifts: {
x: -60
, y: 25
}
}
};
var plotObj = $.plot($("#flot-line-chart"), [{
data: sin
, label: "sin(x)"
, }, {
data: cos
, label: "cos(x)"
}], options);
}
});
</script>
Donde le paso el valor del input con ID "RPPM", el cual se refresca cada segundo en el DIV.
Gracias de antemano.
Un saludo.
////////EDITO\\\\
Ahora uso AJAX para consultar el valor constantemente, lo almaceno en el valor de un input e intento pasarselo al script de la gráfica y esta vez ni me muestra la linea:
<script type="text/javascript">
function getTimeAJAX() {
//GUARDAMOS EN UNA VARIABLE EL RESULTADO DE LA CONSULTA AJAX
var time = $.ajax({
url: 'scripts/RPM.php', //indicamos la ruta donde se genera la hora
dataType: 'text',//indicamos que es de tipo texto plano
async: false //ponemos el parámetro asyn a falso
}).responseText;
//actualizamos el div que nos mostrará la hora actual
document.getElementById("myWatch").value = time;
}
//con esta funcion llamamos a la función getTimeAJAX cada segundo para actualizar el div que mostrará la hora
setInterval(getTimeAJAX,1000);
</script>
<script>
$(function() {
// we use an inline data source in the example, usually data would
// be fetched from a server
// ==============================================================
// Real Time Visits
// ==============================================================
var data = [5, 10, 15, 20, 15, 30, 40],
totalPoints = 350;
function getRandomData() {
if (data.length > 0) data = data.slice(1);
// Do a random walk
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : 10,
y = $('#myWatch').val();
data.push($('#myWatch').val());
}
// Zip the generated y values with the x values
var res = [];
for (var i = 0; i < data.length; ++i) {
res.push([i, data[$('#myWatch').val()]])
}
return res;
}
// Set up the control widget
var updateInterval = 1000;
$("#updateInterval").val(updateInterval).change(function() {
var v = $(this).val();
if (v && !isNaN(+v)) {
updateInterval = +v;
if (updateInterval < 1) {
updateInterval = 1;
} else if (updateInterval > 1000) {
updateInterval = 1000;
}
$(this).val("" + updateInterval);
}
});
var plot = $.plot("#real-time", [getRandomData()], {
series: {
shadowSize: 1, // Drawing is faster without shadows
lines: { fill: true, fillColor: 'transparent' },
},
yaxis: {
min: 0,
max: 350,
show: true
},
xaxis: {
show: false
},
colors: ["#488c13"],
grid: {
color: "#AFAFAF",
hoverable: true,
borderWidth: 0,
backgroundColor: 'transparent'
},
tooltip: true,
tooltipOpts: {
content: "Visits: <?php echo $RPMactual?>",
defaultTheme: false
}
});
window.onresize = function(event) {
$.plot($("#real-time"), [getRandomData()]);
}
function update() {
plot.setData([getRandomData()]);
// Since the axes don't change, we don't need to call plot.setupGrid()
plot.draw();
setTimeout(update, updateInterval);
}
console.log("document ready");
var offset = 0;
plot1();
function plot1() {
var sin = []
, cos = [];
for (var i = 0; i < 12; i += 0.2) {
sin.push([i, Math.sin(i + offset)]);
cos.push([i, Math.cos(i + offset)]);
}
var options = {
series: {
lines: {
show: true
}
, points: {
show: true
}
}
, grid: {
hoverable: true //IMPORTANT! this is needed for tooltip to work
}
, yaxis: {
min: -1.2
, max: 1.2
}
, colors: ["#ee7951", "#4fb9f0"]
, grid: {
color: "#AFAFAF"
, hoverable: true
, borderWidth: 0
, backgroundColor: '#FFF'
}
, tooltip: true
, tooltipOpts: {
content: "'%s' of %x.1 is %y.4"
, shifts: {
x: -60
, y: 25
}
}
};
var plotObj = $.plot($("#flot-line-chart"), [{
data: sin
, label: "sin(x)"
, }, {
data: cos
, label: "cos(x)"
}], options);
}
});
</script>