Cómo generar gráficos fácilmente con C3.js

En este artículo os presentamos una librería gráfica, potente, fácil de usar y altamente personalizable. Como bien habrás visto, si necesitas darle un toque de color a tus cuadros de mando para hacerlo más atractivos para tus clientes, pero todo lo que encuentras es difícil de usar, en este caso C3.js debe ser tu elección.

C3.js es una biblioteca de gráficos reutilizables basada en D3, escrita en JavaScript, y nos permite emplearla en diversos cuadros de mando haciendo uso de la potencia de la biblioteca D3 pero facilitando su uso.

Instalación y primeros pasos

Podemos comenzar a utilizar esta gran herramienta de diferentes maneras ya que está disponible su instalación a través de Bower/Component (npm) con el nombre c3 o directamente descargando los ficheros de c3 y d3 desde su github, es muy importante no olvidar D3 ya que es una dependencia necesaria.

Los ficheros una vez descargados tan solo los añadimos a nuestros ficheros mediante las siguientes referencias:

<!-- Load c3.css -->
<link href="/path/to/c3.css" rel="stylesheet">
 
<!-- Load d3.js and c3.js -->
<script src="/path/to/d3.v5.min.js" charset="utf-8"></script>
<script src="/path/to/c3.min.js"></script>

En el caso de hacerlo con Bower/Component haremos uso de los siguientes comandos:

npm install c3 --save
import ProyectoC3 from 'c3'

Ya disponemos de esta librería gráfica en nuestro proyecto para ponernos manos a la obra, a continuación veremos algunos ejemplos.

Creando nuestro primer gráfico

Para su uso veremos que tan solo debemos preparar el elemento que va a recibir este gráfico: 

 <div id="chart"></div>

Posteriormente debemos llamar a la gráfica, con su formato estándar que como veremos en posteriores párrafos es fácilmente personalizable.

ar chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    },
});

Si pasamos analizar el código de llamada vemos la propiedad bindto, esta nos permitirá indicar a C3.js donde queremos que inserte nuestra gráfica, y como no las propiedades data-columns, que esta no es más que los datos que queremos que muestre, por defecto utiliza el gráfico de líneas para mostrar los datos.

En líneas generales con solo estos primeros pasos podemos tener un gráfico vistoso en nuestro cuadro de mandos de una manera sencilla, ahora vemos cómo podremos personalizarlo y obtener un resultado deseado.

Personalizando C3.js para adaptarlo a nuestras necesidades

Como hemos dicho al inicio del artículo esta biblioteca de gráficos nos permite personalizar las gráficas para hacerlas casi a medida. Para ello disponemos de diferentes elementos que se añaden a la llamada para poder hacerlo.

type: Esta se indica dentro de la etiqueta data y nos permite gran variedad de gráficos desde un Spline, Step, Area, Bar, Scatter … 

var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ],
type: 'bar',
    },
});

Si cambiamos el valor por bar podemos observar como nuestro gráfico se transforma en el siguiente:

types: C3.js nos permite incluso mezclar los tipos de gráficos,  lo que nos da muchas posibilidades, por ejemplo si lanzamos:

var chart = c3.generate({
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ],
      types: {
          'data1': 'line',
          'data2': 'area'
      }
    },
    
});

Observaremos como nuestro gráfico aparece con el siguiente formato:

 

colors: Una de las posibilidades más necesarias es poner los colores de las columnas o de las líneas a nuestro antojo, para ello C3.js nos da la posibilidad de trabajar con tanto con colores fijos a través de la sentencia colors dentro de data, como de mediante la etiqueta color indicar una función que cambie los colores según valor, nombre, etc.

var chart = c3.generate({
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ],
      types: {
          'data1': 'line',
          'data2': 'area'
      },
colors: {
            data1: '#ff0000',
            data2: '#00ff00',
            data3: '#0000ff'
      },
      color: function (color, d) {
         // d will be 'id' when called for legends
         return d.id && d.id === 'data2' ? d3.rgb(color).darker(d.value / 150) : color;
      }
    },
});

axis: Mediante esta etiqueta fuera de data nos permitirá crear un nuevo eje y asignar ciertas columnas de datos a este.

var chart = c3.generate({
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ],
      axes: {
        data2: 'y2'
      },
      types: {
          'data1': 'line',
          'data2': 'area'
      },
      colors: {
          data1: '#ff0000',
          data2: '#00ff00',
          data3: '#0000ff'
      },
      color: function (color, d) {
         // d will be 'id' when called for legends
         return d.id && d.id === 'data2' ? d3.rgb(color).darker(d.value / 150) : color;
      }
    },
    axis: {
      y2: {
        show: true // ADD
      }
    }
  });

Para que nos relacione la columna de datos con el nuevo eje hacemos uso de la etiqueta axes dentro de data.

label: esta etiqueta se inserta dentro de axis indicando el eje concreto x,y o y2. Esta nos permite mostrar una etiqueta para el eje indicado. No solo nos permite el texto sino que podemos también indicar la posición concreta.

var chart = c3.generate({
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ],
      axes: {
        data2: 'y2'
      },
      types: {
          'data1': 'line',
          'data2': 'area'
      },
      colors: {
          data1: '#ff0000',
          data2: '#00ff00',
          data3: '#0000ff'
      },
      color: function (color, d) {
         // d will be 'id' when called for legends
         return d.id && d.id === 'data2' ? d3.rgb(color).darker(d.value / 150) : color;
      }
    },
    axis: {
      x: {
        label: {
          text: 'Etiqueta eje X',
          position: 'inner-left'
        }  
      },
      y: {
        label: {
          text: 'Etiqueta eje Y',
          position: 'outer-middle'
        }
      },
      y2: {
        show: true, // ADD
        label: {
          text: 'Etiqueta eje Y2',
          position: 'outer-bottom'
        },
      }
    }
  });

Hay muchas más opciones que C3.js nos permite, y que os animamos a que busquéis y nos comentéis con vuestras impresiones,  podemos ver el resto de etiquetas de personalización en su pagina web oficial.

Uso de estructuras propias de datos

Hasta ahora tan solo hemos visto los gráficos estableciendo nosotros las columnas y sus valores, pero siendo C3.js una de las librerías gráficas más potentes actualmente, como no nos permite trabajar con variables y diferentes estructuras de datos de JavaScript para poder pasarle los datos.

Podemos hacerlo desde ficheros externos como CSV y JSON, para ello tan solo tendremos que indicarle en la etiqueta data una url, y en el caso de CSV es necesario indicarle la etiqueta mimeType: ‘json’, esto nos abre un abanico a la hora de trabajar con ello.

var chart = c3.generate({
    data: {
        url: '/data/c3_test.csv'
    }
});
 
setTimeout(function () {
    c3.generate({
        data: {
            url: '/data/c3_test.json',
            mimeType: 'json'
        }
    });
}, 1000);

El formato de los ficheros es el siguiente:

JSON:
{
  "data1": [220, 240, 270, 250, 280],
  "data2": [180, 150, 300, 70, 120],
  "data3": [200, 310, 150, 100, 180]
}
 
CSV:
data1,data2,data3
120,80,200
140,50,210
170,100,250
150,70,300
180,120,280

Si lo que deseamos es trabajar en tiempo de compilación pudiendo así calcular porcentajes y valores de nuestras columnas o filas podemos hacerlo con estructuras de datos propias de JavaScript, para ello tan solo tendremos que indicar la etiqueta json y keys si fuese necesario.

var chart = c3.generate({
    data: {
  		json: array_JSONs ,
        	keys: {
           	value: keys
        	},
        	url: '/data/c3_test.csv'
    }
});

El formato de keys es un array de string estándar, en cambio el array_JSONs es un array de objetos donde se indica sus claves y sus valores de la manera siguiente:

Array_JSONs: 
{
key1: valor,
key2: valor, 
…
}

Conclusión

En este artículo tan solo hemos podido ver algunas de las características y personalizaciones más potentes de C3.js, ahora es vuestro turno para investigar con esta biblioteca y descubrir todo el submundo que nos ofrece. No lo dudes y comienza a trabajar con esta librería. ¡No te arrepentirás!.