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)



1.- Gráfico de Barras. viewmode=“barchart” 2.- Barras en 3D. viewmode=“3dbarchart” 3.- Barras Diseño Deslizante. viewmode=“slidingbarchart”
4.- Gráfico tipo Tarta. viewmode=“piechart” 5.- Tarta Alternativo. viewmode=“piechart2” 6.- Línea de tiempo. viewmode=“timeserieschart”
7.- Gráfico de líneas. viewmode=“linechart” 8.- Gráfico de líneas XY. viewmode=“xylinechart”


Para su uso en Android, es necesario descargar e instalar el plugin xonecharts, disponible en xonesupport.



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)



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.

Modelo 1. Gráfico de tipo Tarta (piechart) Modelo 2. Gráfico de tipo Tarta con Zoom (piechart2)



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.

Gráfico de Líneas de Tiempo. (timeserieschart)



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.

Gráfico de Líneas. (linechart)



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.

Gráfico de líneas XY.



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>



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