Ahora toca el turno de hablar de Chart.js, la cuál es una excelente herramienta que nos permite crear gráficas con javascript. De acuerdo a la documentación oficial ChartJS es open source, nos permite crear hasta 8 tipos de gráficas, utiliza el elemento canvas de HTML5 y además las gráficas generadas son responsivas.
En esta práctica veremos como crear la gráfica de barras, lineal, de pastel y de dona, así como la configuración mínima necesaria y algunos aspectos de personalización.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script> <!-- Importamos el script de Chart.js -->
<script>
//Definimos el contexto de la gráfica en JS
var contexto = document.querySelector('#grafica-barra');
//Debemos crear un objeto de configuración donde definiremos el tipo de gráfica, la información que contendrá y
// las opciones de escalas y ejes.
var configuracion = {
type: 'bar', //Tipo de gráfica
data: { //Aqui definimos el nombre, el tamaño y el color de cada barra de la gráfica
labels: ["Ruby", "Javascript", "PHP", "Python", "Java", "C++"], //Etiqueta de cada barra
datasets: [{ //
label: 'Número de votos',
data: [12, 19, 3, 5, 2, 3], //Barras de la gráfica
backgroundColor: [ //Color de relleno de cada barra respectivamente
'rgba(255, 99, 132, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [ //Color del borde de cada barra
'rgba(255,99,132,1)',
'rgba(255, 206, 86, 1)',
'rgba(54, 162, 235, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 2 //Ancho del borde de cada barra
}]
},
options: {
responsive: true, //True por defecto
scales: {
yAxes: [{
ticks: {
beginAtZero: true //Si es false empezaría en el valor de la barra más pequeña
}
}]
}
}
};
//Ahora ya podemos generar nuestra gráfica creando una instancia de Chart(), a la cuál debemos pasarle dos párametros,
// el primero es el contexto y el segundo es el objeto con la configuración de nuestra gráfica.
var myChart = new Chart(contexto, configuracion);
</script>
<script>
var horizontalBar = new Chart(document.querySelector('#grafica-barras-horizontal'), {
type: 'horizontalBar',
data: { //Aqui definimos el nombre, el tamaño y el color de cada barra de la gráfica
labels: ["Ruby", "Javascript", "PHP", "Python", "Java", "C++"],
datasets: [{
label: 'Número de votos',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
xAxes: [{
stacked: false,
ticks: {
beginAtZero: false //El primer valor será el valor de la barra más pequeña
}
}],
yAxes: [{
stacked: true
}]
}
}
});
</script>
<script>
var linealChart = new Chart(document.querySelector('#grafica-lineal'), {
type: 'line',
data: {
labels: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio"],
datasets: [
{
label: "Número de repositorios nuevos",
fill: true, //Si es true toda el área bajo la linea se sombrea, si es false solo aparece la linea
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'mitloer',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 5, //Ancho de los puntos en las intersecciones
pointHoverRadius: 10, //Ancho del punto al hacer hover
pointHoverBackgroundColor: "rgba(75,192,192,1)", //Color del punto de intersección
pointHoverBorderColor: "rgba(220,220,220,1)", //Color del borde del punto de intersección
pointHoverBorderWidth: 2, //Ancho del circulo que se añade al hacer hover
pointRadius: 5, //Ancho del circulo
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40], //Altura del punto de acuerdo al eje Y
spanGaps: false
}
]
},
options: {
scales: {
xAxes: [{
display: true
}],
yAxes: [{
stacked: true
}]
}
}
});
</script>
<script>
var circularChart = new Chart(document.querySelector('#grafica-circular'), {
type: 'pie', //Gráfica circular
data: {
labels: ['Android', 'iOS', 'Otros'], //Etiquetas
datasets: [
{
data: [80, 15, 5], //Cantidad de la ¿rebanada?
backgroundColor: [ //Color del segmento
"#8BC34A",
"#03A9F4",
"#FFCE56"
],
hoverBackgroundColor: [ //Color al hacer hover al segmento
"#7CB342",
"#039BE5",
"#FFA000"
]
}]
}
});
</script>
<script>
//La única diferencia entre una gráfica de dona y circula es el type
var circularChart = new Chart(document.querySelector('#grafica-dona'), {
type: 'doughnut', //Gráfica de dona
data: {
labels: ["Windows", "Mac", "Linux"],
datasets: [
{
data: [75, 20, 5],
backgroundColor: [
"#F4511E",
"#ECEFF1",
"#2196F3"
],
hoverBackgroundColor: [
"#F4511E",
"#ECEFF1",
"#2196F3"
]
}]
}
});
</script>
Como pueden observar las gráficas son muy fácil de implementar y de personalizar. En la documentación oficial pueden encontrar la lista completa de opciones de cada tipo de gráfica y más opciones de personalización. Para la segunda parte de esta práctica se verán funciones y usos más avanzados. Pueden descargar este y los demás ejercicios en el repositorio oficial: Prácticas Blog HOC Labs
Si tienen alguna duda, comentario o aclaración no duden en escribirla debajo!
