Dashboard de Tenis en Tiempo Real con WebSocket y JavaScript

Imagen
¿Por qué utilizar WebSocket en lugar de una API REST? El caso de Tennis API Cuando trabajamos con APIs, normalmente pensamos en solicitudes HTTP tradicionales donde una aplicación consulta información cada cierto tiempo. Sin embargo, para aplicaciones que requieren datos en tiempo real, existe una alternativa mucho más eficiente: WebSocket. Mientras exploraba las capacidades de Tennis API encontré su integración mediante Socket.IO, una tecnología que permite recibir actualizaciones en tiempo real sin necesidad de realizar consultas constantes al servidor. ¿Cómo funciona una API REST tradicional? Con una API REST, la aplicación debe preguntar periódicamente si existen nuevos datos. Por ejemplo: setInterval(async () => { const response = await fetch("/live-scores"); const data = await response.json(); console.log(data); }, 5000); En este caso la aplicación realiza una consulta cada 5 segundos. El problema es que muchas veces no existe información nue...
Publicar un comentario

Graficar Funciones con JavaScript y HTML Chart.js

 Cuando trabajamos con datos o funciones matemáticas, es muy útil poder visualizarlos en una gráfica. Con JavaScript y HTML, esto es sencillo si utilizamos una biblioteca como Chart.js.

A continuación, te presento un ejemplo donde graficamos la función cuadrática y = x^3. Usaremos etiquetas en el eje X desde -10 hasta 10 y graficar los valores correspondientes para y.

Guia para graficar funciones con javascript


Aquí tienes el código que necesitas para generar la gráfica:



<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Graficar Funciones con JavaScript</title>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

</head>

<body>

    <h1>Graficar Funciones con JavaScript y HTML</h1>

    <canvas id="miGrafica" width="400" height="200"></canvas>


    <script>

        // Generar datos para la función y = x^3

        const etiquetas = [];

        const datosFuncion = [];


        for (let x = -10; x <= 10; x++) {

            etiquetas.push(x);

            datosFuncion.push(x * x);  // y = x^2

        }


        const ctx = document.getElementById('miGrafica').getContext('2d');

        const miGrafica = new Chart(ctx, {

            type: 'line',  // Tipo de gráfica

            data: {

                labels: etiquetas,

                datasets: [{

                    label: 'y = x^3',

                    data: datosFuncion,

                    borderColor: 'rgba(75, 192, 192, 1)',

                    borderWidth: 2,

                    fill: false

                }]

            },

            options: {

                scales: {

                    x: { title: { display: true, text: 'Valor de x' } },

                    y: { title: { display: true, text: 'Valor de y' } }

                }

            }

        });

    </script>

</body>

</html>

 Este código utiliza un elemento <canvas> donde se dibuja la gráfica. Luego, mediante un script de JavaScript, generamos los datos para la función y = x^3 y los pasamos a Chart.js para que los graficaque. 

Visita la url https://www.programacionparatodos.com/p/graficar-funciones-con-javascript-y.html Para ver el resultado


Conclusión

Este ejemplo es una introducción básica, pero Chart.js tiene una gran variedad de opciones para crear gráficos más complejos, incluyendo gráficos de barras, líneas, radar, y más. Puedes personalizar tu gráfica para que se ajuste a tus necesidades.

Comentarios

Publicar un comentario

Dejanos tus dudas y comentarios

🚀 Mantener este blog funcionando requiere tiempo y café. ¡Puedes contribuir con uno aquí!

Entradas más populares de este blog

Guía Práctica: Ejemplo Completo de ASPX para Desarrolladores Web

Imagen
Bienvenidos a programacionparatodos.com Esta semana vamos a conocer otro lenguaje de programación que es ASP ( Active Server Pages  )  que es de la familia de Microsoft es plataforma Cliente/Servidor y que permite crear páginas WEB dinámicas, utiliza un servicio conocido como IIS o  (Internet Information Services) fue creado en 1996. Cuando ven paginas WEB que terminan en .aspx es que están desarrolladas con este lenguaje. Páginas  que por ejemplo utilizan ASP https://www.cfe.mx/Pages/Index.aspx https://www.interfactura.com/Index.aspx https://www.canadainternational.gc.ca/mexico-mexique/index.aspx?lang=spa Igual hay mucho trabajo para este software por ejemplo les dejó las siguientes vacantes  Desarrollador .NET .NET Developer NET LEAD Para seguir con el formato del blog, les quiero compartir un programa de ejemplo, pero he de decirles que es la primera vez que programo en ASP , ya que no lo había hecho antes, me tomo...
Leer más

👉 Cómo obtener el tipo de cambio en Excel con API de Banxico (paso a paso)

Imagen
Cómo obtener el tipo de cambio en JavaScript con la API de Banxico (Paso a paso) Ejemplo práctico: Aprende a obtener el tipo de cambio del dólar en tiempo real usando JavaScript y la API de Banxico. Ideal para integrar datos financieros en tus aplicaciones o dashboards. En este tutorial aprenderás cómo obtener el tipo de cambio usando JavaScript y la API de Banxico paso a paso. Si no quieres programar o prefieres una solución más rápida, al final también te dejo una opción para hacerlo directamente desde Excel. 🚀 ¿Qué vas a aprender? Cómo obtener tu token de Banxico Cómo consumir una API con fetch() Cómo leer datos JSON Cómo mostrar el tipo de cambio en tu página web 🔑 Cómo obtener tu API Key de Banxico Para poder consumir la API necesitas generar un token gratuito desde el siguiente enlace: 👉 Obtener token de Banxico Con este token puedes realizar hasta 40,000 consultas gratuitas por día . 📊 Identificar la serie del tipo de cambio (SF4371...
Leer más

Macro en Word para automatizar documentos: genera diplomas en segundos (con código VBA)

Imagen
Macro en Word para automatizar documentos y generar diplomas automáticamente (VBA paso a paso) ¿Sigues creando documentos uno por uno en Word? Si generas diplomas, constancias, contratos o reportes manualmente, este proceso puede quitarte horas cada semana. En esta guía aprenderás cómo automatizar documentos en Word usando una macro VBA , permitiéndote generar múltiples archivos en segundos y reducir errores humanos. Este tutorial es ideal para administrativos, analistas, docentes y cualquier profesional que quiera ahorrar tiempo y mejorar su productividad. ¿Qué problemas resuelve esta macro? Evita crear documentos manualmente Reduce errores al copiar nombres Ahorra horas de trabajo administrativo Permite generar múltiples diplomas en segundos Mejora tu eficiencia profesional ¿Sabías que no solo en Excel puedes crear macros? También puedes automatizar tareas en Word, Outlook, PowerPoint y Access gracias a Visual Basic para Aplicaciones (VBA). Cómo hab...
Leer más