✅ Aplicación Web Encuesta y mostrar resultados en Grafico con Chart JS HTML CSS JavaScript

Ing. René Domínguez

18 Aug 202329:11

Summary

TLDREste script de video ofrece una guía paso a paso para utilizar Chart.js, una librería de JavaScript para crear gráficos. Se muestra cómo configurar el proyecto, incluir la librería y desarrollar una interfaz de usuario básica con botones para votar por diferentes equipos de fútbol. El script incluye el uso de HTML, CSS y JavaScript para construir la aplicación y la manipulación de datos con arrays y el almacenamiento local (localStorage) para mantener el conteo de votos entre sesiones. El objetivo es permitir a los usuarios votar por su equipo favorito y visualizar los resultados en tiempo real en una gráfica dinámica.

Takeaways

😀 Se presenta una nueva librería de JavaScript llamada Chart.js para crear gráficos.
📊 La librería Chart.js ofrece una amplia variedad de tipos de gráficos, incluyendo barras, líneas, burbujas, combo, dona y radar.
🌐 Se puede encontrar información detallada y ejemplos en la página oficial de Chart.js.
📝 Se crea un proyecto básico con archivos HTML y JavaScript para utilizar Chart.js.
📚 Se incluyen en el HTML referencias a la CDN de Chart.js para el CSS y JavaScript.
🎨 Se diseña una interfaz de usuario con botones y un título para la encuesta de equipos de fútbol.
📈 Se utiliza el elemento canvas para dibujar la gráfica dentro de la aplicación.
🔢 Se establecen los parámetros de configuración y los datos para la gráfica, incluyendo colores y etiquetas.
🏆 Se implementa una funcionalidad que permite votar por equipos y actualizar dinámicamente la gráfica.
💾 Los votos se almacenan en el local storage para mantener el estado de la votación incluso después de cerrar la aplicación.
🔄 Se puede cambiar el tipo de gráfica mostrada sin problemas, gracias a la configuración modular de Chart.js.

Q & A

¿Qué es Chart.js y para qué se utiliza?
-Chart.js es una librería de JavaScript diseñada para crear gráficos y visualizaciones de datos en cualquier tipo de proyecto web.
¿Qué tipos de gráficos se pueden crear con Chart.js según el script?
-Se pueden crear gráficos de barras, líneas, burbujas, combos, dona, radar y otros tipos de gráficos con Chart.js.
¿Cómo se inicia un proyecto para crear una gráfica con Chart.js según el video?
-Se inicia creando una carpeta para el proyecto, archivos HTML y JS, y luego se estructura la página HTML con la inclusión de la CDN de Chart.js.
¿Qué etiquetas HTML se utilizan para estructurar la página web del ejemplo del video?
-Se utilizan etiquetas como <html>, <head>, <body>, <h1>, <button> y <canvas> para estructurar la página web del ejemplo.
¿Qué función tienen los botones en la interfaz del proyecto mostrado en el video?
-Los botones permiten a los usuarios votar por diferentes equipos de fútbol, lo que afecta dinámicamente los datos mostrados en la gráfica.
¿Cómo se agregan los estilos CSS para personalizar los elementos de la interfaz?
-Se agregan los estilos CSS directamente en un archivo .css o dentro de una etiqueta <style> en el HTML, personalizando elementos como los botones y el canvas.
¿Qué es el canvas y cómo se relaciona con la gráfica en Chart.js?
-El canvas es un elemento HTML donde se dibuja la gráfica utilizando Chart.js, actuando como el lienzo sobre el cual se renderiza la visualización.
¿Cómo se configura la gráfica en Chart.js según lo explicado en el video?
-Se configura la gráfica en Chart.js mediante un objeto de configuración que incluye el tipo de gráfica, los datos, las opciones de responsividad, la posición de las leyendas, el título y otros parámetros.
¿Qué es la función 'votar' y cómo se relaciona con la interacción del usuario?
-La función 'votar' es un callback que se ejecuta cuando un usuario hace clic en un botón para votar. Esta función actualiza los datos de la gráfica en función del voto del usuario.
¿Cómo se almacenan los votos en el ejemplo del video y cómo se recuperan?
-Los votos se almacenan en el localStorage del navegador web utilizando JSON para serializar los datos. Se recuperan mediante la función localStorage.getItem('votos') y se parsean para actualizar la gráfica.
¿Cómo se actualiza la gráfica en función de los votos del usuario?
-La gráfica se actualiza mediante la función Chart.update() o similares de Chart.js, que se llama después de que cambian los datos de votos para reflejar los cambios visualmente.