Representación visual de datos - Gráficas y estadísticas en la web

A continuación vamos a explicar cómo mostrar nuestros datos o conjuntos de datos en forma gráfica, al igual que se realiza en el ámbito empresarial.

Si tuviéramos que hacerlo a mano sería muy tedioso y nos llevaría mucho tiempo, pero afortunadamente existen varias librerías de Javascript gratuítas y muy potentes, que vienen con múltiples opciones de personalización.

Nosotros vamos a utilizar c3.js que tiene dependencia de otra librería llamada d3.js,

Empezamos agregando el archivo CSS de la librería c3 y las librerías de Javascript.

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>

Para pintar la gráfica únicamente debemos llamar al método generate() del objeto c3, al cual le pasamos un objeto con las opciones de personalización que necesitemos, y que podéis consultar en su totalidad en la documentación de la web oficial.

c3.generate(objeto);

En este caso hemos ido más allá y hemos hecho una función que devuelve un objeto personalizado, con un tipo de gráfica concreto, según el parámetro que le haya pasado al llamar la función (que lo recoge del select que tenemos arriba a la izquierda).

Como siempre, os dejamos un ejemplo en nuestro CodePen

See the Pen c3 Grafica stacked by Pedro Marín (@pedromarin) on CodePen.

Como alternativas podéis probar HighChart.js y Chart.js

See the Pen Graficas con HighCharts.js by Pedro Marín (@pedromarin) on CodePen.

See the Pen Graficas con Chart.js by Pedro Marín (@pedromarin) on CodePen.