Graficas de datos en App Inventor

En este nuevo articulo veremos como crear y mostrar graficas de datos en App inventor. Ya lo vimos en anteriores artículos, cuando mostramos como ver gráficos de datos desde una hoja de calculo de Google en App Inventor. Pero esta vez profundizaremos un poco mas en como es el procedimiento.

Te recomiendo que descargues esta guía gratuita en formato PDF para ver como crear direcciones web que muestran gráficos. Ya que en un simple articulo no se puede abordar toda la información relacionada.

Diseño para mostrar graficas de datos en App Inventor

Para este diseño se a utilizado una etiqueta en la parte superior que muestra un titulo de ayuda al usuario, en el que se le pide que ingrese datos numéricos. Mas abajo tenemos un campo de texto que esta configurado para solo admitir números. Debajo del campo de texto tenemos un botón al que se le ha resaltado con el color rojo y que tendrá la función de añadir los valores numéricos a la gráfica. También se ha añadido al diseño un desplegable, que tendrá la función de cambiar la manera de ver la grafica, es decir, podremos cambiar de una grafica de barras, a una grafica en forma circular, los elementos de cadena serán los siguientes «Gráfico de barras, Gráfico circular, Gráfico de líneas, Diagrama de Venn«.

También tendremos dos etiquetas, estas serán útiles a la hora de ingresar los datos a la dirección web que generemos. Las dejaremos ocultas y borraremos el texto que contiene por defecto. Esto último es muy importante ya que de lo contrario no funcionara. Y por último tendremos una imagen que será la encargada de recibir el grafico creado.

Programando nuestra App para mostrar graficas.

Lo primero será crear una variable global a la que llamaremos «ListaNúmeros» y que inicializaremos con una lista vacía. Esta lista contendrá los datos que mostrara nuestra grafica.

Ahora programaremos nuestro botón, cuando pulsemos este, comprobaremos que la caja de texto no este vacía, si no esta vacía añadiremos el número contenido en ella a nuestra lista. Recuerda que la caja de texto tiene que estar configurada para admitir solo números. Una vez que hemos introducido los datos contenidos en nuestra caja de texto, en nuestra lista, borraremos su contenido y también borraremos el contenido de nuestras etiquetas.

Ahora por cada elemento de la lista que hemos creado, ya contenga un solo elemento o dos, añadiremos a nuestra etiqueta números, el texto que ya contenía mas el valor de la posición recorrida en la lista y una coma. Haremos lo mismo para la etiqueta nombres pero esta vez sustituiremos la coma por el símbolo » | «.

Vamos a crear un procedimiento que se encargara de mostrarnos las grafica en nuestra imagen. Este procedimiento le vamos a llamar «Muestra_Grafica» . La mecánica será muy sencilla, por cada opción que tenga seleccionada en el componente desplegable, mostrare un tipo de grafico. Entonces lo único que tengo que hacer, es comprobar si el índice seleccionado es igual a uno. Si es cierto mostrare un grafico de barras.

Esto lo conseguimos poniendo la foto del componente imagen con la siguiente dirección web «https://chart.apis.google.com/chart?cht=bvs&chl=» donde cht=bvs mostrara un grafico de barras. Seguido el contenido de la etiqueta «nombres», menos el último carácter, ya que este es una coma, mas «&chco=FF000000&chxt=y&chbh=a&chs=300×250&chco=A2C180&chtt=» que configurara tanto el tamaño como color etc… Podréis encontrar mas información en el PDF que he dejado para la descarga. El titulo, yo he puesto titulo, vosotros podéis poner lo que queráis. Mas «&chd=t:» que mostrara el nombre a cada dato, estos nombre los sacaremos de nuestra etiqueta nombres, y haremos lo mismo que con la anterior etiqueta, quitaremos el último carácter.

Para todas las siguientes opciones del componente desplegable haremos exactamente lo mismo. Lo único que modificaremos es «cht=bvs«. que para cada opción seleccionada será de la siguiente manera:

Gráfico circular: cht=p

Grafico de líneas: cht=Ic

Diagrama de Venn: cht=v

Una vez ya tengamos creado por completo nuestro procedimiento, lo insertaremos al final de nuestro bloque que detecta el clic del botón.

Ahora lo que haremos es mostrar una grafica distinta dependiendo de la selección del desplegable, si la opción seleccionada, es mostrar un grafico circular, la imagen cambiara para mostrarnos una imagen circular. Esto lo conseguimos llamando a nuestro procedimiento «Muestra_Grafica» cada vez que seleccionemos una opción del desplegable.

Bueno te invito a que experimentes con los tamaños, colores, formas, ayudándote con el PDF que podrás descargar. Ya sabes que si quieres que hablemos de algún tema o si tienes alguna duda, deja un comentario.