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

bower install c3

…y luego cargarlos desde bower_components

O los podemos cargar directamente desde un CDN

<!-- These belongs to the HTML file where you want C3 to work - put these lines into your <head> tag -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" rel="stylesheet" type="text/css">

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

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

generamos esta grafica

[advanced_iframe src=»//jsfiddle.net/juanma/wmvejjm1/embedded/result,js,html,css/» width=»100%» height=»400″]

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

const type = 'donut'
const title = '# Kittens Love #'

var chart = c3.generate({
    data: {
        columns: [
            ['Yoko', 50],
            ['Linda', 50],
        ],
        type
    },
    donut: { title }
});

podemos generar una gráfica como esta

[advanced_iframe src=»//jsfiddle.net/juanma/Lbrjnfad/embedded/result,js,html,css/» width=»100%» height=»400″]

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»

var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ],
      types: {
        data2: 'bar'
      }
    },
    axis: {
      y: {
        label: {
          text: 'Y Label',
          position: 'outer-middle'
        },
        tick: {
          format: d3.format("$,") // ADD
        }
      }
    }
});

[advanced_iframe src=»//jsfiddle.net/juanma/brLdsw1p/embedded/result,js,html,css/» width=»100%» height=»400″]

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

let chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [ ['data1'], ['data2'] ],
    }
});

const load = document.getElementById('load')
const unLoad = document.getElementById('unload')

load.querySelector('button').addEventListener('click', () => {
	displayButtons()
  chart.load({
    columns: [
      ['data1', 300, 100, 250, 150, 300, 150 ],
      ['data2', 100, 200, 150, 50, 100, 250 ]
    ]
  });
})

unload.querySelector('button').addEventListener('click', () => {
	chart.unload('data1');
})

function displayButtons() {
	load.className = 'hidden'
  unload.className = ''
}

 

[advanced_iframe src=»//jsfiddle.net/juanma/22w5whoL/embedded/result,js,html,css/» width=»100%» height=»450″]

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

const MAX = 100
const LENGTH = 20

let data1 = ['data1']
let x = ['x']

let interval
let chart = c3.generate({
    bindto: '#chart',
    data: {
      x: 'x',
      columns: [ x, data1 ]
    },
    axis: {
     x: {
       type: 'timeseries',
       tick: { format: '%H:%M:%S' }
     }
    }
});

const oStart = document.getElementById('start')
const oStop = document.getElementById('stop')

oStart.querySelector('button').addEventListener('click', () => {
  displayButtons()
  interval = setInterval(() => {
    data1.push( getRandomNumber( MAX ) )
    x.push( +new Date() )
    if (data1.length < LENGTH) { chart.load({ columns: [ x, data1 ] }); } else { chart.flow({ columns: [ [ 'x', +new Date() ], [ 'data1', getRandomNumber( MAX ) ] ] }); } },1000) }) oStop.querySelector('button').addEventListener('click', () => {
  clearInterval(interval)
})

function getRandomNumber( max ) {
  return Math.round( Math.random()*max )
}

function displayButtons() {
  oStart.className = 'hidden'
  oStop.className = ''
}

 

[advanced_iframe src=»//jsfiddle.net/juanma/18yk5zun/embedded/result,js,html,css/» width=»100%» height=»450″]

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

Esperamos vuestros comentarios

Post Anterior
Post Siguiente

Política de Comentarios de pixelovers

Responsable » Juan Manuel Garrido
Finalidad » Moderación de los comentarios
Legitimación » Tu consentimiento expreso que te será requerido por Disqus.
Destinatarios » Los datos de tus comentarios los guardará Disqus, mi sistema de comentarios, que está acogido al acuerdo de seguridad EU-US Privacy Shield tal y como recoge su politica de privacidad
Derechos » Desde Disqus, por tanto, podrás acceder, rectificar, limitar y suprimir tus comentarios o tu cuenta
Tienes más detalles acerca del tratamiento de los datos relacionados con los comentarios en nuestra (Política de Privacidad)