Conectar Chart.js con datos cripto en tu web

En este artículo encontrarás una guía seria y detallada para integrar Chart.js con datos en tiempo real de criptomonedas. Aprenderás desde la selección de la API hasta la configuración avanzada del gráfico, con ejemplos de código y recomendaciones para un resultado profesional.

1. ¿Por qué elegir Chart.js

Ligero y eficiente: ocupa poco espacio y se carga rápido.
Responsive: se adapta automáticamente al tamaño del contenedor.
Gran comunidad: activo mantenimiento y ejemplos en la documentación oficial.
Personalizable: soporta múltiples tipos de gráficos y estilos.

2. Selección de la API de criptomonedas

Entre las fuentes más fiables y gratuitas destacamos:

Proveedor	Endpoint	Límite gratuito
CoinGecko	`/coins/markets`	Ilimitado
CryptoCompare	`/data/pricemulti`	100k requests/mes

En esta guía utilizaremos la API de CoinGecko. Consulta sus detalles en Coingecko API Docs.

3. Prerrequisitos

Editor de código (VSCode, Sublime, etc.).
Acceso a tu instalación de WordPress.
Conocimientos básicos de JavaScript y HTML.

4. Estructura básica de archivos

functions.php: encolar scripts.
chart-script.js: lógica de obtención y renderizado.
plantilla o entrada WP: contenedor HTML para el canvas.

5. Paso 1: Incluir Chart.js

En functions.php de tu tema, añade:

// Encolar Chart.js
function enqueue_crypto_chart_scripts() {
  wp_enqueue_script(chartjs, https://cdn.jsdelivr.net/npm/chart.js, array(), null, true)
  wp_enqueue_script(crypto-chart, get_stylesheet_directory_uri() . /js/chart-script.js, array(chartjs), null, true)
}
add_action(wp_enqueue_scripts, enqueue_crypto_chart_scripts)

6. Paso 2: Obtener datos de criptomonedas

Usaremos fetch para llamar a CoinGecko:

async function fetchCryptoData(ids = [bitcoin,ethereum], currency = usd) {
  const endpoint = https://api.coingecko.com/api/v3/coins/marketsvs_currency={currency}ids={ids.join(,)}
  const response = await fetch(endpoint)
  if (!response.ok) throw new Error(Error al obtener datos)
  return response.json()
}

7. Paso 3: Preparar los datos para Chart.js

Transforma la respuesta en etiquetas y valores:

function formatData(rawData) {
  const labels = rawData.map(item =gt item.name)
  const data   = rawData.map(item =gt item.current_price)
  return { labels, data }
}

8. Paso 4: Configurar el gráfico

Dentro de chart-script.js:

async function renderCryptoChart() {
  const raw = await fetchCryptoData()
  const { labels, data } = formatData(raw)

  const ctx = document.getElementById(cryptoChart).getContext(2d)
  new Chart(ctx, {
    type: bar,
    data: {
      labels: labels,
      datasets: [{
        label: Precio actual (USD),
        data:    data,
        backgroundColor: rgba(247,147,26,0.6),
        borderColor:     rgba(247,147,26,1),
        borderWidth: 1
      }]
    },
    options: {
      responsive: true,
      scales: {
        y: {
          beginAtZero: true
        }
      },
      plugins: {
        legend: { labels: { color: #e0e1e3 } }
      }
    }
  })
}

document.addEventListener(DOMContentLoaded, renderCryptoChart)

9. Paso 5: Contenedor en tu entrada o plantilla

En el editor de WordPress, añade:

10. Actualización en tiempo real

Para refrescar cada minuto:

setInterval(async () =gt {
  const raw = await fetchCryptoData()
  const { data } = formatData(raw)
  myChart.data.datasets[0].data = data
  myChart.update()
}, 60000)

11. Mejores prácticas

Gestión de errores: maneja catch en tus promesas.
Cacheo: almacena datos en localStorage para evitar límites de API.
Modularidad: separa funciones en módulos.
Accesibilidad: añade aria-label y descripciones.

12. Conclusión

Integrar Chart.js con datos de criptomonedas aporta un valor visual y dinámico a tu sitio. Siguiendo esta guía, dispondrás de un gráfico moderno, responsive y fácil de mantener. Para profundizar, consulta las fuentes:

¡Ahora estás listo para llevar tus gráficos cripto al siguiente nivel!

Conectar Chart.js con datos cripto en tu web