en Gráficas, Javascript

Crea gráficas sencillas con C3.js en 5 minutos

A la hora de mostrar gráficas de nuestros datos la librería más popular es D3.js. Esta librería es MUY versátil y con ella podremos hacer casi todas los tipos de gráficas que queramos.

Pero D3.js tiene también una curva de aprendizaje muy pronunciada. Para hacer una gráfica sencilla tienes que manejar de entrada muchos conceptos (y escribir mucho código). Para estos casos D3.js se presenta como una solución demasiado completa (y compleja)

Así que si lo que queremos es añadir una gráfica sencilla a nuestro proyecto de manera rápida tenemos una opción mejor: C3.js.

C3.js es una librería construida sobre D3.js que ofrece una API muy sencilla de utilizar y con la que podremos mostrar nuestras gráficas con pocas líneas de código

En mi opinión C3 es la mejor manera de empezar a trabajar con gráficas, dejando D3 como herramienta avanzada.

¿Qué necesitamos para empezar a trabajar con C3?

Para utilizar C3.js en nuestro proyecto necesitamos cargar 3 cosas:

  • El archivo .js de D3
  • El archivo .js de C3
  • El archivo .css de C3

Los podemos descargar desde sus sitios oficiales (C3,D3), a nuestro proyecto y cargarlos en nuestro HTML desde su ubicación

También podemos instalar estos archivos con bower

…y luego cargarlos desde bower_components

O los podemos cargar directamente desde un CDN

La última version a la hora de escribir este articulo y con la que están hechos los ejemplos es la v.0.4.11

Creando nuestra primera gráfica con C3

Al llamar al método generate de C3.js, pasándole un objeto de configuración con propiedades como bindto y data, se generará la gráfica en el elemento especificado como selector en la propiedad bindto de este objeto

Es decir, teniendo un <div id="chart"></div> en el marcado, con este código

generamos esta grafica

Mola, ¿no? 🙂

Más ejemplos con C3

Donut

Para hacer otros tipos de gráficas podemos especificar la propiedad type dentro de data. Por ejemplo, con type: 'donut' y con los datos adecuados en columns

podemos generar una gráfica como esta

Gráfica combinada (lineas y barras)

Podemos combinar tipos de gráficas, añadir labels y especificar el formato de los datos en las “axis”

Carga asíncrona de datos

Con el método load podemos cargar datos en la gráfica asíncronamente (por ejemplo como resultado de una llamada a una API). También podemos descargar datos de la gráfica con el método unload

 

Streaming de datos

Con el método flow podemos añadir nuevos puntos a la gráfica y desplazar la grafica. Perfecto para representar datos en streaming

 

¿Qué te ha parecido este articulo? ¿Alguna otra librería de gráficos que nos quieras recomendar?

Esperamos vuestros comentarios