Ir al contenido principal

Gráficas como controles en Webforms

Si bien el concepto permanece, se cambió el tipo de datos para hacer más sencillo su uso, por lo cual recomiendo, una vez leido este, leer los cambios que se produjeron.

Introducción


En la linea de "extensibilidad" de la versión Rocha, no solo es posible crear "extensions" que resuelvan determinada operativa durante el desarrollo de las aplicaciones, sino que también es posible, a partir de los builds liberados en Mayo/07 crear "users controls".

Algunos "user controls" vienen "built-in" con la versión como es el caso del HTMLEditor (FCKEditor) que permite asociar un editor HTML a un atributo/variable LVChar.

También se incluye el "Chart Control" que permite insertar un control tipo "Chart" (basado en GXchart) en los webforms.

Dicho control tiene las propiedades clásicas de un Chart (Title, Type, etc) así como una propiedad GXChartData que permite establecer una variable SDT a partir de la cual se cargarán las Categorías y Series de valores, lo cual hace muy simple su uso.

A continuación algunos ejemplos que pueden orientar respecto la utilización de dicho control.


Ejemplos


Si bien hay una infinidad de gráficas a definir los ejemplos se detallan a continuación algunos ejemplos básicos de uso.

Dichos ejemplos pueden ser bajados de www.gxopen.com. Se requiere el Build 10.0.0.5789 (Junio/07) o posterior, más información al respecto.

Generalidades


En todos los ejemplo se parte de agregar un control tipo Chart al form de un webpanel.

Al agregar el control tipo Chart se pueden configurar las propiedades del mismo (tittle, type, etc) o pueden modificarse en runtime.

Además, se definen en GX dos SDT:
GXChartData – para cargar las categorías a graficar (eje X)
GXChartSerie – para cargar las series a graficar.

Cada valor de cada serie se corresponde con cada valor de la categoría. De este modo el primer valor de cada serie corresponde al primer valor de la categoría y así sucesivamente.

Facturación por Fecha


Presentar una gráfica con el total facturado por fecha.

En este ejemplo habrá solo una serie de valores a graficar con un valor (total facturado) por categoría (fecha).

Dada una estructura de facturas:
InvoiceId*
InvoiceDate
InvoiceTotal

Mostrar una gráfica como la siguiente:

graf1.jpg

Para ello se define una variable, en el ejemplo &Data, del tipo GXChartData y se asigna la propiedad "GXCharData" del control con el nombre de dicha variable.

También se define una variable, en el ejemplo &Series, del tipo GXChartSerie.

Luego se programa la carga de dichas variables del siguiente modo:

// se hace un corte de control por fecha de factura.
For each InvoiceDate

// cada fecha es cargada como una categoría diferente
    &Data.Categories.Add(InvoiceDate.ToString() )

// se suman todas las facturas para la fecha dada.
    &Total=0
    For each
        &Total=&Total+InvoiceTotal
    Endfor

// cada uno de los totales es agregado a la serie
   &Series.Values.Add(&Total)

Endfor

// se agrega (asocia) la serie a las categorías
&Data.Series.Add(&Series)

Entradas/Salidas por fecha


Presentar una gráfica con los valores de “entradas” (income) y “salidas” (outcome).

En este ejemplo habrá dos series de valores (incomes y outcomes) a graficar por fecha (categoría).

Como se dijo anteriormente el primer valor de cada serie se corresponde con el primer valor de la categoría, el segundo valor de cada serie con el segundo valor de la categoría y así sucesivamente.

Dada la estructura de income/outcomes:
IncomeOutcomeDate*
IncomeAmount
OutcomeAmount

Mostrar una gráfica como la siguiente:

graf2.jpg

Para ello se definen las variables: &Data del tipo GXChartData y &Incomes y &Outcomes del tipo GXChartSerie.

La variable &Data es asignada a la propiedad "GXChartData" del control definido en el form, luego se programa un evento:

// se asignan los nombres de las series
&Incomes.Name="Income"
&Outcomes.Name="Outcome"

// para cada fecha se agrega la categoría correspondiente y los valores para cada una de las series
For each
    &Data.Categories.Add(IncomeOutcomeDate)
    &Incomes.Values.Add(IncomeAmount)
    &Outcomes.Values.Add(OutcomeAmount)
endfor

// se agregan (asocian) ambas series a las categorías
&Data.Series.Add(&Incomes)
&Data.Series.Add(&Outcomes)

Ventas por país y por año


Presentar una gráfica con los ventas de cada país por año.

En este ejemplo habrá N series de valores a graficar (una serie por cada país) y habrá M años (categorías).

Dada la estructura:
SalesYear*
CountryId*
CountryName
SalesTotal

NOTA: suponemos que hay una tabla de Países con CountryId*, CountryName.

Mostrar una gráfica similar a:

graf3.jpg

Se definen las variables: &Years del tipo GXChartData y la variable &Sales del tipo GXChartSerie.

La variable &Years es asignada a la propiedad GXChartData del control definido en el form, luego se programa un evento:

// se cargan las categorías, es decir, los años donde hubo ventas
for each SalesYear
    option distinct
    &Years.Categories.Add(SalesYear.ToString())
endfor

// para cada país se carga el nombre de la serie
for each CountryName
    &Sales.Name=CountryName

// se totalizan por año las ventas
    For each SalesYear
        For each
            &sales.Values.Add(SalesTotal)
        endfor
    endfor

// se agrega (asocia) cada serie a las categorías
    &Years.Series.Add(&Sales)

// se define una serie nueva
    &Sales = New()
Endfor

Comentarios

Publicar un comentario

Entradas más populares de este blog

Abrir links con aplicaciones nativas y no el browser (deeplinking)

El problema que tengo con algunas aplicaciones Android/iOS es que cuando recibo un link por algún medio (mail, tweet, etc) al abrirlo me lo abre con el browser, en lugar de abrirlo con una aplicación nativa asociada a ese “contenido”. Por ejemplo, si recibo un link a un tweet espero que lo abra con alguna aplicación de twitter que tenga instalada y no con el browser. De modo análogo si recibo un mail con una nota de prensa de un medio X y tengo la aplicación de ese medio X instalada, espero que el link lo abra con la aplicación nativa y no con el browser. Lo mismo quisiera con mi aplicación de "banking" o cualquiera que tenga instalada y sepa manejar ese "contenido" (link). Los motivos son bastante obvios pero los resumo en: la experiencia de usuario es mucho mejor en la aplicación nativa que en el navegador. Parte importante del tema es que el mismo link sea válido tanto para ver el contenido en el browser como para verlo en la aplicación, porque como prove

¡A la salud de mi KB!

Es bueno, especialmente en "bases de conocimiento" (KB) que han pasado por varias versiones de Genexus, chequear su "estado de salud". En este sentido KBDoctor  es una herramienta que ayuda mucho, principalmente desde el punto de vista del "modelo" Genexus (atributos, calls, definiciones de variables, etc) representado en una KB. También es útil revisar la salud de los archivos que lo soportan. Hasta la 9.0 eran archivos C-tree (los famosos .DAT) que tenían indices (los famosos .IDX) y teníamos en "rebuild -y" que mejoraba esos archivos y sobre todo reconstruía los indices. A partir de la X las KBs se almacenan en MS SQL Server por lo cual la administración de la misma pasó de ser un "file server" a un "database server". En este sentido algo que me ha dado muy buenos resultados es el "CheckKnowledgeBase".

Rocha:Constantes tipo fecha

En la Rocha se soportan constantes del tipo fecha o fecha-hora con formato ANSI/ISO (AAAA-MM-DD HH:MM:SS).  Tecnicamente (Sintáxis): <date>::=    [0-9]{1,4}"/"[0-9]{1,2}"/"[0-9]{1,2} | [0-9]{1,4}"."[0-9]{1,2}"."[0-9]{1,2} | [0-9]{1,4}"-"[0-9]{1,2}"-"[0-9]{1,2} <hms>::=    [0-9]{1,2}[ap] | [0-9]{1,2}":"[0-9]{1,2}[ap]? | [0-9]{1,2}":"[0-9]{1,2}":"[0-9]{1,2}[ap]? <constant> ::=   "#"<date>"#" | "#"<date> <hms>"#" | "#"<hms>"#" Funcionalmente Se pueden utilizar esas constantes en las reglas, eventos, propiedades, etc (todo lugar donde se utilice el parser): Algunos ejemplos básicos: &FechaInicial=#2007-01-01# &FechaHoraInicial=#07-1-1 11:15a# &HoraInicial=#11a# Me parece bueno no tener que escribir funciones (CTOD, TTOC) sobre constantes tipo char para lograr una fecha y mucho mejor aun en