===== Gráficos Barras Tarta ===== En los framework de Android e iOS, es posible representar un content en forma de gráfico, éste puede ser de varios tipos. \\ \\ |< 80% 20% 80% >| ^ Tipos de Gráficos por plataforma ^^ ^ Android |**Barras** (barchart,3dbarchart,slidingbarchart), **Tarta** (piechart,piechart2), **Series de tiempo** (timeserieschart) y **líneas** (linechart,xylinechart)| ^ iOS (Iphone e Ipad) |**Tarta** (piechart), **Media Tarta** (halfpiechart)| \\ ==== Tipos de Gráficos ==== \\ |< 100% 33% 33% 33% >| ^ 1.- Gráfico de Barras. viewmode="barchart" ^ 2.- Barras en 3D. viewmode="3dbarchart" ^ 3.- Barras Diseño Deslizante. viewmode="slidingbarchart" ^ | {{ :b.-programacion:b18.-extras:graficos:barras.png?350 }} | {{ :b.-programacion:b18.-extras:graficos:barras_3d.png?350 }} | {{ :b.-programacion:b18.-extras:graficos:barras_deslizante.png?350 }} | ^ 4.- Gráfico tipo Tarta. viewmode="piechart" ^ 5.- Tarta Alternativo. viewmode="piechart2" ^ 6.- Línea de tiempo. viewmode="timeserieschart" ^ | {{ :b.-programacion:b18.-extras:graficos:pastel.png?350 }} | {{ :b.-programacion:b18.-extras:graficos:pastel_alternativo.png?350 }} | {{ :b.-programacion:b18.-extras:graficos:tiempo.png?350 }} | ^ 7.- Gráfico de líneas. viewmode="linechart" ^ 8.- Gráfico de líneas XY. viewmode="xylinechart" ^ | {{ :b.-programacion:b18.-extras:graficos:lineas.png?350 }} | {{ :b.-programacion:b18.-extras:graficos:lineas_xy.png?350 }} | \\ Para su uso en Android, es necesario descargar e instalar el plugin xonecharts, disponible en xonesupport. \\ ==== Código Mappings ==== \\ La colección de cabecera, será una colección "especial" que no tendrá ni SQL ni tabla de BD asociada. Contendrá el prop de llamada a la colección contents indicándole a ésta el modo de visualización que se desea para el gráfico.\\ \\ **1.- Atributos en colección de Cabecera** |< 100% 12% 16% 72% >| ^ Atributo ^ Nivel ^ Descripción | ^ special="true" | Coll | Indica que esta colección es una colección especial que no lee nada de BD. | ^ notab="true" | Coll | Para que no saque pestañas en la parte superior y tengamos toda la pantalla disponible. | ^ classid="xonecharts" | Prop de llamada al contents | Instancia al plugin de los gráficos. | ^ viewmode="barchart" | Prop de llamada al contents | Tipo de gráfico que se desea, los tipos disponibles son: **"barchart"**, **"3dbarchart"**, **"slidingbarchart"**, **"piechart"**, **"piechart2"**, **"timeserieschart"**, **"linechart"**, **"xylinechart"**, **"halfpiechart"** (Solo iPhone/iPad) | ^ width="100%" | Prop de llamada al contents | Ancho en pantalla del gráfico. | ^ height="100%" | Prop de llamada al contents | Alto en pantalla del gráfico. | ^ mask="0" | Prop de llamada al contents | Para que no se pueda tocar nada. | \\ En cuanto a la colección Contents, es la que tendrá los datos y en cada uno de los prop tendremos que poner distintos atributos para definir los valores de las Series y Categorías (Gráfico de Barras) para alimentar el gráfico.\\ \\ **2.- Atributos en colección Contents** |< 100% 20% 8% 72% >| ^ Atributo ^ Nivel ^ Descripción | ^ dependent="false" y check-owner="false" | Coll | Para indicarle a la maquinaria que el contents no tiene ningún campo vinculado a la "cabecera", que es independiente y no intente enlazarlo con esta. | ^ chart-serie-title="true" y chart-serie="true" | Prop | Se aplica al prop que define los valores de las series del eje X | ^ chart-category="true" | Prop | Se aplica al prop que define el valor de cada una de las barras de una serie (Solo gráficos de barras) | ^ chart-category-color="#FF0000"| Prop | Se aplica a los prop que definen los valores de las categorías para los gráficos de barras. Si no se define ningún prop con este atributo, se establece un color aleatorio. | ^ chart-serie-color="true" | Prop | Se aplica al prop que define el valor del color, para los gráficos de tarta o líneas. Si no se define ningún prop con este atributo, se establece un color aleatorio. | ^ chart-max-visible-columns="3" | Prop | Para definir el número de series a mostrar simultáneamente, a través de una barra deslizante en la parte superior, vamos recorriendo las distintas series (Eje X), que tengamos definidas. (Solo Sliding) | \\ ==== Gráfico de Barras ==== \\ En un gráfico de barras, las series corresponden a los valores del Eje X, sin embargo, éstos pueden a su vez desglosarse en Categorías (Barras).\\ \\ ^ Explicación Series y Categorías en gráfico de barras. ^ | {{ :b.-programacion:b18.-extras:graficos:graficos_explicacion_series_barras.png?nolink }} | \\ === Ejemplo Barras === \\ \\ NOTA: onback es un nodo exclusivo de Android para controlar la pulsación del botón "Atrás". \\ === Gráfico de Barras en 3D === \\ Similar al anterior en cuanto a código. La diferencia se encuentra en el atributo **viewmode="3dbarchart"** en la colección de cabecera que llama al contents donde se definen los datos.\\ El contents que define los datos que alimentan el gráfico **ES EL MISMO** para todos los gráficos de barras.\\ \\ ^ Explicación Series y Categorías en gráfico de barras 3D. ^ | {{ :b.-programacion:b18.-extras:graficos:graficos_explicacion_barras3d.png?nolink }} | \\ === Ejemplo Barras 3D === \\ \\ === Gráfico de Barras Deslizante === \\ Con respecto a los anteriores, cambia el atributo **viewmode="slidingbarchart"** en la colección de cabecera que llama al contents donde se definen los datos.\\ El contents que define los datos que alimentan el gráfico ES EL MISMO para todos los gráficos de barras.\\ \\ ^ Explicación Series y Categorías en gráfico de barras 3D. ^ | {{ :b.-programacion:b18.-extras:graficos:graficos_explicacion_barra_deslizante.png?nolink }} | \\ En cuanto a la barra deslizante de la parte superior, es un control que vamos a utilizar para ir mostrando unas series u otras en el Eje X cuando se trata de muchas series que no caben en un único gráfico, definiendo el número máximo de series a mostrar, la barra superior de "navegación" de las series tendrá más o menos "hitos".\\ \\ **1.- Atributos a destacar en el prop de llamada al contents ** |< 100% 26% 74% >| ^ Atributo ^ Descripción | ^ viewmode="slidingbarchart" | Tipo de gráfico que se desea, en el caso que nos ocupa, de tipo Slide. | ^ chart-max-visible-columns="3" | Para definir el número de series a mostrar simultáneamente, a través de una barra deslizante en la parte superior, vamos recorriendo las distintas series (Eje X), que tengamos definidas. | ^ chart-lock-x-axis="true" | Así se puede bloquear también el Eje X, pues si no se especifica este atributo también se puede desplazar el Eje X con el dedo sin necesidad de utilizar la barra superior. | ^ chart-lock-y-axis="true" | Para evitar el desplazamiento por el Eje Y. | ^ chart-linked-seekbar="MAP_XONESEEKBAR" | Nombre del Prop que define la barra de navegación de las series del gráfico. | \\ **2.- Atributos del prop que define la barra de navegación ** |< 100% 26% 74% >| ^ Atributo ^ Descripción | ^ viewmode="seekbar" | Define el comportamiento del tipo Slide. | ^ img-thumb="thumb.png" | Imagen que queremos utilizar como "marcador" en la barra. | ^ img-progress-left="progress_left.png" | Imagen de fondo de la barra de navegación. | \\ \\ === Ejemplo Sliding === \\ \\ === Gráfico de tipo Tarta === \\ Actualmente existen dos modelos, la diferencia se encuentra en el atributo **viewmode="piechart"** o **viewmode="piechart2"** en la colección de cabecera que llama al contents donde se definen los datos.\\ El contents que define los datos que alimentan el gráfico ES EL MISMO para los dos modelos.\\ \\ A diferencia de los gráficos de Barras, únicamente tendremos series simples, no tendremos categorías.\\ \\ ^ Modelo 1. Gráfico de tipo Tarta (piechart) ^ Modelo 2. Gráfico de tipo Tarta con Zoom (piechart2) ^ | {{ :b.-programacion:b18.-extras:graficos:pastel.png?350 }} | {{ :b.-programacion:b18.-extras:graficos:pastel_alternativo.png?350 }} | \\ \\ ** Atributos del contents tipo tarta ** |< 100% 26% 74% >| ^ Atributo ^ Descripción | ^ chart-serie-title="true" y chart-serie="true" | La prop donde se encuentren estos atributos corresponderán a los títulos de las distintas porciones del gráfico. | ^ chart-value="true" | Contiene los valores a representar. | ^ chart-serie-color="true" | Colores a representar. | === Ejemplo Tarta === \\ === Gráfico de Líneas de Tiempo === \\ Atributo **viewmode="timeserieschart"** en la colección de cabecera que llama al contents donde se definen los datos.\\ \\ ^ Gráfico de Líneas de Tiempo. (timeserieschart) ^ | {{ :b.-programacion:b18.-extras:graficos:tiempo.png?350 }} | \\ \\ ** Atributos del contents de lineas de tiempo ** |< 100% 26% 74% >| ^ Atributo ^ Descripción | ^ chart-serie-title="true" y chart-serie="true" | La prop donde se encuentren estos atributos corresponderán a los títulos de las distintas porciones del gráfico. | ^ chart-date="true" | Contiene las fechas a representar. | ^ chart-value="true" | Contiene los valores a representar. | ^ chart-serie-color="true" | Colores a representar. | ^ chart-serie-line-width="true" | Define el ancho de la línea. | \\ === Ejemplo líneas de tiempo === \\ \\ === Gráfico de Líneas === \\ Atributo **viewmode="linechart"** en la colección de cabecera que llama al contents donde se definen los datos.\\ \\ ^ Gráfico de Líneas. (linechart) ^ | {{ :b.-programacion:b18.-extras:graficos:lineas.png?350 }} | \\ \\ ** Atributos del contents del gráfico de líneas ** |< 100% 26% 74% >| ^ Atributo ^ Descripción | ^ chart-serie-title="true" y chart-serie="true" | La prop donde se encuentren estos atributos corresponderán a los títulos de las distintas porciones del gráfico. | ^ chart-serie-column="true" | Indica que el prop corresponde a una columna del Eje X | ^ chart-serie-color="true" | Colores a representar. | ^ chart-serie-line-width="true" | Define el ancho de la línea. | \\ === Ejemplo gráfico de líneas === \\ \\ === Gráfico de Líneas XY === \\ Atributo **viewmode="xylinechart"** en la colección de cabecera que llama al contents donde se definen los datos.\\ \\ ^ Gráfico de líneas XY. ^ | {{ :b.-programacion:b18.-extras:graficos:lineas_xy.png?350 }} | \\ \\ ** Atributos del contents del gráfico de líneas XY ** |< 100% 26% 74% >| ^ Atributo ^ Descripción | ^ chart-serie-title="true" y chart-serie="true" | La prop donde se encuentren estos atributos corresponderán a los títulos de las distintas porciones del gráfico. | ^ chart-serie-x="true" | Indica que el prop corresponde con los valores del Eje X | ^ chart-serie-y="true" | Indica que el prop corresponde con los valores del Eje Y | ^ chart-serie-color="true" | Colores a representar. | ^ chart-serie-line-width="true" | Define el ancho de la línea. | \\ === Ejemplo líneas XY === \\ \\ ==== Descarga de ejemplo ==== \\ Descargar la última versión del xonecharts.apk y del Framework desde la web del xonesupport. \\ **Aplicación XOne con todos los ejemplos anteriores:**\\ http://www.xoneisp.com/XN/DemoCharts.zip