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!

Leave a Reply