Convierte el contenido de tu CMS de Webflow en gráficos llamativos

En este tutorial, voy a mostrarte un par de ejemplos en acción, ¡y espero que te sirvan de inspiración para hacer lo mismo! Pero antes de empezar, consideremos dos tipos básicos de datos que podríamos representar en nuestros sitios:

• Contenido ajeno a Webflow: Tus datos pueden ser sencillos y estáticos; por ejemplo, la cantidad de personas que votaron a favor de una propuesta frente a las que votaron en contra. Esto se podría representar con un gráfico circular simple y estático. Tus datos también pueden provenir de una fuente remota, como una API a la que tu código consulta para obtener esa información. La distinción importante aquí es que los datos no están relacionados con el contenido de tu CMS de Webflow (o no dependen directamente de él).
• Gráficos basados en datos del CMS: En este caso, nuestros editores trabajan con el CMS en el Diseñador de Webflow y, al publicar, los gráficos reflejan la información del propio CMS.

Veamos cómo integrar cada uno de estos en Webflow. Si prefieres ver esta guía en lugar de leerla, puedes ver la versión de YouTube a continuación:

Nuestra biblioteca preferida: Chart.js

Existen muchas bibliotecas de gráficos creadas para la web, pero para este tutorial me centraré en Chart.js. Es una biblioteca de gráficos 100% gratuita y de código abierto que no es demasiado difícil de usar y es bastante flexible. No voy a profundizar en la biblioteca ni en sus funciones en mis ejemplos, pero echa un vistazo a la documentación para hacerte una mejor idea de lo que se puede lograr.

Empezando por lo básico: añadir un gráfico estático a nuestro sitio

Empecemos por algo sencillo con un gráfico estático que proviene directamente de la guía de primeros pasos de Chart.js:

<div>
  <canvas id="myChart"></canvas>
</div>

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

<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

Incluso si nunca has visto Chart.js, probablemente puedas adivinar cómo funciona. Se utiliza un elemento canvas para contener el gráfico. JavaScript crea la instancia del gráfico, apuntando al elemento canvas y especificando el tipo de gráfico, cómo se renderiza y los datos estáticos. El bloque de opciones especifica que el eje Y comenzará en 0 y, como mencioné antes, Chart.js es realmente flexible, así que hay muchísimas más cosas que se podrían especificar aquí.

Para añadir esto a mi página de Webflow, primero añadí un elemento personalizado y especifiqué la etiqueta como canvas. También añadí un atributo ID llamado myChart:

A continuación, añadí un bloque de código donde copié y pegué literalmente el código de ejemplo:

Después de publicar mi sitio, puedo ver el gráfico renderizado:

¡Genial! ¡Un gráfico! Un gráfico enorme. Sí, es demasiado grande, pero llegaremos a eso en un momento. Como mencioné anteriormente, un gráfico como este con valores codificados tiene su lugar en un sitio web. Puedes ver este ejemplo en vivo aquí.

Creación de gráficos dinámicos basados en datos

Aunque hay lugar para los gráficos estáticos, normalmente querrás representar algo un poco más dinámico. Hay chorrocientas (es una palabra real, lo prometo) APIs por ahí, pero un ejemplo divertido es la API de TMDB, que es gratuita. Esta API proporciona información sobre películas, programas de televisión y más. Es genial si eres un fanático del cine y es bastante fácil de empezar. ¿Qué tal un gráfico que muestre simplemente el número de películas estrenadas en los últimos años?

El endpoint "Discover Movie" te permite consultar su base de datos y aplicar filtros basados en fechas. Por ejemplo, esta función de utilidad puede devolver el número de películas estrenadas en un año determinado:

async function getMoviesForYear(year) {
	let req = await fetch(`https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=1&release_date.gte=${year}-01-01&release_date.lte=${year}-12-31`, {
		headers: {
			'Authorization':`Bearer ${DMDB_KEY}`,
			'accept':'application/json'
		}
	});

	let data = await req.json();
	return data.total_results;
}

Añadamos esto a nuestro sitio.

Lo primero que hice fue añadir un Canvas a mi página, pero esta vez lo envolví en un div. ¿Por qué? Esto me permite especificar una altura y una anchura para la etiqueta div y así poder ajustar el tamaño de mi gráfico correctamente. Chart.js "rellenará" el canvas (y como viste en la demostración anterior, se vuelve bastante grande), así que puedo usar el div para ajustar el tamaño del gráfico a mi gusto.

He vuelto a utilizar un elemento de código incrustado con lo siguiente:

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

<script>
const DMDB_KEY = 'eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIyZGNlODhhMTYyMDYzNjMyZDk0Yzc4MmYwMDI4YWVmZSIsInN1YiI6IjY0Y2MxNTVkMjk3MzM4MDIwYzVjOGU3YiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.2dr69jhhwS-weKE7ncFmR2LJCZq4lghO92XJp3jlpyg';

document.addEventListener('DOMContentLoaded', init, false);
async function init() {
	let totalMovies = [];
	
	// we could run these parallel for better performance...
	for(let x=2020;x<2026;x++) {
		// quick and dirty cache system
		if(window.localStorage['tmdb_'+x]) {
			console.log('from cache');
			totalMovies.push(parseInt(window.localStorage['tmdb_'+x]));
		} else {
			console.log('from api');
			let count = await getMoviesForYear(x);
			totalMovies.push(count);
			window.localStorage['tmdb_'+x] = count;
		}
	}

	const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['2020', '2021', '2022', '2023', '2024', '2025'],
      datasets: [{
        label: '# of Movies',
        data: totalMovies,
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });	
}

async function getMoviesForYear(year) {
	let req = await fetch(`https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=1&release_date.gte=${year}-01-01&release_date.lte=${year}-12-31`, {
		headers: {
			'Authorization':`Bearer ${DMDB_KEY}`,
			'accept':'application/json'
		}
	});

	let data = await req.json();
	return data.total_results;
}
</script>

Desde el principio, verás que he incluido Chart.js de nuevo para pasar directamente a mi código. Mi clave de API es segura de compartir aquí, ya que solo realiza operaciones de lectura, nada más (¿Necesitas ocultar una clave de API? Echa un vistazo a mi artículo donde demuestro cómo hacerlo, y más, con Webflow Cloud!). Luego, hago un bucle de 2020 a 2025 y, para cada año, realizo una llamada a la API o utilizo el almacenamiento en caché del lado del cliente con LocalStorage (Si nunca has visto esta API, la documentación en MDN es una excelente introducción).

El resultado final es una matriz de cinco números que representan cuántas películas se estrenaron cada año. Esto se utiliza en la configuración de Chart.js, lo que da como resultado un gráfico dinámico (Técnicamente, esos números no cambian y, en rigor, podría simplificar el código y eliminar la API, pero puedes imaginar este gráfico configurado para mostrar siempre los últimos cinco años, permitir que la gente elija un género y más).

Como antes, compartiré una captura de pantalla:

Puedes ver este ejemplo en vivo aquí.

Muy bien, ahora llega el plato fuerte: conectar nuestros gráficos al CMS de Webflow.

Creación de gráficos con datos del CMS de Webflow

Empecemos hablando de lo que queremos representar en nuestro CMS de Webflow y qué vamos a graficar. He creado un elemento de colección llamado Disponibilidad de gatos. Es una colección CMS sencilla con los siguientes campos:

• RazaSlugCantidad

Representa un tipo de gato (por ejemplo, "Calicó") y cuántos hay disponibles para adopción. Utilicé la herramienta integrada de Webflow para generar algunos datos de muestra:

Si queremos graficar esto, necesitamos encontrar una forma de llevar los datos "crudos" del CMS a la biblioteca de gráficos de JavaScript. ¿Cómo lo hacemos?

Una forma sería mediante código personalizado. Hace unas semanas compartí en nuestro blog cómo puedes usar Webflow Cloud precisamente para ese propósito: "Expón tu CMS de Webflow con una API sencilla". Esto funciona bien, pero requiere un poco de código para configurarlo y gestionarlo. En su lugar, voy a utilizar una técnica que aprendí de Alex Iglesias de Finsweet. Su técnica utiliza una lista de colección CMS que genera datos, no texto. Déjame demostrártelo.

En una página nueva, comencé añadiendo un elemento de Lista de colección vinculado a mi colección de Disponibilidad de gatos. Luego, en mi bloque de Lista de colección/Elemento de colección, añadí un elemento de Código incrustado.

Ese código incrustado se ejecuta una vez por cada elemento de mi CMS y necesita exponer sus datos de una manera que mi JavaScript pueda captar más adelante. Para esto, estoy usando un bloque JSON incrustado. Aquí tienes un ejemplo:

<script type="application/json">
  {
    "breed":"Calico",
    "count": 5
  }
</script>

Para hacerlo dinámico, utilicé la función Añadir campo y seleccioné mis dos propiedades:

Para mi pequeño conjunto de elementos de colección CMS, así es como se renderiza una vez publicado:

<div role="listitem" class="w-dyn-item"><script type="application/json">
{
"breed":"Sphynx Cats",
"count":3
}
</script></div></div><div role="listitem" class="w-dyn-item"><div class="w-embed w-script"><script type="application/json">
{
"breed":"Bengal Cats",
"count":15
}
</script></div></div><div role="listitem" class="w-dyn-item"><div class="w-embed w-script"><script type="application/json">
{
"breed":"Maine Coon Cats",
"count":5
}
</script></div></div><div role="listitem" class="w-dyn-item"><div class="w-embed w-script"><script type="application/json">
{
"breed":"Siamese Cats",
"count":8
}
</script></div></div><div role="listitem" class="w-dyn-item"><div class="w-embed w-script"><script type="application/json">
{
"breed":"Persian Cats",
"count":12
}
</script></div>

Ahora necesitamos obtener estos elementos, analizarlos para convertirlos en datos y pasarlos a Chart.js. Para ello, fui a la configuración de mi página y comencé a trabajar en el área de la etiqueta Antes de </body>. Capturar y analizar esos bloques es bastante sencillo:

let catInfo = [];

document.querySelectorAll('script[type="application/json"]').forEach(c => {
  catInfo.push(JSON.parse(c.innerText));
});

Empiezo con una matriz vacía y luego uso querySelectorAll para capturar todos los bloques JSON. Para cada bloque, obtengo el texto, analizo el JSON y lo añado a mi matriz. A partir de ahí, es sencillo volver a pasarlo al gráfico. Aquí tienes el bloque de código completo:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', init, false);
async function init() {

	let catInfo = [];

	document.querySelectorAll('script[type="application/json"]').forEach(c => {
		catInfo.push(JSON.parse(c.innerText));
	});

	console.log(catInfo);

	const ctx = document.getElementById('myChart');

  let labels = []; let data = [];
  catInfo.forEach(c => {
    labels.push(c.breed);
    data.push(c.count);
  });
  
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels,
      datasets: [{
        label: '# of Cats',
        data,
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });	
}
</script>

¿Y qué tal se ve?

Y de nuevo, si quieres verlo en vivo, haz clic aquí. Si los datos del CMS se actualizan y se publican, el gráfico reflejará los nuevos valores.

En resumen, hemos visto tres formas distintas de crear gráficos con Webflow. Aquí tienes una chuleta rápida para consultarla cuando quieras.

¡Empieza a crear tus propios gráficos!

Como comenté al principio, el uso que he hecho de Chart.js en esta demo es bastante sencillo. No me he preocupado demasiado por los tamaños, los colores ni cosas así. La librería te permite adaptar y optimizar todo para que encaje a la perfección con tus diseños. Es compatible con muchos estilos de gráficos y también puedes añadir interacciones más complejas. Cuéntanos qué has creado y comparte tus ejemplos en nuestra nueva comunidad de desarrolladores.