Grficas como controles en Webforms

June 19th, 2007 by Gustavo Carriquiry Si bien el concepto permanece, se cambi el tipo de datos para hacer ms sencillo su uso, por lo cual recomiendo, una vez leido este, leer los cambios que se produjeron.

Introduccin
En la linea de extensibilidad de la versin Rocha, no solo es posible crear extensions que resuelvan determinada operativa durante el desarrollo de las aplicaciones, sino que tambin es posible, a partir de los builds liberados en Mayo/07 crear users controls. Algunos user controls vienen built-in con la versin como es el caso del HTMLEditor (FCKEditor) que permite asociar un editor HTML a un atributo/variable LVChar. Tambin se incluye el Chart Control que permite insertar un control tipo Chart (basado en GXchart) en los webforms. Dicho control tiene las propiedades clsicas de un Chart (Title, Type, etc) as como una propiedad GXChartData que permite establecer una variable SDT a partir de la cual se cargarn las Categoras y Series de valores, lo cual hace muy simple su uso. A continuacin algunos ejemplos que pueden orientar respecto la utilizacin de dicho control.

Ejemplos
Si bien hay una infinidad de grficas a definir los ejemplos se detallan a continuacin algunos ejemplos bsicos de uso. Dichos ejemplos pueden ser bajados de www.gxopen.com. Se requiere el Build 10.0.0.5789 (Junio/07) o posterior, ms informacin 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. Adems, se definen en GX dos SDT: GXChartData para cargar las categoras a graficar (eje X) GXChartSerie para cargar las series a graficar.

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

Facturacin por Fecha

Presentar una grfica con el total facturado por fecha. En este ejemplo habr solo una serie de valores a graficar con un valor (total facturado) por categora (fecha). Dada una estructura de facturas: InvoiceId* InvoiceDate InvoiceTotal Mostrar una grfica como la siguiente:

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. Tambin 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 categora 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 categoras &Data.Series.Add(&Series)

Entradas/Salidas por fecha

Presentar una grfica con los valores de entradas (income) y salidas (outcome). En este ejemplo habr dos series de valores (incomes y outcomes) a graficar por fecha (categora). Como se dijo anteriormente el primer valor de cada serie se corresponde con el primer valor de la categora, el segundo valor de cada serie con el segundo valor de la categora y as sucesivamente. Dada la estructura de income/outcomes: IncomeOutcomeDate* IncomeAmount OutcomeAmount Mostrar una grfica como la siguiente:

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 categora 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 categoras &Data.Series.Add(&Incomes) &Data.Series.Add(&Outcomes)

Ventas por pas y por ao

Presentar una grfica con los ventas de cada pas por ao. En este ejemplo habr N series de valores a graficar (una serie por cada pas) y habr M aos (categoras). Dada la estructura: SalesYear* CountryId* CountryName SalesTotal NOTA: suponemos que hay una tabla de Pases con CountryId*, CountryName. Mostrar una grfica similar a:

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 categoras, es decir, los aos donde hubo ventas for each SalesYear option distinct &Years.Categories.Add(SalesYear.ToString()) endfor // para cada pas se carga el nombre de la serie for each CountryName &Sales.Name=CountryName // se totalizan por ao las ventas For each SalesYear For each &sales.Values.Add(SalesTotal) endfor endfor // se agrega (asocia) cada serie a las categoras &Years.Series.Add(&Sales) // se define una serie nueva &Sales = New() Endfor