Graficas de datos en App Inventor

w1cQsL2rRAoFVoYY17IkFB2v zIgtbZDLgYCw4Ae BOKTl7CQ04xkPPIwYiC4slnOsGG3BOCSf4dlS3kL169wOJtaV 7E2thiC Y 1R5cOuAndiJWrfXQM3PaIqJYr2ZPry4Ajwu - 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.

u46kQg5gkr0FbWL5Gyvgfm78rwzCgSJklNsTf qGPbQD62W0snYg4AjNhfa9 OmisRuZcfXb4xzhAl0dkRgYMz2behUnJ1E34u3DiLOXOdr gmr1KsPZJsyI3NGS BztwERUTisd - Graficas de datos en App InventorGM54wsBGIqgBQnycWFCqBUVarwmAS4pCLfiwGudCxk6KE1HmqikreOqZeefVT0xgr1qwFZk71xBZ3sb J3o6Kwmmq5ECBUjrgpU5chfCrVba90e1KUY9koQM VPGuT iZFDnuOY  - Graficas de datos en App Inventor

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.

6NezCmh dxv3ExeG wHoOQq2tAJx0lbxfYauQrSAhaUqUh4pmUXP7W7z4HptZpUmYMZ9R6gn bj55ZAmwDSoLqJNOI607YZUpVABuJ96dV gGSf1By tAIREwRZMWJQdtKtETF4M - Graficas de datos en App Inventor

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.

oQGQIjeEo St3HKaeqt s3 H0A2cnOd6qgvInxi3qw4q1U gSTdsKdhKUtZD9NvmdXSn DVbaPUpctqYFkPtQCcAkFdqiRoTN05yKM4YBcWHeLMMBAkMCLQMbXwCaubaczRMRPTV - Graficas de datos en App Inventor

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 » | «.

heBAuyqrGTLub0hl2fEwrOdbafy3kGECuIge0x0Sbsokeq5T4Wmqj0T7MFAf35dylLRuWWJ5TXhJYaiSGAsENBdTUo6JaTyTUPQForNeKIb5LeIakBvRVHs39b22xxq2X4GrUabp - Graficas de datos en App Inventor

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.

3PpQatdL j4NFDUJULQ4QCnoWYumcOSu1dOoiOHADJo2XoWNCbLcmJqO88pVMXrx4n74DxAQ08sFAP1N2Zf9qMlx0QV4hDKwESORaO5NW2uxlhgrMlXefKmgRMX1Q44PVLWADYac - Graficas de datos en App Inventor

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.

ITdbmFcWvhBAu4U1j 0QyrWy SawQ1sFqHFdy0NcXtcSqZbhY3kBgdMJv b7WTgnGFp7piIskTUx8yUMYJg1JYu8PEL1moNCKUAHmAIkDmG4dKM5IH6KQ9Femz  Af7qmz2oGC3 - Graficas de datos en App Inventor

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.

4l8KDg4dqXKVWzAtMe8LZaESLOjck7SDog8 kP3aKLo94ykj6cHydQs6kQhGhFb3N8t8XGd26632msqQ4yupXMCzssj2ccOk8iHTLI2cUhLG3GBrXgTygC2mDg Y63yuob2rwIs - Graficas de datos en App Inventor

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.

Deja un comentario

error: Content is protected !!