Estoy tratando de hacer un gráfico de actualizacion en tiempo real con la libreria FLOT de javascript. Los datos los traigo desde un servidor y una base de datos POSTGRESQL de modo asincrónico con JQUERY, y la función $.get.
La idea es crear un array inicial que recupere 144 datos del servidor y los coloque de la siguiente manera:
[1355837403000,2170.95],[1355837103000,2169.82],[1355836802000,2184.19],
[1355836502000,2185.06],[1355836203000,2193.62],[1355835903000,2190.29]
Luego, actualizar cada 5 segundo conectandome al servidor y trayendo un solo par ordenado asi:
[1355837103000,2169.84]
El primer valor del par ordenado corresponde a Hora UNIX y el segundo valor es la variable del eje Y.
El archivo "param_pozos_linea1.php" se conecta al servidor y me trae los datos iniciales. A ese archivo le paso las variables ind y fil para que me traiga cada uno de los datos requeridos.
El archivo "param_pozos_linea2.php" se conecta al servidor y me trae el ultimo par (x,y) registrado únicamente.
Creo que todo lo estoy haciendo de manera correcta, sin embargo, no logro crear el gráfico. Alguno de ustedes podria echarle un vistazo a mi código de Javascript a ver si consigue algún error?
Muchas Gracias por toda la ayuda que me puedan brindar.
Código PHP:
<script type="text/javascript">
$(function () {
var data=[];
var data_inicial = [];
var data_actual = [];
var x= [];
var y= [];
totalPoints = 144;
// Esta funcion crea el vector de visualizacion inicial el cual consta de 144 puntos.
function data_init()
{
for(var i =0; i < totalPoints; ++i)
{
$.get("param_pozos_linea1.php", { ind: i, fil: 1 }, function(data1)
{
x.push(data1);
}
}
for(var i =0; i < totalPoints; ++i)
{
$.get("param_pozos_linea1.php", { ind: i, fil: 2 }, function(data2)
{
y.push(data2);
}
}
// Compongo el arreglo de datos
for (var i = 0; i < 20; ++i)
{
data_inicial.push([x[i], y[i]])
}
return data_inicial;
}
// Esta funcion actualiza el grafico cada 5 segundos.
function actualiza_data()
{
data_inicial = data_inicial.slice(1);
$.get("param_pozos_linea2.php", function(data2) {
data_inicial.push(data2); });
return data_inicial;
}
// control de velocidad de actualización
var updateInterval = 5000;
$("#updateInterval").val(updateInterval).change(function () {
var v = $(this).val();
if (v && !isNaN(+v)) {
updateInterval = +v;
if (updateInterval < 1)
updateInterval = 1;
$(this).val("" + updateInterval);
}
});
// Creo mi grafico
var options = {
series: { shadowSize: 0 },
yaxis: { min: 0, max: 100 },
xaxis: { mode: "time",tickLength: 5, timeformat: "%d/%m - %h:%M %p"}
};
var plot = $.plot($("#placeholder"), [ data_init() ], options);
// Esta funcion actualiza el gráfico
function update() {
plot.setData([ actualiza_data() ]);
plot.draw();
setTimeout(update, updateInterval);
}
update();
});
</script>
