Gráficos HTML5 con Chart.js

Chart.js es una librería JavaScript orientada a objetos que nos permitirá la creación de múltiples tipos de gráficos mediante el uso de la etiqueta canvas en HTML5. Entre dichos tipos, podemos encontrar gráficos de barras, radiales, polares y incluso tartas.

La librería pesa tan solo 4,5k y es libre de dependencias externas. Además, proporciona infinidad de opciones para modificar los gráficos a nuestro antojo.

Tiene un empleo muy simple, veamos un ejemplo de gráfico de líneas:

Paso 1: Cargar Chart.js

Lo hacemos como un script común:

<script src="Chart.js"></script>

Paso 2: Crear el elemento <canvas>

Creamos un lienzo en nuestro HTML, asignandole un identificador.

<canvas id="myChart" width="400" height="400"></canvas>

Paso 3: Referenciar el lienzo en JavaScript

Obtenemos el elemento mediante el identificador y ejecutamos .getContext("2d") para iniciar el <canvas> en 2 dimensiones.

var ctx = document.getElementById("myChart").getContext("2d");

Paso 4: Ejecutar la librería con los datos

Definimos nuestros datos y ejecutamos sobre el elemento correspondiente al lienzo la librería.

var data = {
	labels : ["January","February","March","April","May","June","July"],
	datasets : [
		{
			fillColor : "rgba(220,220,220,0.5)",
			strokeColor : "rgba(220,220,220,1)",
			pointColor : "rgba(220,220,220,1)",
			pointStrokeColor : "#fff",
			data : [65,59,90,81,56,55,40]
		},
		{
			fillColor : "rgba(151,187,205,0.5)",
			strokeColor : "rgba(151,187,205,1)",
			pointColor : "rgba(151,187,205,1)",
			pointStrokeColor : "#fff",
			data : [28,48,40,19,96,27,100]
		}
	]
}

new Chart(ctx).Line(data);

El resultado será el siguiente:

Interesante, ¿verdad? Podéis encontrar el código en GitHub. No olvidéis echar un vistazo a la documentación.