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í:

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:

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

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í:

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:

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í:

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í:

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í:

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.

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 interesado en trabajar contigo de manera remota para llevar tu idea a la realidad, formar parte de tu equipo de desarrolladores, ayudarte con tu tarea, dar asesorías y todo lo relacionado con tecnología y programación. Contáctame para más información
No te vayas sin seguirme en Twitter, Facebook y GitHub
Si tienes dudas déjalas en un comentario, pero asegúrate de seguirme antes como agradecimiento (no te cuesta nada y me ayudas mucho)


parzibyte

He trabajado por más de 4 años en el desarrollo de software con experiencia en Java, PHP, JavaScript, HTML, Node.JS, Python, Android y Go. También he trabajado con bases de datos SQL como MySQL y SQLite, así como con bases de datos NoSQL usando MongoDB. Soy bueno utilizando algunos frameworks y herramientas como Firebase, jQuery, AngularJS, VueJS, CodeIgniter, Laravel, BulmaCSS, Bootstrap y Electron. Otros términos que conozco son: Arduino, GraphQL, API's, REST, AJAX, PouchDB, CouchDB, Experiencia de usuario, buenas prácticas de programación, Webpack, NPM, Administración de servidores y programación de scripts La plataforma en la que tengo más experiencia es la web, pero en mis ratos libres realizo unos pequeños ejercicios en C# y C. Estoy aquí para ayudarte a resolver tus problemas de programación y depuración :-)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

A %d blogueros les gusta esto: