Buenas Tardes Amigos:
Estoy intentando crear un gráfico con valores en tiempo real tomados de una Base de datos. El script que estoy usando es de una libreria creada por Emprise Javascript Charts.
Al cargar la primera vez, el grafico muestra el valor real de la base de datos, sin embargo, no se actualiza cada vez que se recarga la funcion "
updateSeries" y el primer valor tomado de la tabla se mantiene, aunque en la tabla cambie.
Creo que el problema esta relacionado con que PHP no se puede ejecutar dentro de javascript, previendo esto, decidi crear las etiquetas javascript como si fueran un echo de PHP, como verán en el codigo que les envio.
Alguien podria ayudarme a detectar la causa de porque no se actualiza el grafico o a encontrar una mejor manera de hacerlo?...
Muchas Gracias de Antemano
Saludos
Código PHP:
<?php
include "opendb.php";
?>
<html>
<head>
<script type="text/javascript" src="dist/EJSChart.js"></script>
</head>
<body>
<div id="myChart" style="width:900px; height:330px;"></div>
<?php
echo "<script type='text/javascript'>
var chart = new EJSC.Chart('myChart',
{
show_legend: false,
show_messages: false,
axis_bottom: { caption: 'Timestamp', formatter: new EJSC.DateFormatter({ format_string: 'HH:NN:SS' }) },
axis_left: { caption: 'Random Value' },
allow_zoom: false
}
);
var myData = new Array();
// Populate array
var x = (new Date()).getTime() - 101000;
var y = <?php echo $pres_casing; ?>;
for (var i = 0; i < 100; i++) {
x += 1000;
y = Math.floor(Math.random() * 100);
myData.push([x, y]);
}
// Add a new line series and save a reference
var myLineSeries = chart.addSeries(new EJSC.LineSeries(
new EJSC.ArrayDataHandler( myData )
));
function updateSeries() {
// Remove the first element
myData.splice(0,1);
// x = current time
x = (new Date()).getTime();
// Generate another random Y value";
$query='SELECT p_casing FROM tab_pirital WHERE nombre = 'SBC_54' ORDER BY id DESC';
$result = pg_query($query);
while ($row = pg_fetch_assoc($result))
{
$p_casing = $row['p_casing'];
}
echo "y = $p_casing
// Append a new point
myData.push([x, y]);
// Give the new data to the ArrayDataHandler
myLineSeries.getDataHandler().setArray(myData);
// Reload the series
myLineSeries.reload();
}
// Run updateSeries() every second
window.setInterval(updateSeries, 1000);
</script>";
?>
</body>
</html>