Gráficas de barras con Chart.js y AngularJS para mostrar estadísticas y reportes

Introducción

En este post daré una pequeña introducción a la creación de gráficas de barras usando el poderoso y superheroico framework AngularJS. Usaremos también la librería llamada ChartJS y otra llamada angular-chart. Lo que hace ésta última es “pegar” o juntar a las dos primeras.

ChartJS puede ser usado sin ningún framework; es decir, podemos hacerlo con simple javascript, pero no queremos eso ahora. AngularJS, como todos lo sabemos, refresca la vista cuando detecta que algo en el controlador cambió, pero como ChartJS no tiene que ver nada con él, las gráficas no se dibujarán de nuevo cuando algún dato cambie. Aquí es en donde viene angular-chart que, como lo dije, funciona como un pegamento y hace que trabajemos con gráficas in the angular way.

Incluyendo archivos

Lo primero que tenemos que hacer es incluir las librerías antes mencionadas. Aquí podemos obtener la última versión estable de AngularJS, aquí la de Chart.js y finalmente aquí la de angular-chart.

Una vez incluidas, nuestro archivo html debería verse así:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
  <script type="text/javascript" src="https://cdn.rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.min.js"></script>
  <script src="script.js"></script>
</head>

<body>

</body>

</html>

Declarando app y controlador

Una vez que hemos incluido los scripts vamos a comenzar a declarar nuestra app y nuestro controlador principal. Así que en nuestro archivo de javascript pondremos lo siguiente:

angular
  .module("app", ['chart.js']) // Le decimos que usaremos a chart.js
  .controller("ControladorPrincipal", ["$scope", function($scope) {

  }]);

Ya declaramos todo en nuestro script. Ahora vamos a declararlo en nuestra vista agregando ng-app y ng-controller:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
  <script type="text/javascript" src="https://cdn.rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="ControladorPrincipal">
  </div>
</body>

</html>

Ahora sí nos vamos a centrar en las gráficas

Creando gráficas

Gráfica de barras

Para pintar nuestra gráfica, usaremos canvas. No tenemos que interactuar directamente con él; simplemente tenemos que definirlo con algunos atributos. Al agregar el canvas nuestra vista debe verse así:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
  <script type="text/javascript" src="https://cdn.rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="ControladorPrincipal">
    <canvas 
    class="chart chart-bar" 
    chart-data="datos" 
    chart-labels="etiquetas" 
    chart-series="series"></canvas>
  </div>
</body>

</html>

Si nos fijamos bien, el elemento canvas tiene muchos atributos desconocidos o raros. Aquí los explico:

id: El id que todos los elementos pueden tener. Es opcional
class: Dos clases, la clase chart y chart-bar. Chart-bar puede cambiar dependiendo del tipo de gráfica. Atributo requerido
chart-data: El nombre de la variable que se encuentra en el controlador. Estos datos son los que se van a dibujar en la gráfica. Éste debe ser un arreglo, más adelante lo explicaré
chart-labels: Las etiquetas o leyendas que serán dibujadas en el plano X
chart-series: Si vamos a hacer una comparación, aquí debemos poner cuántos campos queremos que salgan por cada etiqueta

Ahora vamos al controlador para que esto quede más claro. Así se debe ver:

angular
  .module("app", ['chart.js']) // Le decimos que usaremos a chart.js
  .controller("ControladorPrincipal", ["$scope", function($scope) {
    $scope.etiquetas = ['2006', '2007', '2008', '2009'];
    $scope.series = ['Ventas', 'Gastos'];

    $scope.datos = [
      [65, 59, 80, 81],
      [28, 48, 40, 19]
    ];
  }]);

Ahora sí podemos ver cómo se está dibujando la gráfica. En este caso vamos a comparar los gastos y las ventas por año. Comenzando con las etiquetas, podemos ver que son los años.

Son 4 años los que estamos comparando, por lo que los datos deben ser un arreglo de arreglos. Y dentro de cada arreglo están los datos que van a ir por año. Por ejemplo, en el 2006 se verá que para ventas hubo 65 y para gastos 28.

El resultado hasta el momento será el siguiente:

Gráfica de pastel

Ahora veremos cómo crear una gráfica pero de pastel. El código es casi el mismo que el anterior; sólo cambia el tipo de gráfica a chart-pie. Queda definida así:

 <canvas 
    class="chart chart-pie" 
    chart-data="datos" 
    chart-labels="etiquetas"></canvas>

Y en el controlador, los datos ahora estarán en un arreglo. No hacen falta definir series, pues no estamos comparando nada.

Como dije hace un momento, los datos estarán en un arreglo de una sola dimensión; contrario a cuando definimos una de barras. El código del controlador se ve así:

angular
  .module("app", ['chart.js']) // Le decimos que usaremos a chart.js
  .controller("ControladorPrincipal", ["$scope", function($scope) {
    $scope.etiquetas = ['Gastos', 'Ventas', 'Compras'];

    $scope.datos = [1244, 1500, 2053];
  }]);

El resultado es el siguiente:

Cambiando datos y refrescando gráficas

Si cambiamos algún dato dentro del modelo, se supone que debería refrescarse en la gráfica. Para ello usaremos el ejemplo de la gráfica de pastel. Agregaremos dos campos de texto para que se puedan agregar etiquetas y valores. Al presionar el botón, se podrá apreciar cómo se refresca la gráfica automáticamente.

Los campos de texto quedan definidos así:

    <canvas class="chart chart-pie" chart-data="datos" chart-labels="etiquetas"></canvas>
    <br>
    <input placeholder="Etiqueta" type="text" ng-model="etiqueta" />
    <br>
    <br>
    <input placeholder="Valor" type="number" ng-model="valor" />
    <br>
    <br>
    <button ng-click="agregarDato(etiqueta, valor)">Agregar</button>

Al hacer click en el botón, se llamará al método agregarDato que reside en el controlador. Se le pasarán como argumentos la etiqueta y el valor.

angular
  .module("app", ['chart.js']) // Le decimos que usaremos a chart.js
  .controller("ControladorPrincipal", ["$scope", function($scope) {
    $scope.etiquetas = ['Gastos', 'Ventas', 'Compras'];

    $scope.datos = [1244, 1500, 2053];
    $scope.agregarDato = function(etiqueta, valor) {
      if (etiqueta && valor) { //Comprobar si no son nulos o indefinidos
        $scope.datos.push(valor);
        $scope.etiquetas.push(etiqueta);
      }
    };
  }]);

Lo único que hacemos es agregar un valor al arreglo de etiquetas y datos. Obviamente los validamos antes de meterlos. Aquí los resultados:

Conclusión

Como podemos ver, se pueden crear gráficas de barras con AngularJS de una forma muy fácil. Definimos el elemento canvas en la vista y los datos en el contrador. Sólo eso, de lo demás se encarga el framework.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/