Crear graficas de barra y lineas en javascript usando la libreria Chart.js

Hola que tal a todos, en esta ocasion les voy a mostrar como crear graficas web de barra y lineas usando una de mis librerias javascript favoritas, la libreria Chart.js que es una libreria fantastica y se pueden crear graficas de barras, lineas, de radar, polar, de dona, pie, burbujas y crear graficas mezcladas, y lo mejor Chart.js es software libre por lo que la podemos usar para nuestros proyectos comerciales.

Introduccion

En mi experiencia la libreria Chart.js es genial para todo tipo de proyectos y contiene las graficas basicas como ya las liste antes, tambien es muy ligera solo pera 141.Kb, aprovecha la caracteristica Canvas de HTML5 y son responsivas o adaptables entre dispositivos.

En este articulo solo hablare de 2 tipos de graficas, de linea y de barra que practicamente en el ambito de la libreria son iguales en programacion pero diferentes en visualizacion, mas adelante veremos las diferencias.

Descargar Chart.js

Podemos descargar la libreria Chart.js desde su sitio web http://chartjs.org , tambien la podemos descargar desde el repositorio de Github: https://github.com/chartjs/Chart.js en esta guia usaremos la version 2.2.1.

Lo unico que necesitamos para empezar es el archivo Chart.min.js: https://github.com/chartjs/Chart.js/releases/download/v2.2.1/Chart.min.js

Empecemos

Para empezar debemos crear un documento HTML e incluir en la cabecera del documento el script Chart.min.js.

Debemos crear una etiqueta canvas, ponerle un id y medidas width y height.

<canvas id="chart1" width="400" height="100"></canvas>

 

Ahora vamos a explicar un poco el script para crear una grafica de barras.

Debemos crear una instancia del objeto canvas.

var ctx = document.getElementById("chart1");

 

Recordamos que el ID del elemento canvas es “chart1” y obtenemos el contexto mediante la clasica funcion document.getElementById.

Ahora vamos con los datos de la grafica, digamos que una grafica puede tener 1 o mas datasets, pero estos datasets deben tener la misma estructura para darle el mismo significado a la grafica, por ejemplo un dataset seria “Dias de uso en Enero” otro dataset podria ser “Dias de uso en Febrero”, en este ejemplo mostramos.

Datos y datasets

Ejemplo con 1 dataset

var data = {
labels: ["Dia 1", "Dia 2", "Dia 3" ],
datasets: [{
label: '# Dias de uso Enero',
data: [20, 50, 10 ],
backgroundColor: [
'rgba(100, 100, 100, 0.25)',
'rgba(100, 100, 100, 0.25)',
'rgba(100, 100, 100, 0.25)',
],
borderColor: [
'rgba(200,200,200,1)',
'rgba(200,200,200,1)',
'rgba(200,200,200,1)',
],
borderWidth: 2
}]
};

Ejemplo con 2 datasets:

var data = {
labels: ["Dia 1", "Dia 2", "Dia 3"],
datasets: [{
label: '# Dias de uso Enero',
data: [20, 50, 10],
backgroundColor: [
'rgba(100, 100, 100, 0.25)',
'rgba(100, 100, 100, 0.25)',
'rgba(100, 100, 100, 0.25)',
],
borderColor: [
'rgba(200,200,200,1)',
'rgba(200,200,200,1)',
'rgba(200,200,200,1)',
],
borderWidth: 2
},
{
label: '# Dias de uso Febrero',
data: [20, 20, 20],
backgroundColor: [
'rgba(100, 100, 200, 0.25)',
'rgba(100, 100, 200, 0.25)',
'rgba(100, 100, 200, 0.25)',
],
borderColor: [
'rgba(200,200,255,1)',
'rgba(200,200,255,1)',
'rgba(200,200,255,1)',
],
borderWidth: 2
}
]
};

 

La estructura de la variable data podemos ver que es algo muy similar a json, principalmente esta dividida en labels y datasets.

• labels: son las etiquetas que aparecen en la parte inferior de la grafica, en nuestro caso serian “Dia 1”, “Dia 2”, “Dia 3”.
• datasets: Los datasets son los grupos de datos que se mostraran en la grafica, podemos mostrar 1 o 2 o mas datasets, siempre y cuando todo conserven la misma estructura, el nodo de datasets esta dividido en: label, data, backgroundColor, borderColor, borderWidth.
  • label: Label es la etiqueta del dataset, el significado de los datos de la grafica por ejemplo “Dias de uso en Enero”.
  • data: data al igual que las siguientes propiedades, son listas y las siguientes propiedades deben conicidir con el numero de elementos que contenga la propiedad data, en nuestro caso la propiedad data cuenta con 3 elementos: [20, 50, 10], estos datos pueden ser diferentes en cada dataset.
  • backgroundColor: es una propiedad que sirve para guardar un color y se traduce como el color de fondo de la grafica, al ser una lista de colores podemos darnos cuenta de que los colores pueden ser diferentes para cada barra de la grafica.
  • borderColor: es una propiedad que sirve para guardar un color y se tradude como el color de bordo de las barras de la grafica, la lista de colores debe conincidir con la lista de valores en data y backgroundColor.
  • borderWidth: este es un solo valor numerico y el valor contenido se traduce como el ancho o grosor del borde de las barras o lineas.

Opciones

La libreria tambien nos permite controlar ciertas opciones, las cuales las podemos encontrar en la documentacion y estas opciones dependen del tipo de grafica que usemos.

Link a la documentacion: http://www.chartjs.org/docs/#line-chart-chart-options

En mi caso usare estas opciones:

var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
};

 

 

Básicamente lo que hacemos con esta opciones es forzar el eje Y de la grafica para que empieze en valor 0, ya que por default el valor del eje Y empieza en el valor minimo que tengamos en los datos de nuestros datasets.

Grafica

Ya que tenemos los datos ahora vamos a llamar el objeto de la grafica:

var chart1 = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});

 

 

Veamos, aqui ya todo esta resumido:

• type, es el tipo de la grafica, para los datos que estamos usando lo podemos cambiar entre “bar”, “horizontalBar” y “line” y son ningun problema veremos la grafica cambiar de linea, linea horizontal y barras con solo refrescar la pagina.
• data: los datos de los que ya hablamos previamente, donde estan almacenados los datasets.
• options, las opciones de configuracion de la grafica.

Resultado y Codigo

El resultado del ejemplo de grafica que realizamos fue el siguiente:

A continuacion les dejo los codigos completos de los ejemplos que realize:

Link de descarga: http://atomcurve.com/11227357/chartjs1

Despues de hacer click, esperar unos segundos y despues hacer click en “saltar publicidad” arriba a la derecha y despues descargara.

Conclusion

Crear graficas con la libreria Chart.js es muy facil y practico, les invito a probar y a poner en practica lo que hallan aprendido y si tienen algo que agregar por favor escribanlo en los comentarios.

Les invito a que se suscriban al blog para que reciban un email cada vez que publique nuevos articulos.

Tambien les invito a que apoyen mi trabajo enviando una donacion voluntaria ya que esto me ayuda a crear contenido nuevo dia con dia.