Como Crear un COVID-19 Dashboard con información Actualizada de Casos Diarios con Node JS 13.13 y Bootstrap 4 – Parte 4

8 minuto(s)

En la Parte anterior de este tutorial llamada Como Crear un COVID-19 Dashboard con información Actualizada de Casos Diarios con Node JS 13.13 y Bootstrap 4 – Parte 3 instanciamos Bootstrap 4 junto con las librerías necesarias para su correcto funcionamiento (jQuery y Popper.js), creamos la vista principal que vendría a ser el Dashboard y le agregamos una listado de países al lado izquierdo, luego al lado derecho agregamos un gráfico temporal con datos de prueba y debajo del gráfico colocamos una tabla con los últimos casos acontecidos de COVID-19 en el mundo, en esta Parte 4 vamos a mostrar en el gráfico datos de los últimos casos acontecidos en los últimos siete días en el mundo y debajo en la tabla colocaremos datos totales de todos los casos acontecidos hasta la fecha en los países del mundo, vamos con ello.

Partes

Antes de continuar con este Post, te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “17 – Porque El Lenguaje De Programación Python Es Tan Popular”:

Spotify SoundCloud Apple Podcasts

Bien ahora continuemos con el Post: Como Crear un COVID-19 Dashboard con información Actualizada de Casos Diarios con Node JS 13.13 y Bootstrap 4 – Parte 4. 

Datos para el Gráfico Principal

En la Parte anterior de este tutorial, es decir en la Parte 3, agregue un gráfico con datos temporales solo para estructurar el diseño de la vista principal del Dashboard, ahora voy a insertar datos reales en el gráfico.

Muchos proyectos suelen usar datos de diferentes fuentes o APIS, ya que a veces estas nos brindan los datos en un formato que no nos sirve para lo que buscamos hacer, sabiendo esto, voy a usar datos de otra fuente para el gráfico de la vista principal.

La disease API brinda datos sobre el Covid 19 y esos datos los usaré para mostrar datos de los últimos 7 días en el gráfico de la página principal.

Abro el archivo llamado app.js que se encuentra en el directorio principal de mi proyecto.


Dentro del archivo app.js creo un nueva URL para llamar a los datos de caso Covid 19. Luego obtengo los datos de esta nueva URL en formato JSON y por último creo una nueva ruta llamada /datos1 para servir los datos al gráfico en la vista Front.


Entonces ahora mi archivo app.js se debe de ver de la siguiente manera.


Bien con esto ya tenemos los datos listos para usarlos en el gráfico principal.

Renderizando los Datos en el Gráfico Principal

Ahora vamos a renderizar los datos en el gráfico de la vista principal, para esto tenemos el archivo index.js el cual se encuentra en covid19-dashboard > public > js > index.js


Dentro del archivo index.js  teníamos una función para mostrar un gráfico con datos temporales, borro el código que había en esa función, solo para hacer un console.log() para ver si mi vista esta recibiendo los datos de la ruta /datos1 que acabo de crear en el archivo app.js


Entonces voy a mi vista y debería de ver en la consola del navegador que si se están llamando los datos de la Disease API.

Bien, los datos se están llamando como objetos, entonces voy a obtener los valores o values de las cantidades mediante el método object.values de JavaScript y de esos objetos solo capturo los casos confirmados, muertes, recuperados y la fecha de los últimos 7 días a nivel mundial


Ahora envió los datos a cada línea del gráfico, hago uso de la propiedad data de Chart JS y en ellas coloco las variables u7c, u7m y u7r. Para las fechas hago uso de la propiedad label y en ella coloco la variable u7f, tu les puedes poner el nombre de variables que desees.

Entonces mi archivo index.js ahora se debe de ver de la siguiente manera.


Y si voy al navegador debería de ver el gráfico mostrando los datos correctamente de las cantidades a nivel mundial de casos Covid 19 en los últimos 7 días.

La fecha que se esta mostrando tiene formato internacional, pero más adelante veremos que hacemos para formatearla y hacerla que se vea mejor.

Bien hasta aquí entonces hemos configurado los datos con Node JS para enviarlos al gráfico de la vista principal y mostrar cantidades generales de los casos de los últimos 7 días en el mundo.

Ten Paciencia, lo que quiero es que entiendas todo el proceso para Crear este Proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje.  

Nota (s)

  • En la siguiente Parte mostraremos los datos por países, haciendo uso de los elementos HTML input radio que se encuentran al lado izquierdo del Dashboard.
  • El código usado en este Tutorial puede quedar obsoleto, seguir vigente o ser modificado, esto no depende de mi, si no de los Desarrolladores que dan soporte a Node JS (Junto con sus dependencias) y Bootstrap 4 junto con sus dependencias jQuery y Popper.js
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.