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.
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
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
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
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. |
---|
Ejemplo Barras
<coll name="GraficoDeBarrasDiseno01" special="true" sql-debug="true" notab="true" autorefresh="true" title="Gráfico de barras" sql="" objname="" updateobj="" progid="ASData.CASBasicDataObj"> <group name="General" id="1" imgbk="fondo_cielo.png" /> <prop name="@ObjetivosFamiliasBarras" group="1" classid="XOneCharts" viewmode="barchart" type="Z" contents="ObjetivosFamiliasBarras" width="100%" height="100%" mask="0" /> <contents name="ObjetivosFamiliasBarras" src="ObjetivosFamiliasBarras" /> <onback> <action name="runscript"> <script language="VBScript"> appdata.FailWithMessage -11888, "##EXIT##" </script> </action> </onback> </coll> <coll name="ObjetivosFamiliasBarras" fontsize="8" title="ObjetivosfamiliasBarras" objname="ObjetivosFamilias" updateobj="ObjetivosFamilias" progid="ASData.CASBasicDataObj" sql="SELECT t1.ID,t1.FAMILIA,t1.REALMES,t1.PPTOMES,t1.ACUMULADOREAL,t1.ACUMULADOPPTO FROM ##PREF##ObjetivosFamilias t1" dependent="false" check-owner="false"> <group name="General" id="1" /> <prop name="FAMILIA" type="T" chart-serie-title="true" visible="7" group="1" /> <prop name="REALMES" type="N2" chart-category="true" chart-category-color="#FF0000" title="Vencimiento" visible="7" group="1" /> <prop name="PPTOMES" type="N2" chart-category="true" chart-category-color="#FFFF00" title="Importe" visible="7" group="1" /> <prop name="ACUMULADOREAL" type="N2" chart-category="true" chart-category-color="#00FF00" title="Imp.Abierto" visible="7" group="1" /> <prop name="ACUMULADOPPTO" type="N2" chart-category="true" chart-category-color="#0000FF" title="Rec.Pagare" visible="7" group="1" /> </coll>
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. |
---|
Ejemplo Barras 3D
<coll name="GRAFICODEBARRAS3D" special="true" sql-debug="true" notab="true" autorefresh="true" sql="" objname="" updateobj="" progid="ASData.CASBasicDataObj"> <group name="General" id="1" imgbk="fondo_cielo.png" /> <prop name="@ObjetivosFamiliasBarras" group="1" classid="XOneCharts" viewmode="3dbarchart" type="Z" contents="ObjetivosFamiliasBarras" width="100%" height="100%" mask="0" /> <contents name="ObjetivosFamiliasBarras" src="ObjetivosFamiliasBarras" /> <onback> <action name="runscript"> <script language="VBScript"> appdata.FailWithMessage -11888, "##EXIT##" </script> </action> </onback> </coll> <coll name="ObjetivosFamiliasBarras" fontsize="8" title="ObjetivosfamiliasBarras" objname="ObjetivosFamilias" updateobj="ObjetivosFamilias" progid="ASData.CASBasicDataObj" sql="SELECT t1.ID,t1.FAMILIA,t1.REALMES,t1.PPTOMES,t1.ACUMULADOREAL,t1.ACUMULADOPPTO FROM ##PREF##ObjetivosFamilias t1" dependent="false" check-owner="false"> <group name="General" id="1" /> <prop name="FAMILIA" type="T" chart-serie-title="true" visible="7" group="1" /> <prop name="REALMES" type="N2" chart-category="true" chart-category-color="#FF0000" title="Vencimiento" visible="7" group="1" /> <prop name="PPTOMES" type="N2" chart-category="true" chart-category-color="#FFFF00" title="Importe" visible="7" group="1" /> <prop name="ACUMULADOREAL" type="N2" chart-category="true" chart-category-color="#00FF00" title="Imp.Abierto" visible="7" group="1" /> <prop name="ACUMULADOPPTO" type="N2" chart-category="true" chart-category-color="#0000FF" title="Rec.Pagare" visible="7" group="1" /> </coll>
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. |
---|
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
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
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
<coll name="GRAFICODEBARRASSLIDING" special="true" group-swipe="false" sql-debug="true" notab="true" autorefresh="true" sql="" objname="" updateobj="" progid="ASData.CASBasicDataObj"> <group name="General" id="1" imgbk="fondo_cielo.png" /> <prop name="MAP_XONESEEKBAR" title="" type="N2" visible="1" group="1" size="255" viewmode="seekbar" lmargin="7%" width="90%" height="25" img-thumb="thumb.png" img-progress-left="progress_left.png" /> <prop name="@ObjetivosFamiliasBarras" group="1" classid="XOneCharts" viewmode="slidingbarchart" chart-max-visible-columns="3" chart-linked-seekbar="MAP_XONESEEKBAR" Xchart-lock-x-axis="true" chart-lock-y-axis="true" xlocked="true" type="Z" contents="ObjetivosFamiliasBarras" width="100%" height="92%" mask="0" /> <contents name="ObjetivosFamiliasBarras" src="ObjetivosFamiliasBarras" /> <onback> <action name="runscript"> <script language="VBScript"> appdata.FailWithMessage -11888, "##EXIT##" </script> </action> </onback> </coll> <coll name="ObjetivosFamiliasBarras" fontsize="8" title="ObjetivosfamiliasBarras" objname="ObjetivosFamilias" updateobj="ObjetivosFamilias" progid="ASData.CASBasicDataObj" sql="SELECT t1.ID,t1.FAMILIA,t1.REALMES,t1.PPTOMES,t1.ACUMULADOREAL,t1.ACUMULADOPPTO FROM ##PREF##ObjetivosFamilias t1" dependent="false" check-owner="false"> <group name="General" id="1" /> <prop name="FAMILIA" type="T" chart-serie-title="true" visible="7" group="1" /> <prop name="REALMES" type="N2" chart-category="true" chart-category-color="#FF0000" title="Vencimiento" visible="7" group="1" /> <prop name="PPTOMES" type="N2" chart-category="true" chart-category-color="#FFFF00" title="Importe" visible="7" group="1" /> <prop name="ACUMULADOREAL" type="N2" chart-category="true" chart-category-color="#00FF00" title="Imp.Abierto" visible="7" group="1" /> <prop name="ACUMULADOPPTO" type="N2" chart-category="true" chart-category-color="#0000FF" title="Rec.Pagare" visible="7" group="1" /> </coll>
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.
Atributos del contents tipo tarta
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
<!-- ***** Diseño 1. (piechart) ***** --> <coll name="GRAFICODEQUESODISENO01" special="true" sql-debug="true" notab="true" autorefresh="true" sql="" objname="" updateobj="" progid="ASData.CASBasicDataObj"> <group name="General" id="1" imgbk="fondo_cielo.png" /> <prop name="@ObjetivosFamiliasQueso" group="1" classid="XOneCharts" viewmode="piechart" type="Z" contents="ObjetivosFamiliasQueso" width="100%" height="100%" mask="0" /> <contents name="ObjetivosFamiliasQueso" src="ObjetivosFamiliasQueso" /> <onback> <action name="runscript"> <script language="VBScript"> appdata.FailWithMessage -11888, "##EXIT##" </script> </action> </onback> </coll> <!-- ***** Modelo 2, con Zoom. (piechart2) ***** --> <coll name="GRAFICODEQUESODISENO02" special="true" sql-debug="true" notab="true" autorefresh="true" sql="" objname="" updateobj="" progid="ASData.CASBasicDataObj"> <group name="General" id="1" imgbk="fondo_cielo.png" /> <prop name="@ObjetivosFamiliasQueso" group="1" classid="XOneCharts" viewmode="piechart2" type="Z" contents="ObjetivosFamiliasQueso" width="100%" height="100%" mask="0" /> <contents name="ObjetivosFamiliasQueso" src="ObjetivosFamiliasQueso" /> <onback> <action name="runscript"> <script language="VBScript"> appdata.FailWithMessage -11888, "##EXIT##" </script> </action> </onback> </coll> <!-- ***** Contents para definir los campos que rellenan el gráfico. Común para los 2 modelos. ***** --> <coll name="ObjetivosFamiliasQueso" title="ObjetivosFamiliasQueso" objname="ObjetivosFamiliasQueso" updateobj="ObjetivosFamiliasQueso" progid="ASData.CASBasicDataObj" sql="SELECT t1.ID,t1.TITULO,t1.VALOR,t1.COLOR FROM ##PREF##ObjetivosFamiliasQueso t1" filter="" sort="" dependent="false" check-owner="false"> <group name="General" id="1" /> <prop name="TITULO" frame="id10" chart-serie-title="true" chart-serie="true" type="T" visible="7" group="1" /> <prop name="VALOR" frame="id10" chart-value="true" type="N2" visible="7" group="1" title="Valor" /> <prop name="COLOR" frame="id10" chart-serie-color="true" type="T" visible="0" group="1" /> </coll>
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.
Atributos del contents de lineas de tiempo
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
<coll name="GRAFICODETIEMPODISENO01" special="true" sql-debug="true" notab="true" autorefresh="true" sql="" objname="" updateobj="" progid="ASData.CASBasicDataObj"> <group name="General" id="1" imgbk="fondo_cielo.png" /> <prop name="@ObjetivosFamiliasTiempo" group="1" classid="XOneCharts" viewmode="timeserieschart" type="Z" contents="ObjetivosFamiliasTiempo" width="100%" height="100%" mask="0" /> <contents name="ObjetivosFamiliasTiempo" src="ObjetivosFamiliasTiempo" /> <onback> <action name="runscript"> <script language="VBScript"> appdata.FailWithMessage -11888, "##EXIT##" </script> </action> </onback> </coll> <coll name="ObjetivosFamiliasTiempo" fontsize="8" title="ObjetivosFamiliasTiempo" objname="ObjetivosFamiliasTiempo" updateobj="ObjetivosFamiliasTiempo" progid="ASData.CASBasicDataObj" sql="SELECT t1.ID,t1.SERIE,t1.PERIODO,t1.VALOR,t1.COLOR FROM ##PREF##ObjetivosFamiliasTiempo t1" filter="" sort="" dependent="false" check-owner="false"> <group name="General" id="1" /> <prop name="SERIE" frame="id10" chart-serie-title="true" chart-serie="true" type="T" visible="7" group="1" /> <prop name="PERIODO" frame="id10" chart-date="true" type="D" visible="7" group="1" /> <prop name="VALOR" frame="id10" chart-value="true" type="N2" visible="7" group="1" /> <prop name="COLOR" frame="id10" chart-serie-color="true" type="T" visible="0" group="1" /> <prop name="LINESERIEWIDTH" frame="id10" chart-serie-line-width="true" type="N2" visible="0" group="1" /> </coll>
Gráfico de Líneas
Atributo viewmode=“linechart” en la colección de cabecera que llama al contents donde se definen los datos.
Atributos del contents del gráfico de líneas
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
<coll name="GRAFICODELINEASDISENO01" special="true" sql-debug="true" notab="true" autorefresh="true" sql="" objname="" updateobj="" progid="ASData.CASBasicDataObj"> <group name="General" id="1" imgbk="fondo_cielo.png" /> <prop name="@ObjetivosFamiliasLineasNormales" group="1" classid="XOneCharts" viewmode="linechart" type="Z" contents="ObjetivosFamiliasLineasNormales" width="100%" height="100%" mask="0" /> <contents name="ObjetivosFamiliasLineasNormales" src="ObjetivosFamiliasLineasNormales" /> <onback> <action name="runscript"> <script language="VBScript"> appdata.FailWithMessage -11888, "##EXIT##" </script> </action> </onback> </coll> <coll name="ObjetivosFamiliasLineasNormales" fontsize="8" title="ObjetivosFamiliasLineasNormales" objname="ObjetivosFamiliasLineasNormales" updateobj="ObjetivosFamiliasLineasNormales" progid="ASData.CASBasicDataObj" sql="SELECT t1.ID,t1.SERIE,t1.ENERO,t1.FEBRERO, t1.MARZO,t1.ABRIL,t1.MAYO,t1.JUNIO,t1.COLOR,t1.LINESERIEWIDTH FROM ##PREF##ObjetivosFamiliasLineasNormales t1" filter="" sort="" dependent="false" check-owner="false"> <group name="General" id="1" /> <prop name="SERIE" frame="id10" chart-serie-title="true" chart-serie="true" type="T" visible="7" group="1" /> <prop name="ENERO" frame="id10" chart-serie-column="true" type="N2" visible="7" group="1" /> <prop name="FEBRERO" frame="id10" chart-serie-column="true" type="N2" visible="7" group="1" /> <prop name="MARZO" frame="id10" chart-serie-column="true" type="N2" visible="7" group="1" /> <prop name="ABRIL" frame="id10" chart-serie-column="true" type="N2" visible="7" group="1" /> <prop name="MAYO" frame="id10" chart-serie-column="true" type="N2" visible="7" group="1" /> <prop name="JUNIO" frame="id10" chart-serie-column="true" type="N2" visible="7" group="1" /> <prop name="COLOR" frame="id10" chart-serie-color="true" type="T" visible="0" group="1" /> <prop name="LINESERIEWIDTH" frame="id10" chart-serie-line-width="true" type="N2" visible="0" group="1" /> </coll>
Gráfico de Líneas XY
Atributo viewmode=“xylinechart” en la colección de cabecera que llama al contents donde se definen los datos.
Atributos del contents del gráfico de líneas XY
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
<coll name="GRAFICODELINEASXYDISENO01" special="true" sql-debug="true" notab="true" autorefresh="true" sql="" objname="" updateobj="" progid="ASData.CASBasicDataObj"> <group name="General" id="1" imgbk="fondo_cielo.png" /> <prop name="@ObjetivosFamiliasLineasXY" group="1" classid="XOneCharts" viewmode="xylinechart" type="Z" contents="ObjetivosFamiliasLineasXY" width="100%" height="100%" mask="0" chart-show-x-axis-label="false" chart-show-y-axis-label="false" /> <contents name="ObjetivosFamiliasLineasXY" src="ObjetivosFamiliasLineasXY" /> <onback> <action name="runscript"> <script language="VBScript"> appdata.FailWithMessage -11888, "##EXIT##" </script> </action> </onback> </coll> <coll name="ObjetivosFamiliasLineasXY" fontsize="8" title="ObjetivosFamiliasLineasXY" objname="ObjetivosFamiliasLineas" updateobj="ObjetivosFamiliasLineas" progid="ASData.CASBasicDataObj" sql="SELECT t1.ID,t1.SERIE,t1.EJE_X,t1.EJE_Y, t1.COLOR,t1.LINESERIEWIDTH FROM ##PREF##ObjetivosFamiliasLineas t1" filter="" sort="" dependent="false" check-owner="false"> <group name="General" id="1" /> <prop name="SERIE" frame="id10" chart-serie-title="true" chart-serie="true" type="T" visible="7" group="1" /> <prop name="EJE_X" frame="id10" chart-serie-x="true" type="N2" visible="7" group="1" /> <prop name="EJE_Y" frame="id10" chart-serie-y="true" type="N2" visible="7" group="1" /> <prop name="COLOR" frame="id10" chart-serie-color="true" type="T" visible="0" group="1" title=" " /> <prop name="LINESERIEWIDTH" frame="id10" chart-serie-line-width="true" type="N2" visible="0" group="1" /> </coll>
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