viernes, 12 de junio de 2020

Gráficos Excel en App Inventor

Tras el árticulo que lanzamos hace unos meses de cómo usar una hoja de cálculo de Google en App Inventor 2. Muchos de vosotros me han pedido que explique cómo mostrar gráficos de excel en nuestra aplicación.

Para ello nos vamos ayudar de la API de Google Chart, para poder crear gráficos de barras con los datos contenidos en nuestra hoja de Excel.

Para todo esto necesitaremos continuar con la aplicación que construimos en el citado articulo. Verás que con una serie de modificaciones la aplicación podrá mostrar un gráfico de barras.

Que es Google Chart API

Vamos a hablar un poco sobre una herramienta de Google llamada Google Chart API. Esta herramienta permitirá la construcción de gráficos en forma de imágenes en formato PNG. Podremos usar en nuestras aplicaciones de App Inventor usando el componente Web. El uso es sencillo, mediante una llamada http a una url (https://developers.google.com/chart/) y mandando una serie de parámetros se nos devolverá una imagen. Como casi todo lo que desarrollada Google es de uso gratuito pero con ciertas limitaciones. En el caso de Google Chart API inicialmente estaba limitado su uso a 50.000 peticiones por url y día. Pero actualmente este límite ha subido hasta situarse en 250.000. Lo que parece un valor bastante aceptable.

En el siguiente ejemplo podemos ver cómo configurar una dirección web para que nos devuelva un gráfico en forma de tarta.

(https://chart.apis.google.com/chart?cht=p3&chl=A|B&chco=FF000000&chxt=y&chbh=a&chs=300×250&chco=A2C180&chtt=Precio&chd=t:20,10,50,45,35)

Pues es esto mismo lo que vamos a utilizar para nuestra aplicación. Recogiendo una serie de datos metidos en una hoja de Excel, crearemos una pantalla que mostrará un gráfico donde represente dichos datos.

Diseñando nuestra aplicación para mostrar gráficos Excel App Inventor 2

Como comentaba al comienzo de este árticulo vamos a modificar la aplicación que construimos en su día para ver el manejo de datos en un Excel.

Si eres nuevo o no realizaste el tutorial te recomiendo encarecidamente que eches un vistazo al tutorial cómo usar una hoja de cálculo de Google en App Inventor 2. Ya que de lo contrario será imposible continuar este tutorial.

La primera modificación que vamos a realizar a la aplicación es añadirle una pantalla más. Vamos a llamarla «NuevaScreen» y dentro le vamos a colocar un componente imagen. De alto y ancho tendrá que ocupar el total de la pantalla de nuestro dispositivo. Para ello seleccionaremos ajustar al contenedor. Necesitaremos el componente no visible Web, que en su propiedad Url copiaremos la dirección que teníamos en el mismo componente de la pantalla 2. Nos va devolver el listado de datos de nuestra hoja Excel en formato CSV, que lo utilizaremos para recopilar datos que mostrará el gráfico. He añadido una etiqueta a la pantalla. Esta etiqueta no es necesaria, simplemente mostrará el resultado de la construcción de la dirección web encargada de mostrar el gráfico.

Por último deberemos añadir un botón más a Screen1 para mas tarde poder acceder a esta nueva pantalla.

Diseño de pantalla para mostrar gráficos Excel
Componentes de App inventor para mostrar gráficos Excel
Dirección web de Google chalet API Pen app inventor

Comenzando a programar nuestra aplicación de Gráficos de Excel en App Inventor

Bien, una vez situados en la pantalla de bloques, lo que vamos hacer es copiar todos y cada uno de los componentes de la pantalla 2, ya que utilizaremos la misma lógica para recopilar los datos que más tarde convertiremos en gráficos. Para ello arrastraremos los bloques de la Screen 2 que creamos en nuestro anterior proyecto a la mochila, y seguido copiaremos de la mochila a la nueva pantalla. Debemos descartar los bloques que hacían uso del visor de lista y de aquellos que mostraban o ocultaban la disposición vertical. Además dentro del procedimiento copiado, modificaremos el bloque «por cada elemento de la lista», dejando solo el bloque que añade elementos a la lista ListadoProductos, donde añadiremos el elemento recorrido de la TablaProductos en el índice 4. Quedará de la siguiente manera.

Conjunto de bloques para ver datos de Excel en App inventor

Ahora lo que necesitamos es generar una imagen que muestre los datos que queramos de nuestra lista. Para ello necesitamos construir una dirección web para Google chart api, y pasarle como parámetros los datos seleccionados de nuestra lista. Vamos hacer uso de la etiqueta «etiqueta1» para mostrar en la pantalla del dispositivo los datos a mostrar en la gráfica y que ayudará a su creación. Esta etiqueta no es necesaria, simplemente es una ayuda visual para una mejor comprensión. Podríamos sustituirla perfectamente esta etiqueta por una variable.

Vamos a mostrar un gráfico que recoja la variación del precio de cada producto, y que se mostrará en una gráfica de barras. Podríamos tener una excel a modo de almacén y que mostrará qué cantidad de unidades hay de cada producto. Lo primero que tenemos que hacer es recorrer la lista generada anteriormente «ListadoProductos» y que colocaremos dentro del procedimiento que hemos copiado en nuestra pantalla.

Editar lista generada

Si pudiéramos ver cada elemento de la lista recorrida veremos que algunos elementos son de texto y otros son de tipo numérico. Nosotros solo necesitamos los de tipo numérico ya que si intentamos generar la gráfica con datos que no son numéricos esta no se generará o se mostrará de una forma errónea. Vamos a solventar esto comprobando que el elemento seleccionado de la lista es un número.

Comprobar si algo es un número

Si recorriendo la lista un elemento es un número generamos un texto separado por comas, y que quedara guardado en la etiqueta1. Este texto contendrá lo que ya tenía guardado, más el elemento recorrido, más una coma. Quedará de la siguiente manera. (Recuerda que le vamos añadiendo datos por cada elemento de la lista no sustituyendo).

Añadir texto a una etiqueta

Una vez hecho esto crearemos una dirección web que la uniremos al componente imagen, para que muestre la gráfica. Para construir la dirección web uniremos el texto «https://chart.apis.google.com/chart?cht=bvs&chl=A|B&chco=FF000000&chxt=y&chbh=a&chs=300×250&chco=A2C180&chtt=» con la seleccion del elemento de la lista «ListadoProductos» en el índice uno, más «&chd=t:» seguido de la etiqueta que creamos anteriormente.

Creando una imagen con una dirección web de Google chalet API

Pero aquí nos surge un pequeño problema. La etiqueta que colocamos al final, contiene una coma al final del texto. Esta coma impedirá que se muestre los datos en la gráfica. Si ejecutas la aplicación podrás comprobar que el texto mostrado en la etiqueta contiene esa coma al final, y la gráfica no muestra las barras de datos. Esto lo vamos a solventar quitando la coma final, añadiendo una serie de bloques más, que de lo que se van a encargar es de ayudarnos a eliminarla.

Eliminar el último carácter de un texto
Abrir otra pantalla en App inventor 2

Solo nos queda programar la parte más sencilla. Y es el botón quedará acceso a nuestra nueva pantalla. Es tan sencillo como dirigirnos a la pantalla Screen1, y crear la lógica como los anteriores botones, pero ahora abriendo la pantalla «NuevaScreen».

Bien si pruebas la app verás que muestra un gráfico representando la variación de precios de los productos a modo de barras. Este gráfico puede ser modificado para mostrar un gráfico circular partido en porciones, o incluso variar el color o incluir texto, voy a dejar un PDF para que podáis aprender a generar gráficos para vuestras app.

Descarga el proyecto en formato AIA

Descarga PDF como construir una dirección Web para Google chart API

No hay comentarios:

Publicar un comentario

Compartir archivos y texto con Sharing

En alguna ocasión, tendrás que crear una aplicación en app inventor en la que quieras mandar fotos y videos a otras aplicaciones instaladas ...