Share via Share via... Twitter LinkedIn Facebook Pinterest Telegram WhatsApp Yammer RedditCambios recientesSend via e-MailImprimirEnlace permanente × Tabla de Contenidos Gráficos Barras Tarta Tipos de Gráficos Código Mappings Gráfico de Barras Ejemplo Barras Gráfico de Barras en 3D Ejemplo Barras 3D Gráfico de Barras Deslizante Ejemplo Sliding Gráfico de tipo Tarta Ejemplo Tarta Gráfico de Líneas de Tiempo Ejemplo líneas de tiempo Gráfico de Líneas Ejemplo gráfico de líneas Gráfico de Líneas XY Ejemplo líneas XY Descarga de ejemplo 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 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. 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. 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> 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