Gráficas Web en tiempo real con CanvasJS

3
588
En mi aporte anterior para Panama Hitek expliqué paso por paso como construir una gráfica utilizando CanvasJS. Este post, a modo de continuación, tratará de explicar cómo lograr que nuestra gráfica se actualice cada vez que insertamos un nuevo valor en nuestra base de datos en MySQL. Las gráficas web en tiempo real son una herramienta muy interesante que nos podría ayudar a elevar nuestro proyecto al siguiente nivel.

Recomiendo al lector descargar los ficheros de mi post anterior, ya que en base a dicho código es que trabajaremos. Para las gráficas web necesitaremos contar con conocimientos básicos sobre HTML, PHP, JavaScript y MySQL. Empecemos.

El código en JavaScript

Para lograr la actualización en tiempo real propongo utilizar la función setInterval de la siguiente manera:

En esta instrucción updateChart() será un método en el cual colocaremos el código que deseamos ejecutar cada cierto tiempo; updateInterval indica la cantidad de milisegundos que se debe espera entre cada ejecución de la función updateChart(). Ahora presentamos el código completo del fichero index.html:

Procedo a detallar algunos aspectos relevantes de este código:

  • La línea 7 contiene la cantidad de tiempo en milisegundos que se utilizará para la actualización de la gráfica. 500 milisegundos significa una actualización de 2 veces por segundo, lo cual me parece suficiente para una demostración. Velocidades más altas podrían causar problemas en la ejecución correcta del código.
  • Entre las líneas 9 y 22 se define la función que llama los datos desde la base de datos. En caso que la cantidad de datos graficados sea igual a la cantidad de datos obtenidos desde el servidor, la gráfica permanece intacta. Ésta solamente se actualizará mientras haya datos disponibles para ser graficados. Los datos obtenidos se almacenarán del lado del cliente en la variable data.
  • En la línea 35 es donde se establece el intervalo de tiempo y las acciones que se desean ejecutar.

Una vez coloquemos este código en nuestro index lo ejecutamos y en nuestro navegador veremos la gráfica de los datos de la base de datos. Ahora hagamos el ejercicio de ir a nuestro servidor MySQL e insertar un dato en la tabla plot_values. El resultado lo podemos apreciar en el siguiente GIF.

Gráfica Web CanvasJS

Vemos que el resultado es inmediato. Insertamos la coordenada (8, 30) y la gráfica se dibuja de forma automática. Esto sucederá cada vez que insertemos un nuevo valor a la base de datos.

Insertando valores en la base de datos desde PHP

Para nuestra comodidad podemos crear un script en PHP en el cual le “pasamos” valores a la base de datos para su almacenamiento y visualización en las gráfica web. El código es el siguiente:

Procedo a explicar el código:

  • Entre las líneas 2 y 6 se colocan los parámetros de la base de datos, tal como en el script data.php.
  • En las líneas 7 y 8 se inicia la conexión con la base de datos y se selecciona la tabla en la cual se insertarán los valores
  • Las líneas 13 y 14 harán lectura de los parámetros que le enviaremos a través del HTTP Request.
  • Entre la línea 15 y 19 es donde se arma el query para insertar los valores a la base de datos.
  • En la línea 20 es donde se ejecuta el query.
  • En la línea 24 se cierra la conexión con MySQL.

Para insertar los valores basta con abrir un navegador (como Chrome) y accedemos a la siguiente dirección:

http://localhost/panamahitek/register.php?x=10&y=20

En negrita he resaltado los valores que estoy introduciendo en la gráfica. Después del igual, tanto para la x como para la y es donde se asignan los valores. Si en vez de x o y se desea usar otras variables, es necesario hacer el ajuste en las líneas 13 y 14 del script en PHP. El siguiente video muestra el funcionamiento de la gráfica en tiempo real.

Los ficheros que forman este proyecto se pueden descargar desde nuestro repositorio en Github. Las gráficas web son temas que, para los novatos (me incluyo) pueden volverse un dolor de cabeza. Espero que la información suministrada sea de utilidad para ustedes y que pueda servir como una base de referencia para empezar a construir sus propios proyectos. Cualquier duda o comentario, por favor dejarlo en la sección de comentarios.

  • Miguel Alejandro

    Amigo, buen post pero una duda como seria para tener dos series de datos, digamos que tenemos otra tabla con la misma estructura pero otros datos y la queremos mostrar en la misma gráfica, como seria para mostrar la siguiente serie??

  • Jeff.

    Hola!, una consulta como se puede hacer para que en el grafico al “seleccionar” un punto, la leyenda muestre el valor con su decimal? por ejemplo que muestre “4.36” en vez de “4”.
    De antemano muchas gracias!.

    • Miguel Alejandro

      Siguiendo el ejemplo puedes hacerlo asi y:parseFloat(result[i].valory)