Gráficas como controles en Webforms

June 19th, 2007 by Gustavo Carriquiry 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.

ToString() ) // se suman todas las facturas para la fecha dada.Categories. Dada una estructura de facturas: InvoiceId* InvoiceDate InvoiceTotal Mostrar una gráfica como la siguiente: Para ello se define una variable. del tipo GXChartData y se asigna la propiedad ³GXCharData´ del control con el nombre de dicha variable.Add(InvoiceDate. Facturación por Fecha Presentar una gráfica con el total facturado por fecha. en el ejemplo &Series. en el ejemplo &Data. For each InvoiceDate // cada fecha es cargada como una categoría diferente &Data. &Total=0 . Luego se programa la carga de dichas variables del siguiente modo: // se hace un corte de control por fecha de factura. También se define una variable. del tipo GXChartSerie.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. En este ejemplo habrá solo una serie de valores a graficar con un valor (total facturado) por categoría (fecha).

Add(&Series) Entradas/Salidas por fecha Presentar una gráfica con los valores de ³entradas´ (income) y ³salidas´ (outcome). el segundo valor de cada serie con el segundo valor de la categoría y así sucesivamente. En este ejemplo habrá dos series de valores (incomes y outcomes) a graficar por fecha (categoría).Values.Series.Add(&Total) Endfor // se agrega (asocia) la serie a las categorías &Data. Dada la estructura de income/outcomes: IncomeOutcomeDate* IncomeAmount OutcomeAmount Mostrar una gráfica como la siguiente: Para ello se definen las variables: &Data del tipo GXChartData y &Incomes y &Outcomes del tipo GXChartSerie. .For each &Total=&Total+InvoiceTotal Endfor // cada uno de los totales es agregado a la serie &Series. Como se dijo anteriormente el primer valor de cada serie se corresponde con el primer valor de la categoría.

Categories.Add(&Outcomes) Ventas por país y por año Presentar una gráfica con los ventas de cada país por año.Values.Name=´Outcome´ // para cada fecha se agrega la categoría correspondiente y los valores para cada una de las series For each &Data.Add(IncomeOutcomeDate) &Incomes. Mostrar una gráfica similar a: .Name=´Income´ &Outcomes.Add(OutcomeAmount) endfor // se agregan (asocian) ambas series a las categorías &Data. En este ejemplo habrá N series de valores a graficar (una serie por cada país) y habrá M años (categorías).Series.Series.Add(&Incomes) &Data. Dada la estructura: SalesYear* CountryId* CountryName SalesTotal NOTA: suponemos que hay una tabla de Países con CountryId*. luego se programa un evento: // se asignan los nombres de las series &Incomes. CountryName.Values.Add(IncomeAmount) &Outcomes.La variable &Data es asignada a la propiedad ³GXChartData´ del control definido en el form.

Series. La variable &Years es asignada a la propiedad GXChartData del control definido en el form.Values.Add(&Sales) // se define una serie nueva &Sales = New() Endfor .ToString()) endfor // para cada país se carga el nombre de la serie for each CountryName &Sales.Add(SalesYear.Add(SalesTotal) endfor endfor // se agrega (asocia) cada serie a las categorías &Years. los años donde hubo ventas for each SalesYear option distinct &Years.Name=CountryName // se totalizan por año las ventas For each SalesYear For each &sales.Se definen las variables: &Years del tipo GXChartData y la variable &Sales del tipo GXChartSerie. luego se programa un evento: // se cargan las categorías. es decir.Categories.