Gráficos con React Google Charts

Usar gráficos es la manera más profesional de organizar, expresar y realizar un seguimiento de los resultados. Si están bien estructurados, facilitan su comprensión y se vuelven esenciales para el día a día corporativo y, en consecuencia, para aplicaciones que involucren cualquier tipo de monitoreo y demostración de datos.

Dada su importancia, a través de este artículo traigo una guía paso a paso sobre cómo usar React Google Charts, una biblioteca que ayuda de manera increíble en la creación y manipulación de gráficos con React. ¡Vamos allá!

Para empezar, ¿qué es React?

React es una biblioteca JavaScript de código abierto utilizada por varias empresas conocidas como Facebook, Netflix e Instagram, enfocada en crear interfaces de usuario de una manera mucho más práctica que usar JavaScript puro. React ha ganado cada vez más espacio porque es fácil de asimilar, comprender y adaptar.

Primeros pasos con React Google Charts

React Google Charts es una biblioteca para React enfocada en desarrollar gráficos con una practicidad asombrosa. Para demostrar lo verdaderamente fácil que puede ser graficar con esta herramienta, crearemos uno tipo pizza (Pie Chart) junto con su ayuda.

El primer paso es crear un proyecto React e instalar React Google Charts inmediatamente después. Si todo va bien, cuando reproduzcas el siguiente código en tu terminal, se abrirá en el navegador una página con el símbolo de React en movimiento:

npx create-react-app react-graphics
cd react-graphics
npm install
npm install --save react-google-charts
npm start

Criando um gráfico do tipo Pizza com React

Si nos paramos a pensarlo, todos los gráficos tienen algo en común: dependen de datos. Dicho esto, comenzaremos por crear una lista con los datos que consumirá lo que estamos a punto de crear.

La estructura que utiliza React Google Charts para recibir datos debe crearse de tal manera que se almacene en un array de arrays. El array principal (el que almacena una lista de arrays) siempre tendrá en su primera posición un array que contiene un título que describe el gráfico y una breve y breve descripción del mismo, cada uno en una posición diferente.

Las demás posiciones de la array deben contener arrays con los datos que se mostrarán en el gráfico, siendo la primera posición su nombre y la segunda su valor.

Si parece un poco confuso, podemos simplificar la explicación demostrando cómo se debe hacer:

Ahora, importaremos el componente responsable de crear el gráfico en pantalla en función de las propiedades que recibirá. Su nombre es Chart y lo importaremos desde ‘react-google-charts’.

Hasta el momento no se ha mostrado nada en pantalla, ya que no hemos creado ninguna propiedad para el componente principal responsable de esta funcionalidad (Charts). Describamos algunos de los que usaremos:

• chartType - Es en esta propiedad donde informaremos el tipo de gráfico. Como queremos un gráfico circular, usaremos el string PieChart (todos los nombres de los gráficos están disponibles en la biblioteca de React Google Charts);
• data - Propiedad responsable de los datos que serán utilizados para la gráfica. En nuestro caso, recibirá la constante data;
• options - Recibe un objeto que puede tener una serie de orientaciones; en nuestro caso solo usaremos title (para definir un título a mostrar en pantalla para el gráfico) e is3D (para definir si será 3D o no);
• width - Define el ancho del componente que estamos creando;
• height - Establece la altura.
  

Manipulando datos de forma dinámica

Hasta aquí hemos creado de forma rápida, práctica y fácil (como prometimos) un gráfico que utiliza datos estáticos. Pero, ¿y si dependiéramos de los datos dinámicos enviados por el usuario?

Para satisfacer esta demanda, transferiremos nuestra constante data a un estado. De esta forma, siempre que se actualice, la gráfica también será:

Ahora, crearemos los inputs que recibirán el nombre de cada dato y su respectivo valor. Es a través de ellos que insertaremos valores al gráfico y, para ello, crearemos dos estados para el nombre y valor de los datos rellenados:

Ten en cuenta que borramos todos los datos contenidos en la array de estado de data, excepto la primera posición que contiene el título y la descripción. Dado que insertaremos los datos dinámicamente, ahora solo se necesita la primera posición (esencial para que nuestra implementación no se rompa).

Además, si te preguntas por qué se crean estados para los inputs, es muy simple: queremos agregar estos datos al gráfico solo después de hacer clic en un botón, que recopilará los valores de los estados name y value  y los agregará al estado de los datos del gráfico. De esta forma, es necesario crear este botón mencionado:

Todo listo para que nuestra aplicación incluya datos en nuestro gráfico circular con nombres y valores. Si hiciste todo bien, tendrás una aplicación con una funcionalidad como ésta:

Consideraciones finales

React Google Charts ofrece tantos tipos de gráficos como puedas imaginar. Ayuda mucho en la presentación de datos al proporcionar componentes fáciles de entender y sin mayores complejidades para el manejo y la edición.

Si llegaste hasta aquí en este artículo, no hace falta decir que las funciones de esta biblioteca se limitan a este gráfico de pizza que presentamos aquí. Sin embargo, si comprendes la estructura de cómo implementar un gráfico usando esta biblioteca, sin duda alguna no tendrás problemas para usar cualquier otra.

En tu viaje en este vasto mundo de la programación, ¿alguna vez has conocido alguna biblioteca que proporcione herramientas tan efectivas como React Google Charts?

¡Saludos!