1

Muy buenas gente, tengo una grafica conectada a mi base de datos, en ella me muestra los valores en el eje Y, y el tiempo en el eje X, hasta el momento todo excelente, esta es mi grafica:

introducir la descripción de la imagen aquí

Como hacer para que sea una gráfica en línea, osea. E actualice automáticamente cada vez que ingreso datos a la base de datos

el html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" > </script>
<!-- Load the AJAX API -->
<script type="text/javascript" src="https://www.google.com/jsapi" > </script>

    <script type="text/javascript" src="https://www.google.com/jsapi?autoload={
    'modules':[{
    'name':'visualization',
    'version':'1',
    'packages':['corechart']
    }]
    }">

    </script>

<script type="text/javascript"> 
//llamamos a la función de carga de datos

</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" > </script>


<script type="text/javascript" src="https://www.google.com/jsapi" > </script>


    <script type="text/javascript" src="https://www.google.com/jsapi?autoload={
    'modules':[{
    'name':'visualization',
    'version':'1',
    'packages':['corechart']
    }]
    }"></script>

    <script type="text/javascript" src="grafico.js"></script>


</head>
<body>
<!-- en este div se visualizará la gráfica.-->



<div id="curve_chart" style="width: 1000px; height: 500px"></div>



</body>
</html>

el archivo js:

google.setOnLoadCallback(dibujaGrafica);


function dibujaGrafica() {

var data = $.ajax({
url: "cargaDatos.php",
dataType:"json",
async: false
}).responseText;

//para que se lea correctamente el array enviado por JSON usamos JSON.parse
var infoGraf = JSON.parse(data);

//Creamos y rellenamos la tabla de datos
var datoFinal = google.visualization.arrayToDataTable(infoGraf);

//en la parte de options puede personalizarse la gráfica, como títulos, colores...
var options = {
title: 'Grafica Valores',
curveType: 'function',
legend: { position: 'bottom' }
};


var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(datoFinal, options);
}

1 respuesta 1

2

Puede añadir una llamada a la función dibujaGrafica cada X segundos para que se actualice.

// setInterval(NombreFuncion, TiempoMilisegundos);
setInterval(dibujaGrafica, 3000);

Documentación setInterval()

Quedando algo así:

google.setOnLoadCallback(dibujaGrafica);


function dibujaGrafica() {

var data = $.ajax({
url: "cargaDatos.php",
dataType:"json",
async: false
}).responseText;

//para que se lea correctamente el array enviado por JSON usamos JSON.parse
var infoGraf = JSON.parse(data);

//Creamos y rellenamos la tabla de datos
var datoFinal = google.visualization.arrayToDataTable(infoGraf);

//en la parte de options puede personalizarse la gráfica, como títulos, colores...
var options = {
title: 'Grafica Valores',
curveType: 'function',
legend: { position: 'bottom' }
};


var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(datoFinal, options);
}
// Añadimos esta linea
setInterval(dibujaGrafica, 3000);
2
  • No te olvides de marcar tu respuesta como la correcta después de 48 horas
    – 5frags
    el 19 abr. 2017 a las 21:14
  • Muchas gracias, efectivamente esa era la solucion, pero el setInterval iba ubicado era en el codigo html, no en el javascrip, pero de igual muchas gracias por la ayuda,
    – Staz
    el 20 abr. 2017 a las 21:07

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.